TypeScript 的学习笔记，前端开发速成结尾学习html5、css、javascript这些基础知识，学习的渠道

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

html5 开源分享：docs.qq.com/doc/DSmRnRG… let value3: boolean = value // Error

let value4: number = value // Error

let value5: string = value // Error

let value6: object = value // Error

let value7: any[] = value // Error

可以看到，该 unknown 类型只能分配给 any 类型和 unknown 类型本身。

继续尝试：

let value: unknown

value.foo.bar // Error

value.trim() // Error

value() // Error

new value() // Error

value[0][1] // Error

unknown 类型在被确定为某个类型之前，不能被进行诸如函数执行、实例化等操作，一定程度上对类型进行了保护。

在那些将取得任意值，但不知道具体类型的地方使用 unknown，而非 any。

4、接口（Interface）

4.1、接口的概念

接口是对 JavaScript 本身的随意性进行约束，通过定义一个接口，约定了变量、类、函数等应该按照什么样的格式进行声明，实现多人合作的一致性。TypeScript 编译器依赖接口用于类型检查，最终编译为 JavaScript 后，接口将会被移除。

// 语法格式

interface DemoInterface {

}

4.2、应用场景

在声明一个对象、函数或者类时，先定义接口，确保其数据结构的一致性。

在多人协作时，定义接口尤为重要。

4.3、接口的好处

过去我们写 JavaScript 定义一个函数：

function getClothesInfo(clothes) {

console.log(clothes.price)

}

let myClothes = {

color: 'black',

size: 'XL',

price: 98

}

getClothesInfo(myClothes)

之前我们写 JavaScript 这样是很正常的，但同时你可能会遇到下面这些问题：

getClothesInfo() // Uncaught TypeError: Cannot read property 'price' of undefined

getClothesInfo({ color: 'black' }) // undefined

相信原因你也知道，JavaScript 是 弱类型 语言，并不会对传入的参数进行任何检测，错误在运行时才被发现。那么通过定义 接口，在编译阶段甚至开发阶段就避免掉这类错误，接口将检查类型是否和某种结构做匹配。

下面通过接口的方式重写之前的例子：

interface Clothes {

color: string;

size: string;

price: number;

}

function getClothesInfo(clothes: Clothes) {

console.log(clothes.price)

}

let myClothes: Clothes = {

color: 'black',

size: 'XL',

price: 98

}

getClothesInfo(myClothes)

代码中，定义了一个接口 Clothes，在传入的变量 clothes 中，它的类型为 Clothes。这样，就约束了这个传入对象的 外形 与接口定义一致。只要传入的对象满足上面的类型约束，那么它就是被允许的。

定义接口要首字母大写。
只需要关注值的外形，并不像其他语言一样，定义接口是为了实现。
如果没有特殊声明，定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致。

4.4、接口的属性

可选属性

接口中的属性不全是必需的。可选属性的含义是该属性在被变量定义时可以不存在。

// 语法

interface Clothes {

color?: string;

size: string;

price: number;

}

// 这里可以不定义属性 color

let myClothes: Clothes = {

size: 'XL',

price: 98

}

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个 ? 符号。这时，仍不允许添加未定义的属性，如果引用了不存在的属性时 TS 将直接捕获错误。

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly 来指定只读属性，比如价格是不能被修改的：

// 语法

interface Clothes {

color?: string;

size: string;

readonly price: number;

}

// 创建的时候给 price 赋值

let myClothes: Clothes = {

size: 'XL',

price: 98

}

// 不可修改

myClothes.price = 100

// error TS2540: Cannot assign to 'price' because it is a constant or a read-only property

TypeScript 可以通过 ReadonlyArray<T> 设置数组为只读，那么它的所有写方法都会失效。

let arr: ReadonlyArray = [1,2,3,4,5];

arr[0] = 6; // Index signature in type 'readonly number[]' only permits reading

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。做为 变量 使用的话用 const，若做为 属性 则使用 readonly。

任意属性

有时候我们希望接口允许有任意的属性，语法是用 [] 将属性包裹起来：

// 语法

interface Clothes {

color?: string;

size: string;

readonly price: number;

}

// 任意属性 activity

let myClothes: Clothes = {

size: 'XL',

price: 98,

activity: 'coupon'

}

这里的接口 Clothes 可以有任意数量的属性，并且只要它们不是 color size 和 price，那么就无所谓它们的类型是什么。

案例：

使用 axios 库发起 HTTP 传输的时候，可以写入一个自定义的属性，就是因为源码中定义了一个任意属性：

this.$axios({

method: 'put',

url: '/cms/user',

data: {

nickname: this.nickname,

showBackend: true,

})

4.5、函数类型

除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有 参数列表 和 返回值类型 的函数定义。

interface SearchFunc {

(source: string, subString: string): boolean;

}

let mySearch: SearchFunc;

mySearch = function(source: string, subString: string): boolean {

return source.search(subString) > -1;

}

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。你可以改变函数的参数名，只要保证函数参数的位置不变。函数的参数会被逐个进行检查：

interface SearchFunc {

(source: string, subString: string): boolean;

}

let mySearch: SearchFunc;

// source => src, subString => sub

mySearch = function(src: string, sub: string): boolean {

return src.search(sub) > -1;

}

如果你不想指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量。

interface SearchFunc {

(source: string, subString: string): boolean;

}

let mySearch: SearchFunc;

mySearch = function(src, sub) {

let result = src.search(sub);

return result > -1;

}

如果接口中的函数类型带有函数名，下面两种书写方式是等价的：

interface Calculate {

add(x: number, y: number): number

multiply: (x: number, y: number) => number

}

4.6、可索引类型

代码示例：

// 正常的js代码

let arr = [1, 2, 3, 4, 5]

let obj = {

brand: 'hello',

type: 'education'

}

arr[0]

obj['brand']

定义可索引类型接口：

interface ScenicInterface {

}

let arr: ScenicInterface = ['西湖', '华山', '故宫']

let favorite: string = arr[0]

示例中索引签名是 number类型，返回值是字符串类型。

另外还有一种索引签名是 字符串类型。我们可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。通过下面的例子理解这句话：

// 正确

interface Foo {

x: number;

y: number;

}

// 错误

interface Bar {

x: number;

y: string; // Error: y 属性必须为 number 类型

}

第 12 行，语法错误是因为当使用 number 来索引时，JavaScript 会将它转换成 string 然后再去索引对象。也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

4.7、类类型

我们希望类的实现必须遵循接口定义，那么可以使用 implements 关键字来确保兼容性。

这种类型的接口在传统面向对象语言中最为常见，比如 java 中接口就是这种类类型的接口。这种接口与抽象类比较相似，但是接口只能含有抽象方法和成员属性，实现类中必须实现接口中所有的抽象方法和成员属性。

interface AnimalInterface {

}

class Dog implements AnimalInterface {

constructor(name: string){

this.name = name

}

你也可以在接口中描述一个方法，在类里实现它：

interface AnimalInterface {

eat(m: number): string

}

class Dog implements AnimalInterface {

constructor(name: string){

this.name = name

}

eat(m: number) {

return ${this.name}吃肉${m}分钟

}

接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。

4.8、继承接口

和类一样，接口也可以通过关键字 extents 相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

interface Shape {

color: string;

}

interface Square extends Shape {

sideLength: number;

}

let square = {} as Square;

// 继承了 Shape 的属性

square.color = "blue";

square.sideLength = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {

color: string;

}

interface PenStroke {

penWidth: number;

}

interface Square extends Shape, PenStroke {

sideLength: number;

}

let square = {} as Square;

square.color = "blue";

square.sideLength = 10;

square.penWidth = 5.0;

4.9、混合类型

接口可以描述函数、对象的方法或者对象的属性。

有时希望一个对象同时具有上面提到多种类型，比如一个对象可以当做函数使用，同时又具有属性和方法。

interface Counter {

(start: number): string;

interval: number;

reset(): void;

}

function getCounter(): Counter {

let counter = function (start: number) { } as Counter;

counter.interval = 123;

counter.reset = function () { };

return counter;

}

let c = getCounter();

c(10);

c.reset();

c.interval = 5.0;

上面代码中，第 1 行，声明一个接口，如果只有 (start: number): string 一个成员，那么这个接口就是函数接口，同时还具有其他两个成员，可以用来描述对象的属性和方法，这样就构成了一个混合接口。

第 7 行，创建一个 getCounter() 函数，它的返回值是 Counter 类型的。

let counter = function (start: number) { } as Counter;

第 8 行，通过类型断言，将函数对象转换为 Counter 类型，转换后的对象不但实现了函数接口的描述，使之成为一个函数，还具有 interval 属性和 reset() 方法。断言成功的条件是，两个数据类型只要有一方可以赋值给另一方，这里函数类型数据不能赋值给接口类型的变量，因为它不具有 interval 属性和 reset() 方法。

5、类（Class）

5.1、类的概念

类描述了所创建的对象共同的属性和方法。通过 class 关键字声明一个类，主要包含以下模块：

属性
构造函数
方法

5.2、类的本质

JavaScript 中，生成实例对象可以通过构造函数的方式：

function Calculate (x, y) {

this.x = x

this.y = y

}

Calculate.prototype.add = function () {

return this.x + this.y

}

var calculate = new Calculate(1, 2)

console.log(calculate.add()) // 3

如果通过 class 关键字进行改写：

class Calculate {

// 类的属性

public x: number

public y: number

// 构造函数

constructor(x: number, y: number) {

this.x = x

this.y = y

}

// 类的方法

add () {

return this.x + this.y

}

const calculate = new Calculate(1, 2)

console.log(calculate.add()) // 3

console.log(typeof Calculate) // 'function'

console.log(Calculate === Calculate.prototype.constructor) // true

最后一行，可以看出，类指向其构造函数本身，class 关键字可以看做是一个语法糖。

constructor() 方法是类的默认方法，通过 new 来生成对象实例时，自动调用该方法。换句话说，constructor() 方法默认返回实例对象 this。

5.3、类的继承

基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类，这样可以抽出公共部分让子类复用。

使用 extends 关键字来实现继承：

// 继承 JavaScript 内置的 Date 对象

class LinDate extends Date {

getFormattedDate() {

var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();

}

const date = new LinDate()

console.log(date.getFullYear()); // 2020

console.log(date.getFormattedDate()) // 7-Jan-2020

LinDate 继承了 Date 的功能，可以使用父类 Date 的方法 getFullYear()，也可以使用自身的方法 getFormattedDate()。

子类在 constructor 内中使用 super() 方法调用父类的构造函数，在一般方法内使用 super.method() 执行父类的方法。

class Animal {

public name:string

constructor(name: string) {

this.name = name

}

move(distance: number = 0) {

console.log(${this.name} moved ${distance}m.)

}

class Dog extends Animal {

constructor(name: string) {

// 调用父类的构造函数

super(name)

}

move(distance = 10) {

console.log('bark...')

// 执行父类的方法

super.move(distance)

}

const dog: Animal = new Dog('Coco')

dog.move() // Coco moved 10m.

5.4、访问修饰符

TypeScript 可以使用四种访问修饰符 public、protected、private 和 readonly。

public

TypeScript 中，类的成员全部默认为 public，当然你也可以显式的将一个成员标记为 public，标记为 public 后，在程序类的外部可以访问。

class Calculate {

// 类的属性

public x: number

public y: number

// 构造函数

public constructor(x: number, y: number) {

this.x = x

this.y = y

}

public add () {

return this.x + this.y

}

protected

当成员被定义为 protected 后，只能被类的内部以及类的子类访问。

class Base {

//被定义成受保护的

protected baseUrl: string = 'api.com/'

constructor() {}

protected request(method: string) {

//类的内部可以访问受保护的成员属性

const url = ${this.baseUrl}${method}

// TODO 封装基础的 http 请求

}

class Address extends Base {

get() {

//子类可以访问父类中受保护的属性和方法

return this.request('address')

}

private

当类的成员被定义为 private 后，只能被类的内部访问。

class Mom {

private labour() {

return 'baby is coming'

}

class Son extends Mom {

test () {

this.labour() // Error, Property 'labour' is private and only accessible within class 'Mom'

}

在上面代码的第 9 行，父类中的 labour() 方法被定义为私有方法，只能在父类中被使用，子类中调用报错。

readonly

通过 readonly 关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

class Token {

readonly secret: string = 'xjx*xh3GzW#3'

readonly expired: number

constructor (expired: number) {

this.expired = expired

}

const token = new Token(60 * 60 * 24)

token.expired = 60 * 60 * 2 // Error, expired 是只读的

上面代码中最后一行，因 Token 类的属性expired 被设置为只读属性，不可被修改。

5.5、静态方法

通过 static 关键字来创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。

class User {

static getInformation () {

return 'This guy is too lazy to write anything.'

}

User.getInformation() // OK

const user = new User()

user.getInformation() // Error 实例中无此方法

getInformation() 方法被定义为静态方法，只存在于类本身上，类的实例无法访问。

静态方法调用同一个类中的其他静态方法，可使用 this 关键字。

class StaticMethodCall {

static staticMethod() {

return 'Static method has been called'

}

static anotherStaticMethod() {

return this.staticMethod() + ' from another static method'

}

静态方法中的 this 指向类本身，而静态方法也存在于类本身，所以可以在静态方法中用 this 访问在同一类中的其他静态方法。

非静态方法中，不能直接使用 this 关键字来访问静态方法。而要用类本身或者构造函数的属性来调用该方法：

class StaticMethodCall {

constructor() {

// 类本身调用

console.log(StaticMethodCall.staticMethod())

// 构造函数的属性调用

console.log(this.constructor.staticMethod())

}

static staticMethod() {

return 'static method has been called.'

}

类指向其构造函数本身，在非静态方法中，this.constructor === StaticMethodCall 为 true，也就是说这两种写法等价。

5.6、抽象类

抽象类作为其它派生类的基类使用，它们一般不会直接被实例化，不同于接口，抽象类可以包含成员的实现细节。

abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Animal {

abstract makeSound(): void;

move(): void {

console.log('roaming the earch...');

}

const animal = new Animal() // Error, 无法创建抽象类实例

通常我们需要创建子类继承抽象类，将抽象类中的抽象方法一一实现，这样在大型项目中可以很好的约束子类的实现。

class Dog extends Animal {

makeSound() {

console.log('bark bark bark...')

}

const dog = new Dog()

dog.makeSound() // bark bark bark...

dog.move() // roaming the earch...

5.7、把类当做接口使用

类也可以作为接口来使用，这在项目中是很常见的。

class Pizza {

constructor(public name: string, public toppings: string[]) {}

}

class PizzaMaker {

// 把 Pizza 类当做接口

static create(event: Pizza) {

return new Pizza(event.name, event.toppings)

}

const pizza = PizzaMaker.create({

toppings: ['pasta', 'eggs', 'milk', 'cheese']

})

因为接口和类都定义了对象的结构，在某些情况下可以互换使用。如果你需要创建一个可以自定义参数的实例，同时也可以进行类型检查，把类当做接口使用不失为一个很好的方法。

这就是 TypeScript 的强大功能，而且非常灵活，拥有全面的面向对象设计和通用的类型检查。

6、函数（Function）

6.1、函数的概念

在 JavaScript 中，函数是头等（first-class）对象，因为它们可以像任何其他对象一样具有属性和方法。在 JavaScript 中，每个函数都是一个 Function 对象。

TypeScript 又为 JavaScript 函数添加了一些额外的功能，让我们可以更容易地使用：

函数类型
可选参数
默认参数
剩余参数
函数重载

6.2、函数类型

在 TypeScript 中编写函数，需要给形参和返回值指定类型：

const add = function(x: number, y: number): string {

return (x + y).toString()

}

参数 x 和 y 都是 number 类型，两个参数相加后将其类型转换为 string，所以整个函数的返回值为 string 类型。

上面的代码只是对 = 等号右侧的匿名函数进行了类型定义，等号左侧的 add 同样可以添加类型：

const add: (x: number, y: number) => string = function(x: number, y: number): string {

return (x + y).toString()

}

可以看到，等号左侧的类型定义由两部分组成：参数类型和返回值类型，通过 => 符号来连接。

这里要注意：函数类型的 => 和箭头函数的 => 是不同的含义。

通过箭头函数改写一下刚才写的函数:

const add = (x: number, y: number): string => (x + y).toString()

等号左右两侧书写完整：

// 只要参数位置及类型不变，变量名称可以自己定义，比如把两个参数定位为 a b

const add: (a: number, b: number) => string = (x: number, y: number): string => (x + y).toString()

5.3、函数的参数

参数个数保持一致

TypeScript 中每个函数参数都是必须的。这不是指不能传递 null 或 undefined 作为参数，而是说编译器会检查用户是否为每个参数都传入了值。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

const fullName = (firstName: string, lastName: string): string => ${firstName}${lastName}

let result1 = fullName('Sherlock', 'Holmes')

let result2 = fullName('Sherlock', 'Holmes', 'character') // Error, Expected 2 arguments, but got 3

let result3 = fullName('Sherlock') // Error, Expected 2 arguments, but got 1

可选参数

在 JavaScript 中每个参数都是可选的，可传可不传。没传参的时候，它的值就是 undefined。而在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能，可选参数必须跟在必须参数后面。

const fullName = (firstName: string, lastName?: string): string => ${firstName}${lastName}

let result1 = fullName('Sherlock', 'Holmes')

let result2 = fullName('Sherlock', 'Holmes', 'character') // Error, Expected 1-2 arguments, but got 3

let result3 = fullName('Sherlock') // OK

默认参数

参数可以取默认值，上面介绍的可选参数必须跟在必须参数后面，而带默认值的参数不需要放在必须参数的后面，可随意调整位置：

const token = (expired = 60*60, secret: string): void => {}

// 或

const token1 = (secret: string, expired = 60*60 ): void => {}

剩余参数

有的时候，函数的参数个数是不确定的，可能传入未知个数，这时没有关系，有一种方法可以解决这个问题。

通过 rest 参数 (形式为 ...变量名)来获取函数的剩余参数，这样就不需要使用 arguments 对象了。

function assert(ok: boolean, ...args: string[]): void {

if (!ok) {

throw new Error(args.join(' '));

}

assert(false, '上传文件过大', '只能上传jpg格式')

注意 rest 参数 只能是最后一个参数。

this参数

JavaScript 里，this 的值在函数被调用的时候才会被指定，但是这个 this 到底指的是什么还是需要花点时间弄清楚。

默认情况下，tsconfig.json 中，编译选项 compilerOptions 的属性 noImplicitThis 为 false，我们在一个对象中使用的 this 时，它的类型是 any 类型。

let triangle = {

a: 10,

b: 15,

c: 20,

area: function () {

return () => {

// this 为 any 类型

const p = (this.a + this.b + this.c) / 2

return Math.sqrt(p * (p - this.a) * (p - this.b) *(p - this.c))

}

const myArea = triangle.area()

console.log(myArea())

在实际工作中 any 类型是非常危险的，我们可以添加任意属性到 any 类型的参数上，比如将 const p = (this.a + this.b + this.c) / 2 这句改为 const p = (this.d + this.d + this.d) / 2 也不会报错，这很容易造成不必要的问题。

所以我们应该明确 this 的指向，下面介绍两种方法：

第一种，在 tsconfig.json 中，将编译选项 compilerOptions 的属性 noImplicitThis 设置为 true，TypeScript 编译器就会帮你进行正确的类型推断：

let triangle = {

a: 10,

b: 15,

c: 20,

area: function () {

return () => {

const p = (this.a + this.b + this.c) / 2

return Math.sqrt(p * (p - this.a) * (p - this.b) *(p - this.c))

}

const myArea = triangle.area()

console.log(myArea())

将 noImplicitThis 设置为 true 以后，把鼠标放在第 7 行的 this 上，可以看到：

this: {

a: number;

b: number;

c: number;

area: () => () => number;

}

这时，TypeScript 编译器就能准确的知道了 this 的类型，如果取不存在于 this 属性中的 d，将会报错 Property 'd' does not exist on type '{ a: number; b: number; c: number; area: () => () => any; }'

除了这种方法，我们还可以通过 this 参数 这种形式来解决 this 为 any 类型这一问题。提供一个显式的 this 参数，它出现在参数列表的最前面：

// 语法

function f(this: void) {

}

改造刚才的例子：

interface Triangle {

a: number;

b: number;

c: number;

area(this: Triangle): () => number;

}

let triangle: Triangle = {

a: 10,

b: 15,

c: 20,

area: function (this: Triangle) {

return () => {

const p = (this.a + this.b + this.c) / 2

return Math.sqrt(p * (p - this.a) * (p - this.b) *(p - this.c))

}

const myArea = triangle.area()

console.log(myArea())

我们声明了一个接口 Triangle，其中的函数类型显式的传入了 this 参数，这个参数的类型为 Triangle 类型（第 5 行）：

area(this: Triangle): () => number;

此时，在第 14 行，this 指向 Triangle，就可以进行正确的类型判断，如果取未定义参数，编译器将直接报错。

6.4、函数重载

函数重载是指函数根据传入不同的参数，返回不同类型的数据。

它的意义在于让你清晰的知道传入不同的参数得到不同的结果，如果传入的参数不同，但是得到相同类型的数据，那就不需要使用函数重载。

比如面试中常考的字符反转问题，这里就不考虑负数情况了，只是为了演示函数重载：

function reverse(target: string | number) {

if (typeof target === 'string') {

return target.split('').reverse().join('')

}

if (typeof target === 'number') {

return +[...target.toString()].reverse().join('')

}

console.log(reverse('hello')) // olleh

console.log(reverse(23874800)) // 847832

编译器并不知道入参是什么类型的，返回值类型也不能确定。这时可以为同一个函数提供多个函数类型定义来进行函数重载。

(通过 --downlevelIteration 编译选项增加对生成器和迭代器协议的支持)

function reverse(x: string): string

function reverse(x: number): number

function reverse(target: string | number) {

if (typeof target === 'string') {

return target.split('').reverse().join('')

}

if (typeof target === 'number') {

return +[...target.toString()].reverse().join('')

}

console.log(reverse('hello')) // olleh

console.log(reverse(23874800)) // 847832

因为这个反转函数在传入字符串类型的时候返回字符串类型，传入数字类型的时候返回数字类型，所以在前两行进行了两次函数类型定义。在函数执行时，根据传入的参数类型不同，进行不同的计算。

为了让编译器能够选择正确的检查类型，它会从重载列表的第一个开始匹配。因此，在定义重载时，一定要把最精确的定义放在最前面。

6.5、使用函数时的注意事项

如果一个函数没有使用 return 语句，则它默认返回 undefined。
调用函数时，传递给函数的值被称为函数的 实参（值传递），对应位置的函数参数被称为 形参。
在函数执行时， this 关键字并不会指向正在运行的函数本身，而是 指向调用函数的对象。
arguments 对象是所有（非箭头）函数中都可用的 局部变量。你可以使用 arguments 对象在函数中引用函数的参数。

7、泛型（Generic）

7.1、泛型的概念

泛型在传统的面向对象语言中极为常见，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。

通俗来讲：泛型是指在定义函数、接口或者类时，未指定其参数类型，只有在运行时传入才能确定。那么此时的参数类型就是一个变量，通常用大写字母 T 来表示，当然你也可以使用其他字符，如：U、K等。

语法：在函数名、接口名或者类名添加后缀 <T>：

function generic() {}

interface Generic {}

class Generic {}

之所以使用泛型，是因为它帮助我们为不同类型的输入，复用相同的代码。

比如写一个最简单的函数，这个函数会返回任何传入它的值。如果传入的是 number 类型：

function identity(arg: number): number {

return arg

}

如果传入的是 string 类型：

function identity(arg: string): string {

return arg

}

通过泛型，可以把两个函数统一起来：

function identity(arg: T): T {

return arg

}

需要注意的是，泛型函数的返回值类型是根据你的业务需求决定，并非一定要返回泛型类型 T：

function identity(arg: T): string {

return String(arg)

}

入参的类型是未知的，但是通过 String 转换，返回字符串类型。

7.2、多个类型参数

泛型函数可以定义多个类型参数：

function extend<T, U>(first: T, second: U): T & U {

for(const key in second) {

(first as T & U)[key] = second[key] as any

}

return first as T & U

}

这个函数用来合并两个对象，具体实现暂且不去管它，这里只需要关注泛型多个类型参数的使用方式，其语法为通过逗号分隔 <T, U, K>。

7.3、泛型参数默认类型

函数参数可以定义默认值，泛型参数同样可以定义默认类型：

function min<T = number>(arr:T[]): T{

let min = arr[0]

arr.forEach((value)=>{

if(value < min) {

min = value

}

})

return min

}

console.log(min([20, 6, 8n])) // 6

同样的不用去关注这个最小数函数的具体实现，要知道默认参数语法为 <T = 默认类型>。

7.4、泛型类型与泛型接口

先看一下函数类型：

const add: (x: number, y: number) => string = function(x: number, y: number): string {

return (x + y).toString()

}

等号左侧的 (x: number, y: number) => string 为函数类型。

再看下泛型类型：

function identity(arg: T): T {

return arg

}

let myIdentity: (arg: T) => T = identity

同样的等号左侧的 <T>(arg: T) => T 即为泛型类型，它还有另一种_带有调用签名的对象字面量_书写方式：{ <T>(arg: T): T }:

function identity(arg: T): T {

return arg

}

let myIdentity: { (arg: T): T } = identity

这就引导我们去写第一个泛型接口了。把上面例子里的对象字面量拿出来作为一个接口：

interface GenericIdentityFn {

(arg: T): T

}

function identity(arg: T): T {

return arg

}

let myIdentity: GenericIdentityFn = identity

进一步，把泛型参数当作整个接口的一个参数，我们可以把泛型参数提前到接口名上。这样我们就能清楚的知道使用的具体是哪个泛型类型：

interface GenericIdentityFn {

(arg: T): T

}

function identity(arg: T): T {

return arg

}

let myIdentity: GenericIdentityFn = identity

注意，在使用泛型接口时，需要传入一个类型参数来指定泛型类型。示例中传入了 number 类型，这就锁定了之后代码里使用的类型。

7.5、泛类型

使用泛型是因为可以复用不同类型的代码。下面用一个最小堆算法举例说明泛型类的使用：

class MinClass {

public list: number[] = []

add(num: number) {

this.list.push(num)

}

min(): number {

let minNum = this.list[0]

for (let i = 0; i < this.list.length; i++) {

if (minNum > this.list[i]) {

minNum = this.list[i]

}

return minNum

}

示例中我们实现了一个查找 number 类型的最小堆类，但我们的最小堆还需要支持字符串类型，此时就需要泛型的帮助了：

// 类名后加上

class MinClass {

public list: T[] = []

add(num: T) {

this.list.push(num)

}

min(): T {

let minNum = this.list[0]

for (let i = 0; i < this.list.length; i++) {

if (minNum > this.list[i]) {

minNum = this.list[i]

}

return minNum

}

let m = new MinClass()

m.add('hello')

m.add('world')

m.add('generic')

console.log(m.min()) // generic

第 2 行，在声明 类 MinClass 的后面后加上了 <T>，这样就声明了泛型参数 T，作为一个变量可以是字符串类型，也可以是数字类型。

7.6、泛型约束

语法：通过 extends 关键字来实现泛型约束。

如果我们很明确传入的泛型参数是什么类型，或者明确想要操作的某类型的值具有什么属性，那么就需要对泛型进行约束。通过两个例子来说明：

interface User {

username: string

}

function info(user: T): string {

return 'hello ' + user.username

}

示例中，第 5 行，我们约束了入参 user 必须包含 username 属性，否则在编译阶段就会报错。

下面再看另外一个例子：

type Args = number | string

class MinClass {}

const m = new MinClass() // Error, 必须是 number | string 类型

在上面代码中，第 3 行，约束了泛型参数 T 继承自类型 Args，而类型 Args 是一个由 number 和 string 组成的联合类型。

第 5 行，泛型参数只能是 number 和 string 中的一种，传入 boolean 类型是错误的。

7.7、多重类型泛型约束

通过 <T extends Interface1 & Interface2> 这种语法来实现多重类型的泛型约束：

interface Sentence {

title: string,

content: string

}

interface Music {

url: string

}

class Classic<T extends Sentence & Music> {

private prop: T

constructor(arg: T) {

this.prop = arg

}

info() {

return {

url: this.prop.url,

title: this.prop.title,

content: this.prop.content

}

在代码中，第 10 行，约束了泛型参数 T 需继承自交叉类型（后续有单节介绍） Sentence & Music，这样就能访问两个接口类型的参数。

8、TypeScript 类型进阶

8.1、字面量类型

在计算机科学中，字面量（literal）是用于表达源代码中一个固定值的表示法（notation）。通俗的讲，字面量也可以叫直接量，就是你看见什么，它就是什么。

字符串类型，其实是一个集合类型，所有的字符串集合在一起构成了 string 类型。而字符串字面量类型就直接多了，你定义为 'hello'，那这个变量的类型就是 'hello' 类型。

字符串字面量类型

字符串字面量类型允许你指定字符串必须的固定值。

let protagonist: 'Sherlock'

protagonist = 'Sherlock'

protagonist = 'Watson' // Error, Type '"Watson"' is not assignable to type '"Sherlock"'

变量 protagonist 被声明为 'Sherlock' 字面量类型，就只能赋值为 'Sherlock'。

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'

class UIElement {

animate(dx: number, dy: number, easing: Easing) {

if (easing === 'ease-in') {}

else if (easing === 'ease-out') {}

else if (easing === 'ease-in-out') {}

else {

// Error, 不应该传递 null 或 undefined

}

let button = new UIElement()

button.animate(0, 0, 'ease-in')

button.animate(0, 0, 'uneasy') // Error, 'uneasy' 不被允许

在上面代码中，第 1 行，通过类型别名，声明了类型 Easing 为 'ease-in' | 'ease-out' | 'ease-in-out'

这样三个字符串字面量构成的联合类型。

第 4 行，你只能从三种允许的字符中选择其一来做为参数传递，传入其它值则会产生错误。

字符串字面量类型还可以用于区分函数重载：

function createElement(tagName: 'img'): HTMLImageElement

function createElement(tagName: 'input'): HTMLInputElement

function createElement(tagName: string): Element {}

如果参数 tagName 为 'img' 类型，返回值类型为 HTMLImageElement; 如果参数 tagName 为 'input' 类型，返回值类型为 HTMLInputElement。

布尔字面量类型

声明布尔字面量类型，注意这里是 : 不是 =。 = 等号是变量赋值，: 表示声明的类型。

let success: true

let fail: false

let value: true | false

接口的返回值，会有正确返回和异常两种情况，这两种情况要有不同的数据返回格式：

type Result = { success: true, code: number, object: object } | { success: false, code: number, errMsg: string }

let res: Result = { success: false, code: 90001, errMsg: '该二维码已使用' }

if (!res.success) {

res.errMsg // OK

res.object // Error, Property 'object' does not exist on type '{ success: false; code: number; errMsg: string; }

}

类型别名 Result 是一个由两个对象组成的联合类型，都有一个共同的 success 属性，这个属性的类型就是布尔字面量类型。

数字字面量类型

TypeScript 还具有数字字面量类型。

比如骰子只有六种点数：

let die: 1 | 2 | 3 | 4 | 5 | 6

die = 9 // Error

8.2、类型推断

类型推断的含义是不需要指定变量类型或函数的返回值类型，TypeScript 可以根据一些简单的规则推断其的类型。

基础类型推断

基础的类型推断发生在 初始化变量，设置默认参数和决定返回值时。

初始化变量例子：

let x = 3 // let x: number

let y = 'hello world' // let y: string

let z // let z: any

变量 x 的类型被推断为数字，变量 y 的类型被推断为字符串。如果定义时没有赋值，将被推断为 any 类型。

设置默认参数和决定返回值时的例子：

// 返回值推断为 number

function add(a:number, b:10) {

return a + b

}

const obj = {

a: 10,

b: 'hello world'

}

obj.b = 15 // Error，Type '15' is not assignable to type 'string'

在上面代码中，第 1 行，参数 b 有默认值 10，被推断为 number 类型。

第 2 行，两个 number 类型相加，函数 add() 返回值被推断为 number 类型。

最后一行，obj 的类型被推断为 {a: number, b: string}，所以属性 b 不能被赋值为数字。

const obj = {

protagonist: 'Sherlock',

gender: 'male'

}

let { protagonist } = obj

最佳通用类型推断

当需要从多个元素类型推断出一个类型时，TypeScript 会尽可能推断出一个兼容所有类型的通用类型。

比如声明一个数组：

let x = [1, 'hello', null]

为了推断 x 的类型，必须考虑所有的元素类型。这里有三种元素类型 number、string 和 null，此时数组被推断为 let x: (string | number | null)[] 联合类型。

是否兼容 null 类型可以通过 tsconfig.json 文件中属性 strictNullChecks 的值设置为 true 或 false 来决定。

上下文类型推断

前面两种都是根据从右向左流动进行类型推断，上下文类型推断则是从左向右的类型推断。

例如定义一个 Animal 的类作为接口使用：

class Animal {

public species: string | undefined

public weight: number | undefined

}

const simba: Animal = {

species: 'lion',

speak: true // Error, 'speak' does not exist in type 'Animal'

}

在上面代码中，第 6 行，将 Animal 类型显示的赋值给 变量 simba，Animal 类型 没有 speak 属性，所以不可赋值。

8.3、类型断言

TypeScript 允许你覆盖它的推断，毕竟作为开发者你比编译器更了解你写的代码。

类型断言主要用于当 TypeScript 推断出来类型并不满足你的需求，你需要手动指定一个类型。

关键字 as

当你把 JavaScript 代码迁移到 TypeScript 时，一个常见的问题：

const user = {}

user.nickname = 'Evan' // Error, Property 'nickname' does not exist on type '{}'

user.admin = true // Error, Property 'admin' does not exist on type '{}'

编译器推断 const user: {}，这是一个没有属性的对象，所以你不能对其添加属性。

此时可以使用类型断言（as关键字）覆盖其类型推断：

interface User {

nickname: string,

admin: boolean,

groups: number[]

}

const user = {} as User

user.nickname = 'Evan'

user.admin = true

user.groups = [2, 6]

在上面代码中，第 7 行，这里通过 as 关键字进行类型断言，将变量 user 的类型覆盖为 User 类型。但是请注意，类型断言不要滥用，除非你完全明白你在干什么。

首尾标签

类型断言还可以通过标签 <> 来实现：

interface User {

nickname: string,

admin: boolean,

groups: number[]

}

const user = {} // User类型

user.nickname = 'Evan'

user.admin = true

user.groups = [2, 6]

在上面代码中，第 7 行，使用 <User>{} 这种标签形式，将变量 user 强制断言为 User 类型。

但是，当你在使用 JSX 语法时，会跟标签 <> 形式的类型断言混淆：

let nickname = Evan // 这里的 User 指向一个 component

所以，建议统一使用 as type 这种语法来为类型断言。

非空断言

如果编译器不能够去除 null 或 undefined，可以使用非空断言 ! 手动去除。

function fixed(name: string | null): string {

function postfix(epithet: string) {

return name!.charAt(0) + '. the ' + epithet; // name 被断言为非空

}

name = name || "Bob"

return postfix("great")

}

在上面代码中，第 2 行，postfix() 是一个嵌套函数，因为编译器无法去除嵌套函数的 null (除非是立即调用的函数表达式)，所以 TypeScript 推断第 3 行的 name 可能为空。

第 5 行，而 name = name || "Bob" 这行代码已经明确了 name 不为空，所以可以直接给 name 断言为非空（第 3 行）。

双重断言

双重断言极少有应用场景，只需要知道有这种操作即可：

interface User {

nickname: string,

admin: boolean,

group: number[]

}

const user = 'Evan' as any as User

在上面代码中，最后一行，使用 as 关键字进行了两次断言，最终变量 user 被强制转化为 User 类型。

8.4、类型保护

类型保护是指缩小类型的范围，在一定的块级作用域内由编译器推导其类型，提示并规避不合法的操作。

typeof

通过 typeof 运算符判断变量类型，下面看一个之前介绍函数重载时的例子：

function reverse(target: string | number) {

if (typeof target === 'string') {

target.toFixed(2) // Error，在这个代码块中，target 是 string 类型，没有 toFixed 方法

return target.split('').reverse().join('')

}

if (typeof target === 'number') {

target.toFixed(2) // OK

return +[...target.toString()].reverse().join('')

}

target.forEach(element => {}) // Error，在这个代码块中，target 是 string 或 number 类型，没有 forEach 方法

}

在上面代码中，第 2 行，通过 typeof 关键字，将这个代码块中变量 target 的类型限定为 string 类型。

第 6 行，通过 typeof 关键字，将这个代码块中变量 target 的类型限定为 number 类型。

第 11 行，因没有限定，在这个代码块中，变量 target 是 string 或 number 类型，没有 forEach 方法，所以报错。

instanceof

instanceof 与 typeof 类似，区别在于 typeof 判断基础类型，instanceof 判断是否为某个对象的实例：

class User {

public nickname: string | undefined

public group: number | undefined

}

class Log {

public count: number = 10

public keyword: string | undefined

}

function typeGuard(arg: User | Log) {

if (arg instanceof User) {

arg.count = 15 // Error, User 类型无此属性

}

if (arg instanceof Log) {

arg.count = 15 // OK

}

在上面代码中，第 12 行，通过 instanceof 关键字，将这个代码块中变量 arg 的类型限定为 User 类型。

第 16 行，通过 instanceof 关键字，将这个代码块中变量 arg 的类型限定为 Log 类型。

in

in 操作符用于确定属性是否存在于某个对象上，这也是一种缩小范围的类型保护。

class User {

public nickname: string | undefined

public groups!: number[]

}

class Log {

public count: number = 10

public keyword: string | undefined

}

function typeGuard(arg: User | Log) {

if ('nickname' in arg) {

// (parameter) arg: User，编辑器将推断在当前块作用域 arg 为 User 类型

arg.nickname = 'hello'

}

if ('count' in arg) {

// (parameter) arg: Log，编辑器将推断在当前块作用域 arg 为 Log 类型

arg.count = 15

}

上面代码中，第 12 行，通过 in 关键字，将这个代码块中变量 arg 的类型限定为 User 类型。

第 17 行，通过 in 关键字，将这个代码块中变量 arg 的类型限定为 Log 类型。

字面量类型保护

用字面量类型那一节的例子改造一下来介绍字面量类型保护：

type Success = {

success: true,

code: number,

object: object

}

type Fail = {

success: false,

code: number,

errMsg: string,

request: string

}

function test(arg: Success | Fail) {

if (arg.success === true) {

console.log(arg.object) // OK

console.log(arg.errMsg) // Error, Property 'errMsg' does not exist on type 'Success'

} else {

console.log(arg.errMsg) // OK

console.log(arg.object) // Error, Property 'object' does not exist on type 'Fail'

}

上面代码中，第 15 行，通过布尔字面量，将这个代码块中变量 arg 的类型限定为 Success 类型。

第 18 行，通过布尔字面量，将这个代码块中变量 arg 的类型限定为 Fail 类型。

8.5、类型兼容性

类型兼容性用于确定一个类型是否能赋值给其他类型。

TypeScript 的类型检查机制都是为了让开发者在编译阶段就可以直观的发现代码书写问题，养成良好的代码规范从而避免很多低级错误。

let address: string = 'Baker Street 221B'

let year: number = 2010

address = year // Error

在上面代码中，第 3 行，类型 ‘number’ 不能赋值给类型 ‘string’。

结构化

TypeScript 类型兼容性是基于结构类型的；结构类型只使用其成员来描述类型。

TypeScript 结构化类型系统的基本规则是，如果 x 要兼容 y，那么 y 至少具有与 x 相同的属性。比如：

interface User {

year: number

}

let protagonist = {

year: 1854,

address: 'Baker Street 221B'

}

let user: User = protagonist // OK

接口 User 中的每一个属性在 protagonist 对象中都能找到对应的属性，且类型匹配。另外，可以看到 protagonist 具有一个额外的属性 address，但是赋值同样会成功。

比较两个函数

相对来讲，在比较原始类型和对象类型的时候是比较容易理解的，难的是如何判断两个函数是否兼容。判断两个函数是否兼容，首先要看参数是否兼容，第二个还要看返回值是否兼容。

函数参数

代码示例：

let fn1 = (a: number, b: string) => {}

let fn2 = (c: number, d: string, e: boolean) => {}

fn2 = fn1 // OK

fn1 = fn2 // Error

上面代码中，第 4 行，将 fn1 赋值给 fn2 成立是因为：

fn1 的每个参数均能在 fn2 中找到对应类型的参数
参数顺序保持一致，参数类型对应
参数名称不需要相同

第 5 行，将 fn2 赋值给 fn1 不成立，是因为 fn2 中的必须参数必须在 fn1 中找到对应的参数，显然第三个布尔类型的参数在 fn1 中未找到。

参数类型对应即可，不需要完全相同：

let fn1 = (a: number | string, b: string) => {}

let fn2 = (c: number, d: string, e: boolean) => {}

fn2 = fn1 // OK

fn1 的第一个参数是 number 和 string 的联合类型，可以对应 fn2 的第一个参数类型 number，所以第 4 行赋值正常。

函数返回值

创建两个仅是返回值类型不同的函数：

let x = () => ({name: 'Alice'})

let y = () => ({name: 'Alice', location: 'Seattle'})

x = y // OK

y = x // Error

在上面代码中，最后一行，函数 x() 缺少 location 属性，所以报错。

类型系统强制源函数的返回值类型必须是目标函数返回值类型的子类型。由此可以得出如果目标函数的返回值类型是 void，那么源函数返回值可以是任意类型：

let x : () => void

let y = () => 'hello'

x = y // OK

枚举的类型兼容性

枚举与数字类型相互兼容：

enum Status {

Pending,

Resolved,

Rejected

}

let current = Status.Pending

let num = 0

current = num

num = current

不同枚举类型之间是不兼容的：

enum Status { Pending, Resolved, Rejected }

enum Color { Red, Blue, Green }

let current = Status.Pending

current = Color.Red // Error

类的类型兼容性

类与对象字面量和接口的兼容性非常类似，但是类分实例部分和静态部分。

比较两个类类型数据时，只有实例成员会被比较，静态成员和构造函数不会比较。

class Animal {

feet!: number

constructor(name: string, numFeet: number) { }

}

class Size {

feet!: number

constructor(numFeet: number) { }

}

let a: Animal

let s: Size

a = s! // OK

s = a // OK

类 Animal 和类 Size 有相同的实例成员 feat 属性，且类型相同，构造函数参数虽然不同，但构造函数不参与两个类类型比较，所以最后两行可以相互赋值。

类的私有成员和受保护成员会影响兼容性。允许子类赋值给父类，但是不能赋值给其它有同样类型的类。

class Animal {

protected feet!: number

constructor(name: string, numFeet: number) { }

}

class Dog extends Animal {}

let a: Animal

let d: Dog

a = d! // OK

d = a // OK

class Size {

feet!: number

constructor(numFeet: number) { }

}

let s: Size

a = s! // Error

在上面代码中，第 13 行，子类可以赋值给父类。

第 14 行，父类之所以能够给赋值给子类，是因为子类中没有成员。

最后一行，因为类 Animal 中的成员 feet 是受保护的，所以不能赋值成功。

泛型的类型兼容性

泛型的类型兼容性根据其是否被成员使用而不同。先看一段代码示例：

interface Empty {}

let x: Empty

let y: Empty

x = y! // OK

上面代码里，x 和 y 是兼容的，因为它们的结构使用类型参数时并没有什么不同。但是当泛型被成员使用时：

interface NotEmpty {

data: T

}

let x: NotEmpty

let y: NotEmpty

x = y! // Error

在上面代码中，因为第 4 行，泛型参数是 number 类型，第 5 行，泛型参数是 string 类型，所以最后一行赋值失败。

如果没有指定泛型类型的泛型参数，会把所有泛型参数当成 any 类型比较。

let identity = function(x: T): void {

// ...

}

let reverse = function(y: U): void {

// ...

}

identity = reverse // OK

8.6、交叉类型

交叉类型是将多个类型合并为一个类型。

这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

语法为：类型一 & 类型二。

示例代码：

interface Admin {

id: number,

administrator: string,

timestamp: string

}

interface User {

id: number,

groups: number[],

createLog: (id: number) => void,

timestamp: number

}

let t: Admin & User

t!.administrator // 合法 Admin.administrator: string

t!.groups // 合法 User.groups: number[]

t!.id // 合法 id: number

t!.timestamp // 合法 timestamp: never

交叉类型 Admin & User 包含了原类型的所有属性，但是要注意两个接口都拥有 id 和 timestamp 属性，且 id 类型相同，timestamp 类型不同。在此交叉类型中，timestamp 属性类型冲突，不可被赋值。

应用场景

我们大多是在混入（Mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。下面是合并两传入对象的成员属性的例子：

function extend<T, U>(first: T, second: U): T & U {

for(const key in second) {

(first as T & U)[key] = second[key] as any

}

return first as T & U

}

函数返回结果的类型是两个对象的交叉类型。调用 extend 函数，实现两个对象的合并：

class Person {

constructor(public name: string) { }

}

class ConsoleLogger {

log() {}

}

let jim = extend(new Person('Jim'), new ConsoleLogger())

let n = jim.name

jim.log()

通过 extend() 函数合并了两个类的实例，我们知道交叉类型是 and 的意思，那么合并后即可访问 Person 类实例的 name 属性，也可以调用 ConsoleLogger 类实例的 log() 方法。

8.7、联合类型

联合类型与交叉类型很有关联，但是使用上却完全不同。区别在于：联合类型表示取值为多种中的一种类型，而交叉类型每次都是多个类型的合并类型。

语法为：类型一 | 类型二。

联合类型之间使用竖线 “|” 分隔：

let currentMonth: string | number

currentMonth = 'February'

currentMonth = 2

在上面代码中，第 1 行，表示 currentMonth 的值可以是 string 类型或者 number 类型中的一种。

联合类型的构成元素除了类型，还可以是字面量：

type Scanned = true | false

type Result = { status: 200, data: object } | { status: 500, request: string}

在上面代码中，第 1 行，表示类型别名 Scanned 可以是 true 或者 false 两种布尔字面量中的一种。

第 2 行，表示类型别名 Result 可以是 { status: 200, data: object } 或者 { status: 500, request: string} 两个对象字面量中的一种。

访问联合类型成员

如果一个值是联合类型，那么只能访问联合类型的共有属性或方法。

interface Dog {

eat: () => void,

destroy: () => void

}

interface Cat {

eat: () => void,

climb: () => void

}

let pet: Dog | Cat

pet!.name // OK

pet!.eat() // OK

pet!.climb() // Error

在上面代码中，第 13 行，声明变量 pet 为 Dog | Cat 联合类型，那么变量 pet 可以访问接口 Dog 和接口 Cat 共有的 name 属性和 eat() 方法。访问接口 Cat 独有的 climb() 方法是错误的。

可辨识联合

求不同图形面积的综合性实例：

interface Rectangle {

type: 'rectangle',

width: number,

height: number

}

interface Circle {

type: 'circle',

radius: number

}

interface Parallelogram {

type: 'parallelogram',

bottom: number,

height: number

}

function area(shape: Rectangle | Circle | Parallelogram) {

switch (shape.type) {

case 'rectangle':

return shape.width * shape.height

case 'circle':

return Math.PI * Math.pow(shape.radius, 2)

case 'parallelogram':

return shape.bottom * shape.height

}

let shape: Circle = {

type: 'circle',

radius: 10

}

console.log(area(shape))

在上面代码中，第 18 行，函数 area() 的参数是一个 Rectangle | Circle | Parallelogram 联合类型。

其中，每个接口都有一个 type 属性，根据其不同的字符串字面量类型引导到不同的 case 分支，这种情况我们称之为可辨识联合（Discriminated Union）。

8.8、类型别名

类型别名会给类型起个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。

用关键字 type 定义类型别名。

类型别名不会新建一个类型，而是创建一个新名字来引用此类型。

先看下面几个例子，

原始类型：

type brand = string

type used = true | false

const str: brand = 'hello'

const state: used = true

联合类型：

type month = string | number

const currentMonth: month = 'February'

const nextMonth: month = 3

交叉类型：

interface Admin {

id: number,

administrator: string,

timestamp: string

}

interface User {

id: number,

groups: number[],

createLog: (id: number) => void,

timestamp: number

}

type T = Admin & User

同接口一样，类型别名也可以是泛型：

type Tree<T, U> = {

left: T,

right: U

}

接口 vs 类型别名

类型别名看起来和接口非常类似，区别之处在于：

接口可以实现 extends 和 implements，类型别名不行。
类型别名并不会创建新类型，是对原有类型的引用，而接口会定义一个新类型。
接口只能用于定义对象类型，而类型别名的声明方式除了对象之外还可以定义交叉、联合、原始类型等。

类型别名是最初 TypeScript 做类型约束的主要形式，后来引入接口之后，TypeScript 推荐我们尽可能的使用接口来规范我们的代码。

8.9、索引类型

下面是一个常见的JavaScript 函数，实现从一个对象中选取指定属性，得到它们的属性值：

function pluck(o, names) {

return names.map(n => o[n])

}

实现这样一个函数的类型定义要满足：

数组参数 names 中的元素，只能是对象 o 身上有的属性。
返回类型取决于参数 o 身上属性值的类型。

我们可以通过索引类型实现这样的类型定义。

索引类型可以让 TypeScript 编译器覆盖检测到使用了动态属性名的代码。

要理解抽象的索引类型，需要先理解索引类型查询操作符（keyof）和索引访问操作符（T[K]）。

索引类型查询操作符 - keyof

keyof 可以获取对象的可访问索引字符串字面量类型。

interface User {

id: number,

phone: string,

nickname: string,

readonly department: string,

}

class Token{

private secret: string | undefined

public accessExp: number = 60 * 60

public refreshExp: number = 60 * 60 * 24 * 30 * 3

}

let user: keyof User // let user: "id" | "phone" | "nickname" | "department"

type token = keyof Token // type token = "accessExp" | "refreshExp"

在上面代码中，倒数第二行，通过 let user: keyof User 得到了等价的 let user: "id" | "phone" | "nickname" | "department"。

最后一行，通过 type token = keyof Token 得到了等价的 type token = "accessExp" | "refreshExp"，注意这里没有 secret。

可以看到对于任何类型 T， keyof T 的结果为 T 上已知的公共属性名的联合。

索引访问操作符 - T[K]

通过 keyof 拿到了属性名，接下来还要拿到属性名对应属性值的类型。

还是以上面的 Token 类为例：

class Token{

public secret: string = 'ixeFoe3x.2doa'

public accessExp: number = 60 * 60

public refreshExp: number = 60 * 60 * 24 * 30 * 3

}

type token = keyof Token

type valueType = Token[token] // type valueType = string | number

type secret = Token['secret'] // type secret = string

通过 Token['secret'] 拿到了属性 secret 的类型为 string。

那么这时，我们知道了一个对象的类型为泛型 T，这个对象的属性类型 K 只需要满足 K extends keyof T，即可得到这个属性值的类型为 T[K]。

理解了上面这段话，即可定义下面这个函数：

function getProperty<T, K extends keyof T>(o: T, name: K): T[K] {

return o[name]; // o[name] is of type T[K]

}

已知参数 o 的类型为 T，参数 name 的类型 K 满足 K extends keyof T，那么返回值的类型即为 T[K]。

函数 pluck() 的类型定义

掌握了 keyof 和 T[K]，下面来完整的书写前言中的函数 pluck() ：

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {

return names.map(n => o[n])

}

interface Person {

position: string

age: number

}

let person: Person = {

position: 'Software Engineer',

age: 27

}

let values: unknown[] = pluck(person, ['name', 'age'])

console.log(values)

参数 names: K[] 这种写法表示数组类型。

8.10、映射类型

映射类型可以将已知类型的每个属性都变为可选的或者只读的。

Readonly 与 Partial 关键字

先来看这样一个任务：将 Person 接口的每个属性都变为可选属性或者只读属性。

interface Person{

age: number

}

type PersonOptional = Partial

type PersonReadonly = Readonly

在上面代码中，第 6 行，通过 Partial<Person> 这样的语法格式得到类型别名 PersonOptional，等价于：

type PersonOptional = {

name?: string

age?: number

}

第 7 行，通过 Readonly<Person> 这样的语法格式得到类型别名 PersonReadonly，等价于：

type PersonReadonly = {

readonly name: string

readonly age: number

}

两个关键字的源码分析

来看它们的实现源码：

type Readonly = {

readonly [K in keyof T]: T[K]

}

type Partial = {

[K in keyof T]?: T[K]

}

源码就使用了映射类型的语法 [K in Keys]，来看这个语法的两个部分：

类型变量 K：它会依次绑定到每个属性，对应每个属性名的类型。
字符串字面量构成的联合类型的 Keys：它包含了要迭代的属性名的集合。

我们可以使用 for...in 来理解，它可以遍历目标对象的属性。

接下来继续分析：

Keys，可以通过 keyof 关键字取得，假设传入的类型是泛型 T，得到 keyof T，即为字符串字面量构成的联合类型（"name" | "age"）。
[K in keyof T]，将属性名一一映射出来。
T[K]，得到属性值的类型。

已知了这些信息，我们就得到了将一个对象所有属性变为可选属性的方法：

[K in keyof T]?: T[K]

进而可得：

type Partial = {

[K in keyof T]?: T[K]

}

Readonly<T> 和 Partial<T> 都有着广泛的用途，因此它们与 Pick 一同被包含进了 TypeScript 的标准库里：

type Pick<T, K extends keyof T> = {

}

interface User {

id: number

age: number

}

type PickUser = Pick<User, 'id'>

在上面代码中，最后一行，就相当于 type PickUser = { id: number }。

8.11、条件类型

条件类型用来表达非均匀类型映射，可以根据一个条件表达式来进行类型检测，从两个类型中选出其中一个：

T extends U ? X : Y

语义类似三目运算符：若 T 是 U 的子类型，则类型为 X，否则类型为 Y。若无法确定 T 是否为 U 的子类型，则类型为 X | Y。

代码示例：

declare function f(x: T): T extends true ? string : number

const x = f(Math.random() < 0.5) // const x: string | number

const y = f(true) // const y: string

const z = f(false) // const z: number

在上面代码中，第 3 行，可以看到在条件不确定的情况下，得到了联合类型 string | number。

最后两行，条件确定时，得到了具体类型 string 或 number。

可分配条件类型

在条件类型 T extends U ? X : Y 中，当泛型参数 T 取值为 A | B | C 时，这个条件类型就等价于 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)，这就是可分配条件类型。

可分配条件类型（distributive conditional type）中被检查的类型必须是裸类型参数（naked type parameter）。裸类型表示没有被包裹（Wrapped）的类型，（如：Array<T>、[T]、Promise<T> 等都不是裸类型），简而言之裸类型就是未经过任何其他类型修饰或包装的类型。

应用场景

有了这些前置知识，我们就可以分析一下 TypeScript 内置的一些工具类型，就像在映射类型中介绍的可以通过 Partial<T>，可以在项目中直接使用。

Exclude<T, U> – 从 T 中剔除可以赋值给 U 的类型。
Extract<T, U> – 提取 T 中可以赋值给 U 的类型。
NonNullable<T> – 从 T 中剔除 null 和 undefined。
ReturnType<T> – 获取函数返回值类型。
InstanceType<T> – 获取构造函数类型的实例类型。

用第一个来举例分析：

type T00 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'> // 'b' | 'd'

来看一下 Exclude<T, U> 的实现源码：

/**

Exclude from T those types that are assignable to U

type Exclude<T, U> = T extends U ? never : T;

再看一个进阶的例子，定义一种方法，可以取出接口类型中的函数类型：

type FunctionPropertyNames = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T]

type FunctionProperties = Pick<T, FunctionPropertyNames>

interface Part {

id: number

subparts: Part[]

firstFn: (brand: string) => void,

anotherFn: (channel: string) => string

}

type FnNames = FunctionPropertyNames

type FnProperties = FunctionProperties

在上面代码中，倒数第二行，首先，遍历整个接口，然后通过条件类型判断接口的属性值的类型是否是函数类型，如果是函数类型，取其属性名。得到：

type FnNames = 'firstFn' | 'anotherFn'

倒数第一行，通过上一节介绍的工具函数 Pick，拿到这个接口的所有函数类型成员集合：

type FnProperties = {

firstFn: (brand: string) => void

anotherFn: (channel: string) => string

}

9、迭代器（Iterator）

9.1、基本概念

如果要从一个数据集中获取一个数据项，可以对这个数据集进行迭代。

JavaScript 提供了许多迭代集合的方法，从简单的 for 循环到 map() 和 filter()。本节要介绍的迭代器也是一种方案，并且迭代器将迭代的概念直接带入核心语言，同时提供了一种机制来自定义 for...of 循环的行为。

迭代器是一种特殊对象，它符合迭代器协议规范。在 TypeScript 中，我们可以定义一个接口，这个接口上有一个函数类型 next ，next() 方法的返回值类型是 { value: any, done: boolean }。其中，value 是 any 类型，表示下一个将要返回的值；done 是布尔类型，当没有更多可返回数据时返回 true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置。

迭代器一旦创建，迭代器对象就可以通过重复调用 next() 显式地迭代。

9.2、模拟一个简单的迭代器

代码示例：

interface IteratorInterface {

next: () => {

value: any

done: boolean

}

function createIterator(array: any[]): IteratorInterface {

let index = 0

let len = array.length

return {

next: function () {

return index < len ? { value: array[index++], done: false } : { value: undefined, done: true }

}

var iterator = createIterator([1, 2, 3])

console.log(iterator.next()) // { value: 1, done: false }

console.log(iterator.next()) // { value: 2, done: false }

console.log(iterator.next()) // { value: 3, done: false }

console.log(iterator.next()) // { value: undefined, done: true }

在上面代码中，第 1 行，声明了一个 Iterator 接口，具有 next 这样一个函数类型。

第 8 行，声明了一个可以返回迭代器对象的函数，这个函数的返回值类型必须符合 Iterator 接口。

倒数第 4 行，通过调用迭代器对象上的 next() 方法，可以拿到数据集中的下一个数据项。

最后一行，拿到数据集中的所有数据后，done 属性变为 true。

9.3、可迭代性

上面的例子，用模拟的迭代器地迭代了一个数组对象，那是不是所有的对象都可以这样迭代呢？当然不是。

只有一个对象实现了 Symbol.iterator 属性时，我们才认为它是可迭代的。一些内置的类型如 Array，Map，Set，String，Int32Array，Uint32Array 等都已经实现了各自的 Symbol.iterator。

Symbol.iterator 属性本身是一个函数，就是当前数据结构默认的迭代器生成函数。执行这个函数，就会返回一个迭代器。

比如，String 是一个内置的可迭代对象：

let str: string = 'Hi'

console.log(typeof str[Symbol.iterator]) // function

String 的默认迭代器会依次返回该字符串的字符：

let str: string = 'Hi'

let iterator: IterableIterator = strSymbol.iterator

console.log(iterator.next()) // { value: 'H', done: false }

console.log(iterator.next()) // { value: 'i', done: false }

console.log(iterator.next()) // { value: undefined, done: true }

在上面代码中，第 1 行，声明一个字符串类型变量，字符串类型内置了默认迭代器生成函数 Symbol.iterator。

第 2 行，执行这个函数，返回了一个迭代器。

总结：

为各种数据结构（Array，Map，Set，String等），提供一个统一的、简便的访问接口。
使得数据结构的成员能够按某种次序排列。
创造了一种新的遍历命令 for..of 循环。

9.4、`for...of`

for...of 会遍历可迭代的对象(包括 Array，Map，Set，String，TypedArray，arguments 对象等等)，调用对象上的 Symbol.iterator 方法。

迭代数组

let iterable = [10, 20, 30]

for (const value of iterable) {

console.log(value)

}

// 10

// 20

// 30

通过 for...of 循环遍历数组 iterable 的每一项元素。

const heroes = [

{

gender: 2

{

gender: 1

}

]

for (let { name } of heroes) {

console.log(name)

}

通过 let { name } of heroes 循环迭代 heroes 对象数组，将每一个对象解构，得到每一个对象的 name 属性值。

迭代字符串

let iterable = 'hello'

for (const s of iterable) {

console.log(s)

}

// i

// m

// o

// c

字符串具有可迭代性，通过 for...of 可以快速遍历出每一个字符。

迭代 Map

let iterable = new Map()

iterable.set('a', 1)

iterable.set('b', 2)

iterable.set('c', 3)

for (let entry of iterable) {

console.log(entry)

}

// ['a', 1]

// ['b', 2]

// ['c', 3]

for (let [key, value] of iterable) {

console.log(value)

}

// 1

// 2

// 3

一个 Map 对象在迭代时会根据对象中元素的插入顺序来进行。for...of 循环在每次迭代后会返回一个形式为 [key，value] 的数组。通过使用 let [key, value] 这种解构形式，可以快速获取每一项属性值。

9.5、`for...of` 与 `for...in` 的区别

for...of 语句遍历可迭代对象定义要迭代的数据。
for...in 语句以任意顺序迭代对象的可枚举属性。

let iterable: number[] = [3, 5, 7]

for (let i in iterable) {

if (iterable.hasOwnProperty(i)) {

console.log(i)

}

// 0

// 1

// 2

for (let i of iterable) {

console.log(i)

}

// 3

// 5

// 7

for...in 可以操作任何对象，迭代对象的可枚举属性。但是 for...of 只关注于可迭代对象的值。

9.6、解构赋值与扩展运算符

对数组和 Set 结构进行解构赋值时，会默认调用 Symbol.iterator 方法：

let [head, ...tail] = [1, 2, 3, 4]

// tail = [2, 3, 4]

扩展运算符也会调用默认的 Iterator 接口，得到一个数组结构:

let arr = [...'hello']

console.log(arr) // ['i','m','o','o','c']

10、生成器（Generator）

10.1、概念

通过 function* 来创建一个生成器函数，在调用一个生成器函数后，并不会立即执行函数中的代码，而是会返回一个迭代器对象，通过调用迭代器对象的 next() 方法，可以获得 yield/return 的返回值。

10.2、生成器函数的特殊性

一个正常的函数，如果没有 return 或者 throw 一个异常，一旦被调用在运行结束之前是不会停止的。如果再次调用这个函数，它会再次从第一行开始执行。

function normalFunc() {

console.log('I')

console.log('cannot')

console.log('be')

console.log('stopped.')

}

相反，生成器函数可以中途停止，然后从停止的地方继续执行的。

生成器函数会返回一个对象，可以调用这个对象上的 next() 方法。

代码示例：

function* generatorFunction() {

console.log('开始执行')

yield 'Hello, '

console.log('暂停后再次执行')

yield 'World!'

}

let iterator = generatorFunction()

此时，通过 function* 语法创建了一个生成器函数，调用这个函数并赋值给变量 iterator，我们已经知道这是个对象。

console.log(iterator.next().value)

// 开始执行

// Hello,

调用 iterator 对象上的 next() 方法，首先打印出 开始执行，然后遇到了 yield Hello,，yield 会将后面的值返回，生成器生成一个对象 { value: 'Hello, ', done: false }，函数停止运行，直到再次调用 next() 方法。

console.log(iterator.next().value)

// 暂停后再次执行

// World!

再次调用 next() 方法，函数内继续执行，打印出 暂停后再次执行，遇到 yield 'World!'，生成对象 { value: 'World!', done: false }，函数停止运行，直到再次调用 next() 方法。

console.log(iterator.next())

再次调用 next() 方法，这次函数内没有返回值，也就是默认返回 undefined，生成对象 { value: 'undefined', done: true }。

10.3、通过 `next()` 参数向生成器传值

在调用 next() 的时候可以传递一个参数，在上次 yield 前接收到这个参数：

function* gen() {

console.log('开始执行')

let res1 = yield 1

console.log('中断后继续执行')

console.log(res1)

let res2 = yield 2

console.log(res2)

console.log('执行结束')

return 3

}

let iterator = gen()

console.log(iterator.next('first'))

console.log(iterator.next('second'))

console.log(iterator.next('third'))

执行并查看结果：

开始执行

{ value: 1, done: false }

中断后继续执行

second

{ value: 2, done: false }

third

执行结束

{ value: 3, done: true }

这里注意下，生成器最初没有产生任何结果，在第一次调用 next() 时传参是无意义的。

11、装饰器（Decorator）

11.1、基本概念

装饰器是一种特殊类型的声明，它能够附加到类声明、方法、访问符、属性、类方法的参数上，以达到扩展类的行为。

自从 ES2015 引入 class，当我们需要在多个不同的类之间共享或者扩展一些方法或行为的时候，代码会变得错综复杂，极其不优雅，这也是装饰器被提出的一个很重要的原因。

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）。

若要启用实验性的装饰器特性，你必须在命令行或 tsconfig.json 里启用 experimentalDecorators 编译器选项：

命令行:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{

"compilerOptions": {

"target": "ES5",

"experimentalDecorators": true

}

11.2、装饰器的使用方法

装饰器允许你在类和方法定义的时候去注释或者修改它。装饰器是一个作用于函数的表达式，它接收三个参数 target、 name 和 descriptor ，然后可选性的返回被装饰之后的 descriptor 对象。

装饰器使用 @expression 这种语法糖形式，expression 表达式求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

装饰器工厂

装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。

通过装饰器工厂方法，可以额外传参，普通装饰器无法传参。

function log(param: string) {

return function (target: any, name: string, descriptor: PropertyDescriptor) {

console.log('target:', target)

console.log('name:', name)

console.log('descriptor:', descriptor)

console.log('param:', param)

}

class Employee {

@log('with param')

routine() {

console.log('Daily routine')

}

const e = new Employee()

e.routine()

在上面代码中，第 1 行，声明的 log() 函数就是一个装饰器函数，通过装饰器工厂这种写法，可以接收参数。

来看代码的打印结果：

target: Employee { routine: [Function] }

descriptor: {

value: [Function],

writable: true,

enumerable: true,

configurable: true

}

param: with param

Daily routine

可以看到，先执行装饰器函数，然后执行 routine() 函数。至于类属性装饰器函数表达式的三个参数 target、name、descriptor 之后会单独介绍。

装饰器组合

多个装饰器可以同时应用到一个声明上，就像下面的示例：

书写在同一行上：

@f @g x

书写在多行上：

在 TypeScript 里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：

由上至下依次对装饰器表达式求值
求值的结果会被当作函数，由下至上依次调用

通过下面的例子来观察它们求值的顺序：

function f() {

console.log('f(): evaluated');

return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

console.log('f(): called');

}

function g() {

console.log('g(): evaluated');

return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

console.log('g(): called');

}

class C {

@f()

@g()

method() {}

}

在控制台里会打印出如下结果：

f(): evaluated

g(): evaluated

g(): called

f(): called

11.3、类装饰器

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

通过类装饰器扩展类的属性和方法：

function extension<T extends { new(...args:any[]): {} }>(constructor: T) {

// 重载构造函数

return class extends constructor {

// 扩展属性

public coreHour = '10:00-15:00'

// 函数重载

meeting() {

console.log('重载：Daily meeting!')

}

@extension

class Employee {

public name!: string

public department!: string

constructor(name: string, department: string) {

this.name = name

this.department = department

}

meeting() {

console.log('Every Monday!')

}

let e = new Employee('Tom', 'IT')

console.log(e) // Employee { name: 'Tom', department: 'IT', coreHour: '10:00-15:00' }

e.meeting() // 重载：Daily meeting!

函数表达式的写法：

const extension = (constructor: Function) => {

constructor.prototype.coreHour = '10:00-15:00'

constructor.prototype.meeting = () => {

console.log('重载：Daily meeting!');

}

@extension

class Employee {

public name!: string

public department!: string

constructor(name: string, department: string) {

this.name = name

this.department = department

}

meeting() {

console.log('Every Monday!')

}

let e: any = new Employee('Tom', 'IT')

console.log(e.coreHour) // 10:00-15:00

e.meeting() // 重载：Daily meeting!

以上两种写法，其实本质是相同的，类装饰器函数表达式将构造函数作为唯一的参数，主要用于扩展类的属性和方法。

11.4、作用于类属性的装饰器

作用于类属性的装饰器表达式会在运行时当作函数被调用，传入下列3个参数 target、name、descriptor：

target: 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
name: 成员的名字
descriptor: 成员的属性描述符

如果你熟悉 Object.defineProperty，你会立刻发现这正是 Object.defineProperty 的三个参数。

比如通过修饰器完成一个属性只读功能，其实就是修改数据描述符中的 writable 的值：

function readonly(value: boolean) {

return function (target: any, name: string, descriptor: PropertyDescriptor) {

descriptor.writable = value

}

class Employee {

@readonly(false)

salary() {

console.log('这是个秘密')

}

const e = new Employee()

e.salary = () => { // Error，不可写

console.log('change')

}

e.salary()

因为 readonly 装饰器将数据描述符中的 writable 改为不可写，所以倒数第三行报错。

11.5、方法参数装饰器

参数装饰器表达式会在运行时当作函数被调用，以使用参数装饰器为类的原型上附加一些元数据，传入下列3个参数 target、name、index：

target: 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
name: 成员的名字
index: 参数在函数参数列表中的索引

注意第三个参数的不同。

function log(param: string) {

console.log(param)

return function (target: any, name: string, index: number) {

console.log(index)

}

class Employee {

salary(@log('IT') department: string, @log('John') name: string) {

console.log('这是个秘密')

}

可以用参数装饰器来监控一个方法的参数是否被传入。

11.6、装饰器执行顺序

function extension(params: string) {

return function (target: any) {

console.log('类装饰器')

}

function method(params: string) {

return function (target: any, name: string, descriptor: PropertyDescriptor) {

console.log('方法装饰器')

}

function attribute(params: string) {

return function (target: any, name: string) {

console.log('属性装饰器')

}

function argument(params: string) {

return function (target: any, name: string, index: number) {

console.log('参数装饰器', index)

}

@extension('类装饰器')

class Employee{

@attribute('属性装饰器')

public name!: string

@method('方法装饰器')

salary(@argument('参数装饰器') name: string, @argument('参数装饰器') department: string) {}

}

查看运行结果：

属性装饰器

参数装饰器 1

参数装饰器 0

方法装饰器

类装饰器

13、TypeScript 在 React 项目中的应用

13.1、创建支持 `TypeScript` 的 `React` 项目

执行下面的命令新建一个名字为 demo 的 React 项目：

npx create-react-app demo --template typescript

根据 typescript 官网文档的说明，还可以使用下面的命令：

npx create-react-app demo --scripts-version=react-scripts-ts

react-script-ts是一个在采用了标准的 create-react-app 项目流程的基础上，混合了 TypeScript 的功能的集合。

我想，原来是采用的第二种方式，后来就整理为了第一种方式，这里采用第一种方式。

创建的项目文件结构：

demo02-ts-template/

|─ node_modules/

|─ public/

| └─ favicon.ico

| └─ index.html

| └─ manifest.json

| └─ ...

|─ src/

| └─ ...

|─ .gitignore

|─ package.json

|─ package-lock.json

|─ README.md

└─ tsconfig.json

执行：

npm start

运行项目，默认服务将运行在 localhost:3000 。

13.2、`tsconfig.json` 配置文件详解

如果一个目录下存在一个 tsconfig.json 文件，那么它意味着这个目录是 TypeScript 项目的根目录，tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。

一个项目可以通过以下方式之一来编译：

不带任何输入文件的情况下调用 tsc 命令，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。
不带任何输入文件的情况下调用 tsc 命令，且使用命令行参数 --project（或 -p ）指定一个包含 tsconfig.json 文件的目录。

当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。

一个 tsconfig.json 文件主要有以下配置项：

{

"compilerOptions": {},

"files": [],

"include": [],

"exclude": [],

"extends": "",

"compileOnSave": false,

"typeAcquisition": {}

}

compilerOptions

compilerOptions：对象类型，用来设置编译选项，若不设置则默认使用上节介绍的默认配置。

下面是一份梳理的常用 compilerOptions 属性配置：

{

"compilerOptions": {

"target": "esnext", /* 指定编译之后的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */

"module": "esnext", /* 指定要使用的模块标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */

"noImplicitAny": false, /* 是否默认禁用 any */

"removeComments": true, /* 是否移除注释 */

"declaration": true, /* 是否自动创建类型声明文件 */

"strict": true, /* 启动所有类型检查 */

"jsx": "preserve", /* 指定jsx代码用于的开发环境 */

"importHelpers": true, /* 引入tslib里的辅助工具函数*/

"moduleResolution": "node", /* 选择模块解析策略，有'node'和'classic'两种类型 */

"experimentalDecorators": true, /* 启用实验性的装饰器特性 */

"esModuleInterop": true, /* 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性 */

"allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入 */

"sourceMap": true, /* 是否生成map文件 */

"baseUrl": ".", /* 工作根目录 */

"types": [ /* 指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件 */

"webpack-env",

"jest"

"paths": { /* 指定模块的路径，和 baseUrl有关联，和 webpack 中 resolve.alias 配置一样 */

"@/*": [

"src/*"

]

"lib": [ /* 译过程中需要引入的库文件的列表 */

"esnext",

"dom",

"dom.iterable",

"scripthost"

]

}

files，include 和 exclude

iles 是一个数组列表，写入待编译文件的相对或绝对路径，不支持 glob 匹配模式。
include 是一个数组列表，写入待编译文件的路径，支持 glob 匹配模式。
exclude 也是一个数组列表，写入排除某些文件路径，这些文件排除于待编译列表，支持 glob 匹配模式。

glob 通配符有:

* 匹配 0 或多个字符（不包括目录分隔符）
? 匹配一个任意字符（不包括目录分隔符）
**/ 递归匹配任意子目录

如果 "files" 和 "include" 都没有被指定，编译器默认包含当前目录和子目录下所有的 TypeScript 文件（.ts, .d.ts 和 .tsx），排除在"exclude" 里指定的文件。

如果开启了 allowJs 选项，那 .js 和 .jsx 文件也属于编译器包含范围。

{

"files": [

"core.ts",

"index.ts",

"types.ts"

"exclude": [

"node_modules",

"lib",

"**/*.test.ts"

"include": [

"src/**/*"

}

如果没有特殊指定，"exclude" 默认情况下会排除 node_modules，bower_components，jspm_packages 和 <outDir> 目录。

任何被 "files" 或 "include" 指定的文件所引用的文件也会被包含进来。

优先级：命令行配置 > files > exclude > include

extends

extends：字符串类型，指向另一个要继承文件的路径。例如：

{

"extends": "config/base.json"

}

这个配置项的意思就是我们可以借助 "extends" 属性引入路径为 "config/base.json" 的配置文件中的配置选项。

configs/base.json:

{

"compilerOptions": {

"noImplicitAny": true,

"strictNullChecks": true

}

需要注意：

如果有同名配置，继承文件里的配置会覆盖源文件里的配置

compileOnSave

compileOnSave 是一个布尔类型的属性，当值为 true 时，设置 compileOnSave 属性到 IDE，以便 tsconfig.ts 文件在保存时能够重新生成文件。

typeAcquisition

typeAcquisition：对象类型，用以设置自动引入库类型定义文件（.d.ts），该属性下面有3个子属性：

enable: 布尔类型，用以设置是否开启自动引入库类型定义文件
include: 数组类型，允许自动引入的库名列表，如 ["jquery", "kendo-ui"]
exclude: 数组类型，排除的库名列表

@types，typeRoots 和 types

默认情况下，node_modules/@types 文件夹下以及它们子文件夹下的所有包都会在编译过程中被包含进来。

但是如果指定了 typeRoots，则只有 typeRoots 路径下的包才会被包含进来：

{

"compilerOptions": {

"typeRoots" : ["./typings"]

}

这个配置文件会包含所有 ./typings 下面的包，而不包含 ./node_modules/@types 里面的包。

如果指定了 types，只有被列出来的包才会被包含进来。比如：

{

"compilerOptions": {

"types": ["node", "lodash", "express"]

}

如果 types 设置为空数组，则禁止自动引入 @types 包：

{

"compilerOptions": {

"types": []

}

注意，自动引入只在你使用了全局的声明（相反于模块）时是重要的。如果你使用 import "foo" 语句，TypeScript 仍然会查找 node_modules 和node_modules/@types 文件夹来获取 foo 包。

13.3、创建第一个 `Hello.tsx` 组件

在创建好的项目中，简化 src 目录下的内容，删除 src/index.tsx 之外的所有文件，将 src/index.tsx 文件的内容做精简，示例代码如下：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

,document.getElementById('root'));

创建 src/Hello.tsx 文件，示例代码如下：

import React from 'react'

interface IProps {

message: string

}

const Hello = (props:IProps) => {

return

{props.message}

}

export default Hello

把 Hello.tsx 组件引入到 index.tsx 入口文件中，示例代码如下：

import React from 'react';

import ReactDOM from 'react-dom';

import Hello from './Hello';

ReactDOM.render(

,document.getElementById('root'));

在终端执行 npm start 启动项目。

对上面代码还可以继续做优化。修改 src/Hello.tsx 组件，示例代码如下：

import React from 'react'

interface IProps {

message?: string

}

const Hello:React.FunctionComponent = (props) => {

return

{props.message}

}

Hello.defaultProps = {

message: 'hello world'

}

export default Hello

在上面代码中，声明函数组件时使用 React.FunctionComponent 接口，该接口接受一个泛型，使用代码中定义的 IProps 接口作为泛型，此时的 Hello 组件中就可以接收 props.children 的属性，用于接收组件实例中传入的子节点。同时，还可以使用 defaultProps 为 props 对象中的属性设置初始化值。

在组件中引入 React.FunctionComponent 单词有点长，可以使用简写的方式引入，修改后的代码如下：

const Hello:React.FC = (props) => {

return

{props.message}

}

在上面代码中，React.FC 就是 React.FunctionComponent 的简写。

13.4、自定义 `Button` 组件

安装 classnames 工具：

$ npm install classnames --save

$ npm install @types/classnames --save

创建 src/components/Button/button.tsx 组件，示例代码如下：

import React from 'react';

import classNames from 'classnames';

import './button.css';

// 声明按钮尺寸枚举

export enum ButtonSize {

Large = 'lg',

Small = 'sm'

}

// 声明按钮样式枚举

export enum ButtonType {

Primary = 'primary',

Default = 'default',

Danger = 'danger',

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了关注、点赞哦。

TypeScript 的学习笔记，前端开发速成

结尾

4.1、接口的概念

4.2、应用场景

4.3、接口的好处

4.4、接口的属性

4.5、函数类型

4.6、可索引类型

4.7、类类型

4.8、继承接口

4.9、混合类型

5.1、类的概念

5.2、类的本质

5.3、类的继承

5.4、访问修饰符

5.5、静态方法

5.6、抽象类

5.7、把类当做接口使用

6.1、函数的概念

6.2、函数类型

5.3、函数的参数

6.4、函数重载

6.5、使用函数时的注意事项

7.1、泛型的概念

7.2、多个类型参数

7.3、泛型参数默认类型

7.4、泛型类型与泛型接口

7.5、泛类型

7.6、泛型约束

7.7、多重类型泛型约束

8.1、字面量类型

8.2、类型推断

8.3、类型断言

8.4、类型保护

8.5、类型兼容性

8.6、交叉类型

8.7、联合类型

8.8、类型别名

8.9、索引类型

8.10、映射类型

8.11、条件类型

9.1、基本概念

9.2、模拟一个简单的迭代器

9.3、可迭代性

9.4、for...of

9.5、for...of 与 for...in 的区别

9.6、解构赋值与扩展运算符

10.1、概念

10.2、生成器函数的特殊性

10.3、通过 next() 参数向生成器传值

11.1、基本概念

11.2、装饰器的使用方法

11.3、类装饰器

11.4、作用于类属性的装饰器

11.5、方法参数装饰器

11.6、装饰器执行顺序

13.1、创建支持 TypeScript 的 React 项目

13.2、tsconfig.json 配置文件详解

13.3、创建第一个 Hello.tsx 组件

{props.message}

{props.message}

{props.message}

13.4、自定义 Button 组件

最后

9.4、`for...of`

9.5、`for...of` 与 `for...in` 的区别

10.3、通过 `next()` 参数向生成器传值

13.1、创建支持 `TypeScript` 的 `React` 项目

13.2、`tsconfig.json` 配置文件详解

13.3、创建第一个 `Hello.tsx` 组件

13.4、自定义 `Button` 组件