【笔记】TypeScript学习笔记

前言

TypeScript学习笔记

TypeScript源代码文件由.ts为后缀
TypeScript完全兼容Javascript，可以直接在.ts文件中编写Javascript代码

下载TS编译器

npm install typescript -g

使用TS编译器tsc

编译单个TS文件

• 编译后会在当前目录下生成对应文件名的.js文件

• 默认编译成ES3的JS代码

<file>：TS源代码文件

tsc <file>.ts

监视模式

• tsc编译器持续监视<file>.ts文件，一旦发生改变就立即编译

tsc <file>.ts -w

编译多个TS文件

创建配置文件

tsconfig.json

{
  
}

编译

tsc

监视模式

tsc -w

声名一个有类型的变量

let 变量名: 数据类型;

数据类型

声名一个任意类型的变量

显式的

• any类型和unknown类型都可以存放任意类型的数据
• any和unknown的区别
  • any类型的变量可以赋值给任意类型的变量，所以会污染有数据类型的变量，导致原本有数据类型的变量数据类型也变成了any
  • unknown类型的变量不可以赋值给其他数据类型的变量，所以不会污染原本有数据类型的变量

let 变量名: any;

let 变量名: unknown;

强制将unknown类型的变量赋值给其他类型

• 通过as 数据类型进行类型断言，将unknown类型的数据赋值给其他类型

let a unknown = "";

let b string = a as string;

• 也可以通过<数据类型>进行类型断言

let a unknown = "";

let b string = <string>a;

隐式的

let 变量名;

字符串类型

let 变量名: string;

数值类型

let 变量名: number;

布尔类型

let 变量名: boolean;

对象类型

let 变量名: object;

定义对象中包含的属性

• 这种变量只能存储拥有指定属性的对象
• 存储的对象必须且仅有指定属性名的属性，并且属性的数据类型必须与定义的相同

let 变量名: {属性名: 数据类型};

let a: {k: number};
a = {k: 0};

定义可选的属性

• 在属性名后添加?表示这个属性是可选的，无论有无这个属性，都能被这个变量存储

let 变量名: {属性名?: 数据类型}

let a: {k?: number};
a = {};

定义任意类型的属性值

• 这个变量可以存储任意数量、任意名称的属性，属性值的类型只要符合any即可

propName：这个名称是任意的

let 变量名: {[propName: string]: any}

let a: {[k: string]: any};
a = {a: 0, b: true, c: ""};

函数类型

let 变量名: Function;

定义函数结构的类型声名

let 变量名: (形参名: 数据类型)=>数据类型;

let a: (k: number)=>string;
a = function (0) {
    return ""
};

数组类型

• 这个数组变量中只能存储指定数据类型的数组

let 变量名: 数据类型[];

let a: number[];
a = [0];

let 变量名: Array<数据类型>;

let a: Array<number>;
a = [0];

元祖类型

• 这个元祖变量中只能存放指定长度、指定数据类型的数据

let 变量名: [数据类型, 数据类型];

let a: [int, string];
a = [0, ""];

枚举类型

enum 枚举名 {
    枚举属性名 = 枚举属性值
    枚举属性名 = 枚举属性值
}

// 定义枚举
enum Gender {
    Male
    Female
}
// 获取枚举值
Gender.Male

• 如果枚举属性值是从0开始，每次递增1，可以省略

enum 枚举名 {
    枚举属性名
    枚举属性名
}

联合类型

满足其一

• 这种类型的变量可以存放提及到的多种数据类型的其中一种

let 变量名: 数据类型 | 数据类型;

let a: 0 | 1;
a = 0;

同时满足

• 这种类型的变量只能存放满足所有提及到的多种数据类型

let 变量名: 数据类型 & 数据类型;

let a: {k1: number} & {k2: string};
a = {k1: 0, k2: ""};

定义一个有类型的变量

let 变量名: 数据类型 = 值;

联合类型

let 变量名: 数据类型 | 数据类型 = 值;

自动类型推倒

• 当定义一个变量时，如果省略了数据类型的定义，ts会自动将首次赋值的类型作为这个变量的数据类型

let 变量名 = 值;

子面量类型声明

• 将值作为数据类型
• 这种变量只能存放这个值

let 变量名 值;
变量名 = 值;

多个字面量

• 通过|定义或者关系
• 这种变量只能存放提及到的值的其中一个

let 变量名 值 | 值;
变量名 = 值;

定义一个对象类型的变量

let 变量名: object = {};

let 变量名: object = function () {};

在定义函数时添加类型声名

为形参添加类型声名

function 函数名(形参名: 数据类型) {
    ...
}

为返回值添加类型声名

function 函数名(): 数据类型 {
    ...
}

没有返回值

• 无返回值、返回值为null、返回值为undefined都可以用void定义

function 函数名(): void {
    ...
}

function 函数名(): void {
    ...
    return null
}

function 函数名(): void {
    ...
    return undefined
}

不允许有返回值

• 绝对没有返回值，不允许返回任何值，可以使用never定义

function 函数名(): never {
    ...
}

定义一种类型

• 定义一种类型
• 给一个已知类型起别名

type 类型名 = 数据类型;

type a = 0 | 1;
let b: a = 0;
type c = {
  key: string
};
let d: c = {key: "value"};

完成

参考文献

哔哩哔哩——尚硅谷