TypeScript 入门 | Serendipity

type

status

date

slug

summary

环境搭建

安装typescript

安装完成后可以使用tsc指令来编译ts文件

编译

手动编译

自动编译

TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译

基础

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi"	任意字符串
boolean	true、false	布尔值true或false
字面量	let color: 'red' \| 'blue' \| 'black';	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的JS对象
array	[1,2,3]: number[]	任意JS数组
元组tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};	枚举，TS中新增类型
联合类型	let str: string \| number;	取值可以为多种类型中的一种
interface	interface Person { name: string, age?: number, // 可选属性 [propName: string]: any // 任意属性 readonly id: number, // 只读属性 }	它是对行为的抽象，而具体如何行动需要由类去实现（定义的变量比接口少或多了一些属性是不允许的）
Function	(x: number, y: number) => number (x: number, y: number) : number=> {} 剩余参数: `...rest:any[]`	ㅤ

大小写类型说明

永远不要使用类型的数字，字符串，布尔值或对象。这些类型是指在JavaScript代码中几乎从不使用的非原始装箱对象。

请使用类型数字，字符串和布尔值。

类型断言

用来手动指定一个值的类型

声明文件

引用它的声明文件，才能获得对应的代码补全、接口提示等功能

declare var 声明全局变量

declare function 声明全局方法

declare class 声明全局类

declare enum 声明全局枚举类型

declare namespace 声明（含有子属性的）全局对象

interface 和 type 声明全局类型

export 导出变量

export namespace 导出（含有子属性的）对象

export default ES6 默认导出

export = commonjs 导出模块

export as namespace UMD 库声明全局变量

declare global 扩展全局变量

declare module 扩展模块

/// <reference /> 三斜线指令

声明语句

声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件

声明文件必需以 .d.ts为后缀

解析声明文件需要将声明文件引入tsconfig.json中的 files、include和 exclude配置，确保包含了 .d.ts文件

interface 和 type

除了全局变量之外，可能有一些类型我们也希望能暴露出来。在类型声明文件中，我们可以直接使用 interface或 type来声明一个全局的接口或类型

这样的话，在其他文件中也可以使用这个接口或类型了

进阶

类型别名

类型别名用来给一个类型起个新名字

使用 type创建类型别名（类型别名常用于联合类型）

类

类（Class）：定义了一件事物的抽象特点，包含它的属性和方法

对象（Object）：类的实例，通过 new 生成

面向对象（OOP）的三大特性：封装、继承、多态

封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据

继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性

多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat

存取器（getter & setter）：用以改变属性的读取和赋值行为

修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法

抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现

接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

使用

属性和方法

使用 class 定义类，使用 constructor 定义构造函数。

通过 new 生成新实例的时候，会自动调用构造函数

继承

使用 extends关键字实现继承，子类中使用 super关键字来调用父类的构造函数和方法

存取器

使用 getter和 setter可以改变属性的赋值和读取行为

静态方法

使用 static修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用

实例属性

可以直接在类里面定义

静态属性

抽象类

abstract用于定义抽象类和其中的抽象方法

抽象类是不允许被实例化的

类与接口

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements关键字来实现。这个特性大大提高了面向对象的灵活性

一个类可以实现多个接口

接口可以继承接口

接口继承类

当我们在声明 class Point时，除了会创建一个名为 Point的类之外，同时也创建了一个名为 Point的类型（实例的类型）

所以既可以将 Point当做一个类来用也可以将 Point当做一个类型来用

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

其中<T>就是泛型

泛型可以有多个：<T, U>

泛型约束

下例中，使用了 extends约束了泛型 T必须符合接口 Lengthwise的形状，也就是必须包含 length属性

泛型接口

注意，此时在使用泛型接口的时候，需要定义泛型的类型

泛型参数的默认类型

声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：

相当于：

注意，合并的属性的类型必须是唯一的（属性名可以重复，但类型必须一致）

参考链接：

TypeScript 入门教程 (xcatliu.com)

环境搭建

编译

手动编译

自动编译

基础

大小写类型说明

类型断言

声明文件

声明语句

声明文件

进阶

类型别名

类

使用

类与接口

接口继承类

泛型

泛型约束

泛型接口

泛型参数的默认类型

声明合并

JinSo

交流频道

加入我们的社群讨论分享