一:typeScript是什么?
1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
4. TS完全兼容JS,换言之,任何的JS代码都可以直接当成TS使用。
5. 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
6. js本身是一种松散的语言,特别是在变量类型,语法规范上不够正规,没有明确的规定,所以就出现了ts,ts是在js基础上对其缺点进行弥补的一种语言。
二:配置ts编译环境
在nodejs环境的基础上使用npm全局安装typescript
- 进入命令行
- 输入:npm i -g typescript
- 这个命令中就包含了ts编译器
- 运行 tsc xxx.ts文件就可以将ts文件编译成为js文件
三:typeScript中的特点类型声明
- 语法:
- ```typescript
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
...
}
```
- 自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
例如
let s:10;//这样ts编译器会默认添加其类型为number,必须是变量命名的同时也进行了赋值操作
let s;//编译器默认其类型是any,这样就关闭了ts类型管理变成了原本的js
typeScript中的类型
- 类型:
| 类型 | 例子 | 描述 |
| :-----: | :---------------: | :----------------------------: |
| number | 1, -33, 2.5 | 任意数字 |
| string | 'hi', "hi", `hi` | 任意字符串 |
| boolean | true、false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值(undefined) | 没有值(或undefined) |
| never | 没有值 | 不能是任何值 |
| object | {name:'孙悟空'} | 任意的JS对象 |
| array | [1,2,3] | 任意JS数组 |
| tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
| enum | enum{A, B} | 枚举,TS中新增类型 |
- 字面量
- 也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围 |表示或的意思,&与也是存在的但是不用
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
- 类型断言
- 有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
- 第一种
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
- 第二种
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
四:ts编译器配置信息
- 自动编译文件
- 编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
- 示例:
tsc xxx.ts -w
- tsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译
- 配置选项:
include:定义需要被编译的文件
"include":["src/**/*", "tests/**/*"]
```
exclude:定义需要排除在外面的文件(该配置命令用的少)
"exclude": ["./src/hello/**/*"]
```
extends:定义继承文件(方便配置文件的编写)
"extends": "./configs/base"
``
- file:指定被编译文件的列表,只有需要编译的文件少时才会用到(基本不用)
compilerOptions :配置选项
- 编译选项是配置文件中非常重要也比较复杂的配置选项
- 在compilerOptions中包含多个子选项,用来完成对编译的配置
- 项目选项
- target
- 设置ts代码编译的目标版本
- 可选值:
- ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
- 示例:
"compilerOptions": {
"target": "ES6"
}
- 如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码
- lib
- 指定代码运行时所包含的库(宿主环境)
- 可选值:
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
- 示例:
"compilerOptions": {
"target": "ES6",
"lib": ["ES6", "DOM"],
"outDir": "dist",
"outFile": "dist/aa.js"
}
- module
- 设置编译后代码使用的模块化系统
- 可选值:
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
- 示例:
"compilerOptions": {
"module": "CommonJS"
}
- outDir
- 编译后文件的所在目录
- 默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置
- 示例:
"compilerOptions": {
"outDir": "dist"
}
- 设置后编译后的js文件将会生成到dist目录
- outFile
- 将所有的文件编译为一个js文件
- 默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果module制定了None、System或AMD则会将模块一起合并到文件之中
- 示例:
"compilerOptions": {
"outFile": "dist/app.js"
}
- rootDir
- 指定代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录
- 示例:
"compilerOptions": {
"rootDir": "./src"
}
- allowJs
- 是否对js文件编译
- checkJs
- 是否对js文件进行检查
- 示例:
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
- removeComments
- 是否删除注释
- 默认值:false
- noEmit
- 不对代码进行编译
- 默认值:false
- sourceMap
- 是否生成sourceMap
- 默认值:false
- 严格检查
- strict
- 启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查
- alwaysStrict
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- 额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- 高级
- allowUnreachableCode
- 检查不可达代码
- 可选值:
- true,忽略不可达代码
- false,不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值:false
五:结合webpack编写打包typeScript项目
简单配置一个webpack.config.js配置文件:除了入口文件后缀名改为ts其他的差不多,主要是使用了ts-loader编译配置
Babel插件的作用,对js文件进行浏览器兼容性的考虑
...略...
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options:{
presets: [
[
"@babel/preset-env",
{
"targets":{
"chrome": "58",
"ie": "11"
},
"corejs":"3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
}
]
}
...略...
```