目录
一、TypeScript开发环境搭建
1、下载Node.js
2、安装Node.js
3、使用npm全局安装typescript
①进入命令行
②输入:npm i -g typescript
4、创建一个ts文件
5、使用tsc对ts文件进行编译
①进入命令行
②进入ts文件所在目录
③执行命令:tsc xxx.ts
二、基本类型
1、类型声明
①类型声明是TS非常重要的一个特点;
②通过类型声明可以指定TS中变量(参数、形参)的类型;
③指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错;
④简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值;
⑤语法:
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
......
}
2、自动类型判断
①TS拥有自动的类型判断机制;
②当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型;
③所以如果你的变量的声明和赋值是同时进行的,可以省略掉类型声明。
3、类型
类型 | 例子 | 描述 |
---|---|---|
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中新增类型 |
①number:
let decimal: number = 6;
let hex: number = Oxf00d;
let binary: number = Ob1010;
let octal: number = Oo744;
let big: bigint = 100n;
②boolean:
let isDone: boolean = false;
③string:
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;
④字面量:
也可以使用字面量去置顶变量的类型,通过字面量可以确定变量的取值范围;
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
⑤any:
let d: any = 4;
d = 'hello';
d = true;
⑥unknown:
let notSure: unknown = 4;
notSure = 'hello';
⑦void:
let unusable: void = undefined;
⑧never:
function error(message: string): never {
throw new Error(message);
}
⑨object(没啥用):
let obj: object = {};
⑩array:
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
①①tuple:
let x: [string, number];
x = ["hello", 10];
①②enum:
enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
enum Color {
Red = 1,
Green,
Blue
}
let c: Color = Color.Green;
enum Color {
Red = 1,
Green = 2,
Blue = 4
}
let c: Color = Color.Green;
①③类型断言:
有些情况下,变量的类型对于我们来说是很明确,但是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;
三、编译选项
1、自动编译文件
①编译文件时,使用-w指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译;
②示例:
tsc xxx.ts -w
2、自动编译整个项目
①如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件;
②但是能直接使用tsc命令的前提是,要先在项目根目录下创建一个ts的配置文件tsconfig.json;
③tsconfig.json是一个JSON文件,添加配置文件后,只需tsc命令即可完成对整个项目的编译;
④配置选项:(**表示任意目录,*表示任意文件)
include:1)定义希望被编译文件所在的目录;
2)默认值:["**/*"];
3)示例:
"include": [
"./src/**/*"
]
上述示例中,所有src目录和tests目录下的文件都会被编译。
exclude:1)定义需要排除在外的目录;
2)默认值:["nide_modules", "bower_components", "jspm_packages"];
3)示例:
"exclude": [
"./src/hello/**/*"
]
上述示例中,src下hello目录下的文件都不会被编译。
extends:1)定义被继承的配置文件;
2)示例:
"extends": [
"./configs/base"
]
上述示例中,当前配置文件中会自动包含config目录下base.json中的所有配置信息。
files:1)指定被编译文件的列表,只有需要编译的文件少时才会用到;
2)示例:
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]
列表中的文件都会被TS编译器所编译。
compilerOptions:1)编译选项是配置文件中非常重要也比较复杂的配置选项;
2)在compilerOptions中包含多个子选项,用来完成对编译的配置:
项目选项:
(1)target:1.设置ts代码编译的目标版本;
2.可选值:ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext;
3.示例:
"compilerOptions": {
"target": "ES6"
}
如上设置,我们所编写的ts代码将会被编译为ES6版本的js代码。
(2)lib:1.指定代码运行时所包含的库(宿主环境);
2.可选值:ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost;
3.示例:
"compilerOptions": {
"target": "ES6",
"lib": ["ES6", "DOM"],
"outDir": "dist",
"outFile": "dist/aa.js"
}
(3)module:1.设置编译后代码使用的模块化系统;
2.可选值:CommonJS、UMD、AMD、System、ES2020、ESNext、None;
3.示例:
"compilerOptions": {
"module": "CommonJS"
}
(4)outDir:1.编译后文件的所在目录;
2.默认情况下,编译后的js文件会和ts文件位于相同的目录,设置outDir后可以改变编译后文件的位置;
3.示例:
"compilerOptions": {
"outDir": "dist"
}
设置后编译后的js文件将会生成到dist目录。
(5)outFile:1.将所有的文件编译为一个js文件;
2.默认会将所有的编写在全局作用域中的代码合并为一个js文件,如果module制定了None、System或AMD则会将模块一起合并到文件之中;
3.示例:
"compilerOptions": {
"outFile": "dist/app.js"
}
(6)rootDir:1.置顶代码的根目录,默认情况下编译后文件的目录结构会以最长的公共目录为根目录,通过rootDir可以手动指定根目录;
2.示例:
"compilerOptions": {
"rootDir": "./src"
}
(7)allowjs:是否对js文件编译。
(8)checkjs:1.是否对js文件进行检查;
2.示例:
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
(9)removeComments:1.是否删除注释;
2.默认值:false。
(10)noEmit:1.不对代码进行编译;
2.默认值:false。
(11)sourceMap:1.是否生成sourceMap;
2.默认值:false。
严格检查:
(1)strict:启用所有的严格检查,默认值为true,设置后相当于开启了所有的严格检查。
(2)alwaysStrict:用来设置编译后的文件是否使用严格模式,默认false。
(3)noImplicitAny:不允许隐式的any类型。
(4)noImplicitThis:不允许不明确类型的this。
(5)strictNullChecks:严格的检查空值。
---ing