一篇关于TypeScript的内卷笔记

854 阅读16分钟

作者变优秀的小白

GithubGithub

爱好Americano More Ice !

一篇关于Typescript的内卷笔记

简介

TypeScriptJavaScript 的类型的超集,它可以编译成纯 JavaScript 。编译出来的 JavaScript 可以运行在任何浏览器上。 TypeScript 编译工具可以运行在任何服务器和任何系统上。 TypeScript 是开源的。

安装

npm install -g typescript

安装完成会有一个tsc全局命令

编写第一个demo

// hello.ts
function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

执行tsc hello.ts,生成hello.js

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

对比两者区别:

  • ts 插入参数会有参数类型,ts 只会进行静态检查,如果发现有错误,编译的时候就会报错
  • letES6 的关键字,与 var 类似,用于定义一个局部变量

基础

原始数据类型

JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。

原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

布尔值

// boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数
let isDone: boolean = false;
// 返回的是一个 Boolean 对象
let createdByNewBoolean: Boolean = new Boolean(1);
// 返回一个 boolean 类型
let createdByBoolean: boolean = Boolean(1);

数值

// 其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字
let decLiteral: number = 6;
let hexLiternal: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

字符串

// `用于定义模板字符串,${expr}用于嵌入表达式
let myName: string = 'Tom';
let myAge: number = 25;
let sentence: string = `Hello, my name is ${myName}.I'll be ${myAge + 1} years old next day`;

空值

// 表示没有任何返回值
function alertName(): void {
    alert('My name is Tom');
}
// 声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null
let unusable: void = undefined;
// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

// 与 void 的区别是,undefined 和 null 是所有类型的子类型
// undefined 类型的变量,可以赋值给 number 类型的变量
let num: number = undefined;
// 或者
let u: undefined;
let num: number = u;

// 而void不行
let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.

任意值

任意值(Any)用来表示允许赋值为任意类型

声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值

// 用法
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
// 访问任何属性
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
// 调用任何方法
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

// let something: any;
let something;
something = 'seven';
something = 7;
something.setName('Tom');

类型推论

TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论

// 没有指定类型,但赋值为字符串,认为是string类型
// 编译报错
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// 定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型
// 完全不被类型检查
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种

// 联合类型使用 | 分隔每个类型
// 正确,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// 报错
let myFavoriteNumber: string | number;
myFavoriteNumber = true;

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

// length 不是 string 和 number 的共有属性,所以会报错
function getLength(something: string | number): number {
    return something.length;
}
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

访问 string 和 number 的共有属性是没问题的

function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
// 推断为string
console.log(myFavoriteNumber.length); // 5
// 推断为number
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

对象类型-接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

  • 什么是接口 在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

interface Person {
    name: string;
    age: number;
}
// tom,它的类型是 Person,约束了 tom 的形状必须和接口 Person 一致
// 即属性数量和类型要保持一致
let tom: Person = {
    name: 'Tom',
    age: 25
};
  • 可选属性 不要完全匹配一个形状,那么可以用可选属性:
interface Person {
    name: string;
    age?: number;
}
// 可选属性age,自由存在或不存在
let tom: Person = {
    name: 'Tom'
};
  • 任意属性 一个接口允许有任意的属性,可以使用如下方式
interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

注意:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
// 报错,age不是string
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// 任意属性中使用联合类型,解决上面问题
interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
  • 只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
// 报错,因为该属性为只读属性
tom.id = 9527;

注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
// 第一处报错,没有给 id 赋值
let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
// 第二处报错,由于它是只读属性
tom.id = 89757;

数组类型

在 TypeScript 中,数组类型有多种定义方式

如:

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型

let fibonacci: number[] = [1, '1', 2, 3, 5];
// Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制

let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');
// Argument of type '"8"' is not assignable to parameter of type 'number'.
  • 数组泛型(Array Generic)

Array<elemType> 来表示数组

let fibonacci: Array<number> = [1, 1, 2, 3, 5];
  • 接口表示数组
// NumberArray 表示:只要索引的类型是数字时,那么值的类型必须是数字
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
  • 类数组(Array-like Object)

类数组(Array-like Object)不是数组类型,比如 arguments

function sum() {
    let args: number[] = arguments;
}
// 不能用普通的数组的方式来描述,而应该用接口
// 值的类型必须是数字之外
// 约束了它还有 length 和 callee 两个属性
function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

事实上常用的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection

function sum() {
    let args: IArguments = arguments;
}
// IArguments 是 TypeScript 中定义好了的类型
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}
  • any 在数组中的应用

一个比较常见的做法是,用 any 表示数组中允许出现任意类型

let list: any[] = ['xiaobiao', 25, { website: 'http://xcatliu.com' }];

函数类型

在 JavaScript 中,有两种常见的定义函数的方式

  • 函数声明(Function Declaration)
  • 函数表达式(Function Expression)
// 函数声明(Function Declaration)
function sum(x, y) {
    return x + y;
}

// 函数表达式(Function Expression)
let mySum = function (x, y) {
    return x + y;
};
  • 函数声明

ts稍有不同,就是用上了约束

function sum(x: number, y: number): number {
    return x + y;
}
// 输入多余的(或者少于要求的)参数,是不被允许的
// 报错
sum(1, 2, 3);
sum(1);
// 正确
sum(1,2)
  • 函数表达式

在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。

在 ES6 中,=> 叫做箭头函数,应用十分广泛

let mySum = function (x: number, y: number): number {
    return x + y;
};
// 上面的代码只对等号右侧的匿名函数进行了类型定义,而等号左边的 mySum,是通过赋值操作进行类型推论而推断出来的
// 手动给 mySum 添加类型,则应该是这样
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
  • 用接口定义函数的形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}
  • 可选参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

可选参数后面不允许再出现必需参数了

function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.
  • 参数默认值

TypeScript 会将添加了默认值的参数识别为可选参数:

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

不受「可选参数必须接在必需参数后面」的限制了:

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');
  • 剩余参数
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}
let a = [];
push(a, 1, 2, 3);
  • 重载

重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

类型断言(Type Assertion)

类型断言可以用来手动指定一个值的类型

语法:

值 as 类型 or <类型>值,推荐使用前者

类型断言用途

  • 将一个联合类型断言为其中一个类型
// 原因是 (animal as Fish).swim() 这段代码隐藏了 animal 可能为 Cat 的情况,将 animal 直接断言为 Fish 了
// TypeScript 编译器信任了我们的断言,故在调用 swim() 时没有编译错误
interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}
function swim(animal: Cat | Fish) {
    (animal as Fish).swim();
}
const tom: Cat = {
    name: 'Tom',
    run() { console.log('run') }
};
swim(tom);
// Uncaught TypeError: animal.swim is not a function`
  • 将一个父类断言为更加具体的子类

interface类型只能用类型断言判断code是不是AirError class类型可用instanceof

class ApiError extends Error {
    code: number = 0;
}
class HttpError extends Error {
    statusCode: number = 200;
}
function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
    // 下面是更合适的方法
    // 确实使用 instanceof 更加合适,因为 ApiError 是一个 JavaScript 的类,能够通过 instanceof 来判断 error 是否是它的实例
    // if (error instanceof ApiError) {
        return true;
    }
    return false;
}
  • 将任何一个类型断言为 any

它极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any

语法: (window as any).foo = 1;

  • 将 any 断言为一个具体的类型

最好能够将调用了它之后的返回值断言成一个精确的类型,这样就方便了后续的操作(提高可维护性)

function getCacheData(key: string): any {
    return (window as any).cache[key];
}
interface Cat {
    name: string;
    run(): void;
}
const tom = getCacheData('tom') as Cat;
tom.run();

类型断言的限制

  • 联合类型可以被断言为其中一个类型
  • 父类可以被断言为子类
  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型
  • 要使得 A 能够被断言为 B,只需要 A 兼容 B 或 B 兼容 A 即可

Animal 兼容 Cat 时,它们就可以互相进行类型断言了

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}
function testAnimal(animal: Animal) {
    return (animal as Cat);
}
function testCat(cat: Cat) {
    return (cat as Animal);
}

双重断言

除非迫不得已,千万别用双重断言

类型断言 vs 类型转换

类型断言不是类型转换,它不会真的影响到变量的类型

若要进行类型转换,需要直接调用类型转换的方法

function toBoolean(something: any): boolean {
    return Boolean(something);
}
toBoolean(1);
// 返回值为 true

类型断言 vs 类型声明

interface Animal {
    name: string;
}
interface Cat {
    name: string;
    run(): void;
}
const animal: Animal = {
    name: 'tom'
};
// 由于 Animal 兼容 Cat,故可以将 animal 断言为 Cat 赋值给 tom
let tom = animal as Cat;
// let tom: Cat = animal; 报错
// Animal 可以看作是 Cat 的父类,当然不能将父类的实例赋值给类型为子类的变量。

animal 断言为 Cat,只需要满足 Animal 兼容 Cat 或 Cat 兼容 Animal 即可。 animal 赋值给 tom,需要满足 Cat 兼容 Animal 才行

综上,类型声明是比类型断言更加严格的,也更加优雅

类型断言 vs 泛型

修改前

function getCacheData(key: string): any {
    return (window as any).cache[key];
}
interface Cat {
    name: string;
    run(): void;
}
const tom = getCacheData('tom') as Cat;
tom.run();

修改后

function getCacheData<T>(key: string): T {
    return (window as any).cache[key];
}
interface Cat {
    name: string;
    run(): void;
}
const tom = getCacheData<Cat>('tom');
tom.run();

通过给 getCacheData 函数添加了一个泛型< T >,我们可以更加规范的实现对 getCacheData 返回值的约束,这也同时去除掉了代码中的 any,是最优的一个解决方案。

声明文件

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能

新语法索引

`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,一种常见的方式是在 html 中通过 script 标签引入 jQuery ,然后就可以使用全局变量 $ 或 jQuery 了。

// declare var 并没有真的定义一个变量,只是定义了全局变量 jQuery 的类型
// 仅仅会用于编译时的检查,在编译结果中会被删除
declare var jQuery: (selector: string) => any;
jQuery('#foo');

编译后: jQuery('#foo');

什么是声明文件

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

// src/jQuery.d.ts
declare var jQuery: (selector: string) => any;

// src/index.ts
jQuery('#foo');

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

一般来说,ts 会解析项目中所有的 *.ts 文件,当然也包含以 .d.ts 结尾的文件。所以当我们将 jQuery.d.ts 放到项目中时,其他所有 *.ts 文件就都可以获得 jQuery 的类型定义了

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

假如仍然无法解析,那么可以检查下 tsconfig.json 中的 filesincludeexclude 配置,确保其包含了 jQuery.d.ts 文件

第三方声明文件

推荐的是使用 @types 统一管理第三方库的声明文件。

@types 的使用方式很简单,直接用 npm 安装对应的声明模块即可,如

npm install @types/jquery --save-dev

书写声明文件

全局变量

使用全局变量的声明文件时,如果是以 npm install @types/xxx --save-dev 安装的,则不需要任何配置。如果是将声明文件直接存放于当前项目中,则建议(jQuery.d.ts)和其他源码一起放到 src 目录下(或者对应的源码目录下)

全局变量的声明文件主要有以下几种语法:

`declare var` 声明全局变量
`declare function` 声明全局方法
`declare class` 声明全局类
`declare enum` 声明全局枚举类型
`declare namespace` 声明(含有子属性的)全局对象
`interface 和 type` 声明全局类型
declare var

一般来说,全局变量都是禁止修改的常量,所以大部分情况都应该使用 const 而不是 var 或 let

// src/jQuery.d.ts

declare const jQuery: (selector: string) => any;

// jQuery('#foo');
// 使用 declare const 定义的 jQuery 类型,禁止修改这个全局变量
// ERROR: Cannot assign to 'jQuery' because it is a constant or a read-only property.

jQuery = function(selector) {
    return document.querySelector(selector);
};

// 注意:声明语句中只能定义类型,切勿在声明语句中定义具体的实现
// declare const jQuery = function(selector) {
//     return document.querySelector(selector);
// };
// ERROR: An implementation cannot be declared in ambient contexts.
declare function

用来定义全局函数的类型。 jQuery 其实就是一个函数,所以也可以用 function 来定义

例子:

// src/jQuery.d.ts
declare function jQuery(selector: string): any;

// src/index.ts
jQuery('#foo');

函数类型的声明语句中,函数重载也是支持的

// src/jQuery.d.ts
declare function jQuery(selector: string): any;
declare function jQuery(domReadyCallback: () => any): any;

// src/index.ts
jQuery('#foo');
jQuery(function() {
    alert('Dom Ready!');
});
declare class

当全局变量是一个类的时候,我们用 declare class 来定义它的类型

例子:

// src/Animal.d.ts
declare class Animal {
    name: string;
    constructor(name: string);
    sayHi(): string;
}

// src/index.ts
let cat = new Animal('Tom');

declare class 语句也只能用来定义类型(declare var也是),不能用来定义具体的实现,比如定义 sayHi 方法的具体实现则会报错

错误例子:

// src/Animal.d.ts
declare class Animal {
    name: string;
    constructor(name: string);
    sayHi() {
        return `My name is ${this.name}`;
    };
    // ERROR: An implementation cannot be declared in ambient contexts.
}
declare enum

使用 declare enum 定义的枚举类型也称作外部枚举(Ambient Enums

// src/Directions.d.ts
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

// src/index.ts
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]
declare namespace

namespacets 早期时为了解决模块化而创造的关键字,中文称为命名空间

jQuery 是一个全局变量,它是一个对象,提供了一个 jQuery.ajax 方法可以调用,那么我们就应该使用 declare namespace jQuery 来声明这个拥有多个子属性的全局变量

declare namespace 内部,我们直接使用 function ajax 来声明函数,而不是使用 declare function ajax。类似的,也可以使用 const, class, enum 等语句

// src/jQuery.d.ts
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
    const version: number;
    class Event {
        blur(eventType: EventType): void
    }
    enum EventType {
        CustomClick
    }
}

// src/index.ts
jQuery.ajax('/api/get_something');
console.log(jQuery.version);
const e = new jQuery.Event();
e.blur(jQuery.EventType.CustomClick);
interface 和 type

在类型声明文件中,我们可以直接使用 interfacetype 来声明一个全局的接口或类型

// src/jQuery.d.ts
interface AjaxSettings {
    method?: 'GET' | 'POST'
    data?: any;
}
declare namespace jQuery {
    function ajax(url: string, settings?: AjaxSettings): void;
}

// src/index.ts
let settings: AjaxSettings = {
    method: 'POST',
    data: {
        name: 'foo'
    }
};
jQuery.ajax('/api/post_something', settings);
防止命名冲突

暴露在最外层的 interfacetype 会作为全局类型作用于整个项目中,我们应该尽可能的减少全局变量或全局类型的数量。故最好将他们放到 namespace

声明合并
// src/jQuery.d.ts
declare function jQuery(selector: string): any;
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}

// src/index.ts
jQuery('#foo');
jQuery.ajax('/api/get_something');
npm 包

npm 包的声明文件主要有以下几种语法:

export 导出变量
export namespace 导出(含有子属性的)对象
export default ES6 默认导出
export = commonjs 导出模块
export

npm 包的声明文件与全局变量的声明文件有很大区别。在 npm 包的声明文件中,使用 declare 不再会声明一个全局变量,而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出,然后在使用方 import 导入后,才会应用到这些类型声明

// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
    constructor(name: string);
    sayHi(): string;
}
export enum Directions {
    Up,
    Down,
    Left,
    Right
}
export interface Options {
    data: any;
}

对应的导入和使用模块应该是这样:

import { name, getName, Animal, Directions, Options } from 'foo';

console.log(name);
let myName = getName();
let cat = new Animal('Tom');
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let options: Options = {
    data: {
        name: 'foo'
    }
};
混用 declare 和 export

使用 declare 先声明多个变量,最后再用 export 一次性导出

// types/foo/index.d.ts

declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
interface Options {
    data: any;
}

export { name, getName, Animal, Directions, Options };

注意: interface前是不需要declare

export namespace

export namespace 用来导出一个拥有子属性的对象

// types/foo/index.d.ts

export namespace foo {
    const name: string;
    namespace bar {
        function baz(): string;
    }
}
// src/index.ts

import { foo } from 'foo';

console.log(foo.name);
foo.bar.baz();
export default

ES6 模块系统中,使用 export default 可以导出一个默认值,使用方可以用 import foo from 'foo' 而不是 import { foo } from 'foo' 来导入这个默认值

只有 functionclassinterface 可以直接默认导出,其他的变量需要先定义出来,再默认导出

// types/foo/index.d.ts

export default function foo(): string;
// src/index.ts

import foo from 'foo';

foo();

针对别的默认导出,一般会将导出语句放在整个声明文件的最前面

export default Directions;

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
export =

commonjs 规范中,我们用以下方式来导出一个模块

// 整体导出
module.exports = foo;
// 单个导出
exports.bar = bar;

ts 中,针对这种模块导出,有多种方式可以导入,第一种方式是 const ... = require

// 整体导入
const foo = require('foo');
// 单个导入
const bar = require('foo').bar;

第二种方式是 import ... from ,注意针对整体导出,需要使用 import * as 来导入

// 整体导入
import * as foo from 'foo';
// 单个导入
import { bar } from 'foo';

第三种方式是 import ... require ,这也是 ts 官方推荐的方式

// 整体导入
import foo = require('foo');
// 单个导入
import bar = foo.bar;

对于这种使用 commonjs 规范的库,假如要为它写类型声明文件的话,就需要使用到 export = 这种语法了

// types/foo/index.d.ts

export = foo;

declare function foo(): string;
declare namespace foo {
    const bar: number;
}

UMD库

export as namespace

一般使用 export as namespace 时 (作用:声明额外的全局变量) , 都是先有了 npm 包的声明文件,再基于它添加一条 export as namespace 语句,即可将声明好的一个变量声明为全局变量,举例如下

// types/foo/index.d.ts

export as namespace foo;
// export default foo;
export = foo;

declare function foo(): string;
declare namespace foo {
    const bar: number;
}

直接扩展全局变量

有的第三方库扩展了一个全局变量,可是此全局变量的类型却没有相应的更新过来,就会导致 ts 编译错误,此时就需要扩展全局变量的类型。比如扩展 String 类型

interface String {
    prependHello(): string;
}

'foo'.prependHello();

也可以使用 declare namespace 给已有的命名空间添加类型声明

// types/jquery-plugin/index.d.ts

declare namespace JQuery {
    interface CustomOptions {
        bar: string;
    }
}

interface JQueryStatic {
    foo(options: JQuery.CustomOptions): string;
}
// src/index.ts

jQuery.foo({
    bar: ''
});

在 npm 包或 UMD 库中扩展全局变量

declare global

可以在 npm 包或者 UMD 库的声明文件中扩展全局变量的类型

// types/foo/index.d.ts

declare global {
    interface String {
        prependHello(): string;
    }
}

// 注意即使此声明文件不需要导出任何东西,仍然需要导出一个空对象,用来告诉编译器这是一个模块的声明文件
// 而不是一个全局变量的声明文件
export {};
// src/index.ts

'bar'.prependHello();

模块插件

ts 提供了一个语法 declare module,它可以用来扩展原有模块的类型

// types/moment-plugin/index.d.ts

import * as moment from 'moment';

declare module 'moment' {
    export function foo(): moment.CalendarKey;
}
// src/index.ts

import * as moment from 'moment';
import 'moment-plugin';

moment.foo();

declare module 也可用于在一个文件中一次性声明多个模块的类型

// types/foo-bar.d.ts

declare module 'foo' {
    export interface Foo {
        foo: string;
    }
}

declare module 'bar' {
    export function bar(): string;
}
// src/index.ts

import { Foo } from 'foo';
import * as bar from 'bar';

let f: Foo;
bar.bar();

声明文件中的依赖

一个声明文件有时会依赖另一个声明文件中的类型,比如在前面的 declare module 的例子中,我们就在声明文件中导入了 moment ,并且使用了 moment.CalendarKey 这个类型

// types/moment-plugin/index.d.ts

import * as moment from 'moment';

declare module 'moment' {
    export function foo(): moment.CalendarKey;
}
三斜线指令

类似于声明文件中的 import ,它可以用来导入另一个声明文件。与 import 的区别是,当且仅当在以下几个场景下,我们才需要使用三斜线指令替代 import

  • 当我们在书写一个全局变量的声明文件时
  • 当我们需要依赖一个全局变量的声明文件时
书写一个全局变量的声明文件

这些场景听上去很拗口,但实际上很好理解——在全局变量的声明文件中,是不允许出现 import, export 关键字的。一旦出现了,那么他就会被视为一个 npm 包或 UMD 库,就不再是全局变量的声明文件了。故当我们在书写一个全局变量的声明文件时,如果需要引用另一个库的类型,那么就必须用三斜线指令了

// types/jquery-plugin/index.d.ts

/// <reference types="jquery" />

declare function foo(options: JQuery.AjaxSettings): string;
// src/index.ts

foo({});

三斜线指令的语法如上,/// 后面使用 xml 的格式添加了对 jquery 类型的依赖,这样就可以在声明文件中使用 JQuery.AjaxSettings 类型了

注意,三斜线指令必须放在文件的最顶端,三斜线指令的前面只允许出现单行或多行注释

依赖一个全局变量的声明文件

在另一个场景下,当我们需要依赖一个全局变量的声明文件时,由于全局变量不支持通过 import 导入,当然也就必须使用三斜线指令来引入了

// types/node-plugin/index.d.ts

/// <reference types="node" />

export function foo(p: NodeJS.Process): string;
// types/node-plugin/index.d.ts

/// <reference types="node" />

export function foo(p: NodeJS.Process): string;
拆分声明文件

当我们的全局变量的声明文件太大时,可以通过拆分为多个文件,然后在一个入口文件中将它们一一引入,来提高代码的可维护性。比如 jQuery 的声明文件就是这样的

// node_modules/@types/jquery/index.d.ts

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery;

自动生成声明文件

方法一:语法 tsc xx.ts -d or tsc xx.ts --declaration

它们的区别是: types 用于声明对另一个库的依赖,而 path 用于声明对另一个文件的依赖

方法二:在 tsconfig.json 中添加 declaration 选项。这里以 tsconfig.json 为例

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "lib",
        "declaration": true
    }
}

发布声明文件

当我们为一个库写好了声明文件之后,下一步就是将它发布出去了。

此时有两种方案:

  • 将声明文件和源码放在一起
  • 将声明文件发布到 @types

内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域( Global )上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM )的标准

ECMAScript 的内置对象

ECMAScript 标准提供的内置对象有: Boolean、Error、Date、RegExp 等。

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

更多内置对象 核心库定义

DOM和BOM内置对象

DOM 和 BOM 提供的内置对象有: Document、HTMLElement、Event、NodeList 等。

// 常用
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

核心库定义

TypeScript 核心库的定义文件

TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型,并且是预置在 TypeScript 中的。

用 TypeScript 写 Node.js

Node.js 不是内置对象的一部分,如果想用 TypeScript 写 Node.js,则需要引入第三方声明文件: npm install @types/node --save-dev

进阶

类型别名

类型别名常用于联合类型

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错,event 不能为 'dblclick'
// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

注意,类型别名与字符串字面量类型都是使用 type 进行定义。

元组

数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。

元组起源于函数编程语言(如 F#),这些语言中会频繁使用元组

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;
tom[0].slice(1);
tom[1].toFixed(2);

越界数组:当添加越界的元素时,它的类型会被限制为元组中每个类型的联合类型

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

枚举

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等

枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

手动赋值

如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

手动赋值的枚举项可以不是数字,此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的):

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

手动赋值的枚举项也可以为小数或负数,此时后续未手动赋值的项的递增步长仍为 1

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1.5); // true
console.log(Days["Tue"] === 2.5); // true
console.log(Days["Sat"] === 6.5); // true

常数项和计算所得项

枚举项有两种类型:常数项(constant member)和计算所得项(computed member

// 正确例子
enum Color {Red, Green, Blue = "blue".length};
// 错误例子
// 如果紧接在计算所得项后面的是未手动赋值的项,那么它就会因为无法获得初始值而报错
enum Color {Red = "red".length, Green, Blue};
// index.ts(1,33): error TS1061: Enum member must have initializer.
// index.ts(1,40): error TS1061: Enum member must have initializer.

当满足以下条件时,枚举成员被当作是常数:

不具有初始化函数并且之前的枚举成员是常数。在这种情况下,当前枚举成员的值为上一个枚举成员的值加 1。但第一个枚举元素是个例外。如果它没有初始化方法,那么它的初始值为 0。 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集,它可以在编译阶段求值。当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:

数字字面量

引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的)如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用

带括号的常数枚举表达式

+, -, ~ 一元运算符应用于常数枚举表达式

+, -, *, /, %, <<, >>, >>>, &, |, ^ 二元运算符,常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity,则会在编译阶段报错

所有其它情况的枚举成员被当作是需要计算得出的值。

常数枚举

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算成员。

假如包含了计算成员,则会在编译阶段报错:

const enum Color {Red, Green, Blue = "blue".length};
// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

外部枚举(Ambient Enums)

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

同时使用 declareconst 也是可以的:

declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

类的概念

- 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
- 对象(Object):类的实例,通过 new 生成
- 面向对象(OOP)的三大特性:封装、继承、多态
- 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
- 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
- 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
- 存取器(getter & setter):用以改变属性的读取和赋值行为
- 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

ES6类的用法

属性和方法

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

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

class Animal {
    public name;
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        return `My name is ${this.name}`;
    }
}
let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
类的继承

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

class Cat extends Animal {
  constructor(name) {
    super(name); // 调用父类的 constructor(name)
    console.log(this.name);
  }
  sayHi() {
    return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()
  }
}
let c = new Cat('Tom'); // Tom
console.log(c.sayHi()); // Meow, My name is Tom
存取器

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

class Animal {
  constructor(name) {
    this.name = name;
  }
  get name() {
    return 'Jack';
  }
  set name(value) {
    console.log('setter: ' + value);
  }
}
let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack
静态方法

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

class Animal {
  static isAnimal(a) {
    return a instanceof Animal;
  }
}
let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

ES7类的用法

实例属性

ES6 中实例的属性只能通过构造函数中的 this.xxx 来定义,ES7 提案中可以直接在类里面定义

class Animal {
    name = 'Jack';
    constructor() {
        //...
    }
}
let a = new Animal();
console.log(a.name); //Jack
静态属性

ES7 提案中,可以使用 static 定义一个静态属性

class Animal {
    static num = 42;
    constructor() {
        // ...
    }
}
console.log(Animal.num); //42

TypeScript类的用法

public private 和 protected
  • public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都是 public 的
  • private 修饰的属性或方法是私有的,不能在声明它的类的外部访问
  • protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许被访问的
参数属性

修饰符和 readonly 还可以使用在构造函数参数中,等同于类中定义该属性同时给该属性赋值,使代码更简洁

class Animal {
  // public name: string;
  public constructor(public name) {
    // this.name = name;
  }
}
readonly

只读属性关键字,只允许出现在属性声明或索引签名或构造函数中

class Animal {
  readonly name;
  public constructor(name) {
    this.name = name;
  }
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.

这样写会更优雅

class Animal {
  // public readonly name;
  public constructor(public readonly name) {
    // this.name = name;
  }
}
抽象类

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

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

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}
let a = new Animal('Jack');
// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.

抽象类中的抽象方法必须被子类实现,ex:

abstract class Animal {
  public name;
  public constructor(name) {
    this.name = name;
  }
  public abstract sayHi();
}
// 子类实现抽象类
class Cat extends Animal {
  public sayHi() {
    console.log(`Meow, My name is ${this.name}`);
  }
}
let cat = new Cat('Tom');

类的类型

给类加上 TypeScript 的类型很简单,与接口类似

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

类与接口

类实现接口

实现(implements)是面向对象中的一个重要概念。不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类,车,也有报警器的功能,就可以考虑把报警器提取出来,作为一个接口,防盗门和车都去实现它,ex:

interface Alarm {
    alert(): void;
}
class Door {
}
class SecurityDoor extends Door implements Alarm {
    alert() {
        console.log('SecurityDoor alert');
    }
}
class Car implements Alarm {
    alert() {
        console.log('Car alert');
    }
}

一个类实现多个接口

interface Alarm {
    alert(): void;
}
interface Light {
    lightOn(): void;
    lightOff(): void;
}
class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

接口继承接口

LightableAlarm 继承了 Alarm,除了拥有 alert 方法之外,还拥有两个新方法 lightOnlightOff

interface Alarm {
    alert(): void;
}
interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

接口继承类

常见的面向对象语言中,接口是不能继承类的,但是在 TypeScript 中却是可以的f

  • 类可以当做一个类使用(new xx创建它的实例)
  • 类可以当做一个类型使用(使用 : xx 表示参数的类型)
interface PointInstanceType {
    x: number;
    y: number;
}
// 等价于
class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

当我们声明 interface Point3d extends Point 时,Point3d 继承的实际上是类 Point 的实例的类型。

换句话说,可以理解为定义了一个接口 Point3d 继承另一个接口 PointInstanceType

所以「接口继承类」和「接口继承接口」没有什么本质的区别。

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}
interface PointInstanceType {
    x: number;
    y: number;
}
// 等价于 interface Point3d extends PointInstanceType
interface Point3d extends Point {
    z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};

除了构造函数是不包含的,静态属性或静态方法也是不包含的(实例的类型当然不应该包括构造函数、静态属性或静态方法)

也就是声明类创建的类型质包含其中的实例属性实例方法

class Point {
    /** 静态属性,坐标系原点 */
    static origin = new Point(0, 0);
    /** 静态方法,计算与原点距离 */
    static distanceToOrigin(p: Point) {
        return Math.sqrt(p.x * p.x + p.y * p.y);
    }
    /** 实例属性,x 轴的值 */
    x: number;
    /** 实例属性,y 轴的值 */
    y: number;
    /** 构造函数 */
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    /** 实例方法,打印此点 */
    printPoint() {
        console.log(this.x, this.y);
    }
}
interface PointInstanceType {
    x: number;
    y: number;
    printPoint(): void;
}
let p1: Point;
let p2: PointInstanceType;

泛型(Generics)

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

简单的例子

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
// 可以选择指定或者不指定,类型推论会自动推算
createArray<string>(3, 'x'); // ['x', 'x', 'x']
createArray(3, 'x'); // ['x', 'x', 'x']

多个类型参数

function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}
// 用来交换输入的元组
swap([7, 'seven']); // ['seven', 7]

泛型约束

我们使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状,也就是必须包含 length 属性。

此时如果调用 loggingIdentity 的时候,传入的 arg 不包含 length,那么在编译阶段就会报错了:

interface Lengthwise {
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
loggingIdentity(7);
// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.

多个类型参数之间也可以互相约束,其中要求 T 继承 U,这样就保证了 U 上不会出现 T 中不存在的字段

function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id];
    }
    return target;
}
let x = { a: 1, b: 2, c: 3, d: 4 };
copyFields(x, { b: 10, d: 20 });

泛型接口

interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']

泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型参数的默认类型

我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,这个默认类型就会起作用

function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

声明合并

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

函数的合并

// 重载定义多个函数类型
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

接口的合并

接口中的属性在合并时会简单的合并到一个接口中

interface Alarm {
    price: number;
    weight: number;
}

合并的属性的类型必须是唯一的

interface Alarm {
    price: number;
}
interface Alarm {
    price: string;  // 类型不一致,会报错
    weight: number;
}
// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type.  Variable 'price' must be of type 'number', but here has type 'string'.

接口中方法的合并,与函数的合并一样:

interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}

相当于

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

类的合并

interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

工程

代码检查

2019 年 1 月,TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具,并创建了一个新项目 typescript-eslint,提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等。

什么是代码检查

代码检查主要是用来发现代码错误、统一代码风格。

JavaScript 项目中,我们一般使用 ESLint 来进行代码检查,它通过插件化的特性极大的丰富了适用范围,搭配 typescript-eslint 之后,甚至可以用来检查 TypeScript 代码

为什么需要代码检查

分别用 tsc 编译和 eslint 检查后,报错信息如下

var myName = 'Tom';
// eslint 报错信息:
// Unexpected var, use let or const instead.eslint(no-var)
console.log(`My name is ${myNane}`);
// tsc 报错信息:
// Cannot find name 'myNane'. Did you mean 'myName'?
// eslint 报错信息:
// 'myNane' is not defined.eslint(no-undef)
console.log(`My name is ${myName.toStrng()}`);
// tsc 报错信息:
// Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?
  • ES6 中有更先进的语法 letconst,此时就可以通过 eslint 检查出来,提示我们应该使用 letconst 而不是 var
  • eslint 无法识别 myName 存在哪些方法
  • eslint 能够发现出一些 tsc 不会关心的错误,检查出一些潜在的问题,所以代码检查还是非常重要的。

在 TypeScript 中使用 ESLint

项目中安装 ESLint

npm install --save-dev eslint

由于 ESLint 默认使用 Espree 进行语法解析,无法识别 TypeScript 的一些语法,故我们需要安装 @typescript-eslint/parser,替代掉默认的解析器,别忘了同时安装 typescript

npm install --save-dev typescript @typescript-eslint/parser

@typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充,提供了一些额外的适用于 ts 语法的规则

npm install --save-dev @typescript-eslint/eslint-plugin

创建配置文件

ESLint 需要一个配置文件来决定对哪些规则进行检查,配置文件的名称一般是 .eslintrc.js.eslintrc.json

当运行 ESLint 的时候检查一个文件的时候,它会首先尝试读取该文件的目录下的配置文件,然后再一级一级往上查找,将所找到的配置合并起来,作为当前被检查文件的配置

项目的根目录下创建一个 .eslintrc.js,内容如下:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        // 禁止使用 var
        'no-var': "error",
        // 优先使用 interface 而不是 type
        '@typescript-eslint/consistent-type-definitions': [
            "error",
            "interface"
        ]
    }
}

以上配置中,我们指定了两个规则,其中 no-varESLint 原生的规则,@typescript-eslint/consistent-type-definitions@typescript-eslint/eslint-plugin 新增的规则。

off、warn 或 error 中的一个,表示关闭、警告和报错

关闭、警告和报错的含义如下:
  关闭:禁用此规则
  警告:代码检查时输出错误信息,但是不会影响到 exit code
  报错:发现错误时,不仅会输出错误信息,而且 exit code 将被设为 1(一般 exit code 不为 0 则表示执行出现错误)
检查一个ts文件

创建一个新文件 index.ts

var myName = 'Tom';
type Foo = {};

执行 ./node_modules/.bin/eslint index.ts

得到报错:

/path/to/index.ts
  1:1  error  Unexpected var, use let or const instead  no-var
  2:6  error  Use an `interface` instead of a `type`    @typescript-eslint/consistent-type-definitions

✖ 2 problems (2 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

每次执行这么长一段脚本颇有不便,我们可以通过在 package.json 中添加一个 script 来创建一个 npm script 来简化这个步骤

{
    "scripts": {
        "eslint": "eslint index.ts"
    }
}

只需执行 npm run eslint 即可

检查整个项目的ts文件

项目源文件一般是放在 src 目录下,所以将 package.json 中的 eslint 脚本改为对一个目录进行检查。由于 eslint 默认不会检查 .ts 后缀的文件,所以需要加上参数 --ext .ts

{
    "scripts": {
        "eslint": "eslint src --ext .ts"
    }
}

此时执行 npm run eslint 即会检查 src 目录下的所有 .ts 后缀的文件

在 VSCode 中集成 ESLint 检查

插件名:ESLint

VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的,需要在「文件 => 首选项 => 设置 => 工作区」中(也可以在项目根目录下创建一个配置文件 .vscode/settings.json),添加以下配置:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}

.ts 文件,将鼠标移到红色提示处,即可看到这样的报错信息了

再加上保存时自动修复,修改配置文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript"
    ],
    "typescript.tsdk": "node_modules/typescript/lib"
}
使用 Prettier 修复格式错误

ESLint 包含了一些代码格式的检查,比如空格、分号等。但前端社区中有一个更先进的工具可以用来格式化代码,那就是 Prettier

Prettier 聚焦于代码的格式化,通过语法分析,重新整理代码的格式,让所有人的代码都保持同样的风格

安装Prettier

npm install --save-dev prettier

创建一个 prettier.config.js 文件,里面包含 Prettier 的配置项。 Prettier 的配置项很少,这里我推荐大家一个配置规则

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};
使用 AlloyTeam 的 ESLint 配置

ESLint 原生的规则和 @typescript-eslint/eslint-plugin 的规则太多了,而且原生的规则有一些在 TypeScript 中支持的不好,需要禁用掉

安装

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

.eslintrc.js下加入

module.exports = {
    extends: [
        'alloy',
        'alloy/typescript',
    ],
    env: {
        // 您的环境变量(包含多个预定义的全局变量)
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 您的全局变量(设置为 false 表示它不允许被重新赋值)
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    rules: {
        // 自定义您的规则
        // Customize your rules
    }
};
使用 ESLint 检查 tsx 文件

安装 eslint-plugin-react:

npm install --save-dev eslint-plugin-react

package.json 中的 scripts.eslint 添加 .tsx 后缀

{
    "scripts": {
        "eslint": "eslint src --ext .ts,.tsx"
    }
}

VSCode 的配置中新增 typescriptreact 检查

{
    "eslint.validate": [
        "typescriptreact"
    ],
}
结束语:如果遇到什么疑问或者建议的,可直接留言评论!作者看到会马上一一回复

如果觉得小白此文章不错或对你有所帮助,期待你的一键三连💫!❤️ ni ~