TypeScript知识点

目录

一、TypeScript开发环境搭建

1、下载Node.js

2、安装Node.js

3、使用npm全局安装typescript

4、创建一个ts文件

5、使用tsc对ts文件进行编译

二、基本类型

1、类型声明

2、自动类型判断

3、类型

三、编译选项

1、自动编译文件

2、自动编译整个项目

---

一、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