TS02 TypeScript基础

TypeScript基础学习笔记，学习完了可以凑合着用了。

安装

全局安装TypeScript命令行工具

npm install -g typescript

安装后就可以在全局使用tsc命令，来编译TypeScript文件：

tsc hello.ts

TypeScript编写的文件后缀名是.ts，用TypeScript编写React应用时文件后缀名是.tsx

Hello TypeScript

function sayHello(person: string) {
  return `hello, ${person}`
}
const user = 'Tom';
console.log(sayHello(user));

在TS中，使用:指定变量的类型，编译后的代码：

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

TypeScript会对代码进行静态检查，如果传入的参数和我们指定的类型不匹配，IDE就可以给出即时的提示，并且在编译阶段会报错（但是并不会阻止编译的过程）

例如我们将上面的user的值改为数值123，那么在IDE中会提示：

编译时也报错：

src/hello.ts:5:22 - error TS2345: Argument of type '123' is not assignable to parameter of type 'string'.

5 console.log(sayHello(user));

但是仍然会生成编译结果。如果需要在报错时终止JS文件的生成，可以在tsconfig.json中配置noEmitOnError，关于tsconfig.json后面单独学习。

原始数据类型

字符串 + 布尔值 + 数值

JavaScript中数据分为原始数据类型和对象类型，原始数据类型有六种（布尔值、数值、字符串、null、undfined和Symbol），对于前三者类型的定义如下：

let isDone: boolean = false;
let count: number = 123;
let msg: string = 'hello'

注意，类型的定义都是针对字面量的，使用构造函数（例如new Boolean()）创建出的变量类型时对象，而非基本类型

空值void

JavaScript中的void

JavaScript中的void是一个运算符，用于计算它右边的表达式，无论表达式是什么、结果返回什么，void总是返回undefined

它的作用是，由于一个变量被赋值为undefined后，它总是可以被覆盖，所以可以使用void来确保可以始终返回undefined

借用这个特性，我们可以实现下面几种效果：

（1）调用立即执行函数：

void function(){
    console.log(123)
}()

（2）在函数中调用一个回调函数，但是不返回这个会带哦函数的值：

// returning something else than undefined would crash the app
function middleware(nextCallback) {
  if(conditionApplies()) {
    return void nextCallback();
  }
}

TypeScript中的void

JavaScript中没有空值的概念，而在TypeScript中使用void表示没有任何返回值的函数：

function alertName(): void {
  lert('My name is Tom');
}

如果一个变量声明为void类型，那么只能将它赋值为undefined或null

对于undefined和null，它们是所有类型的子类型，也就是说，undefined和null类型的变量，可以赋值其他任何类型：

let msg: string = undefined;
let count: number = null;

而void类型的变量不是其他类型的子类型，不能赋值给其他类型的变量

let u: void;
let num: number = u;

// Type 'void' is not assignable to type 'number'.

任意值

使用any来表示允许赋值为任意类型，除此之外的情况，一旦定义了类型，在赋值过程中是不允许改变的：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但是如果是any类型，则可以被任意改变：

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

在任意值上访问任何属性都是允许的，也可以调用任何方法：

let anyThing: any = 'hello';
console.log(anyThing.myName.firstName);
anyThing.myName.setFirstName('Cat');

可以认为，声明一个变量为any后，对它的任何操作，返回的内容的类型都是任意值（失去了控制）

变量在声明时，如果没有指定类型并且没有赋值，那么就会被认为是任意类型

类型推论

如果一个变量声明时，没有指定类型吗，但是进行了赋值，那么TypeScript会依照类型推论的规则推导出一个类型

let msg = 'seven';
msg = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

它等价于

let msg: string = 'seven';
msg = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

联合类型（Union Types）

联合类型表示取值可以为多种类型中的一种，使用|来分割每个类型

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

当TypeScript不确定一个联合类型的变量具体是哪个类型是时，我们只能访问此联合类型的所有类型中都共有的属性和方法

联合类型在赋值时也会根据类型推论被确定类型

对象的类型：接口

接口定义

在TypeScript中，我们使用接口（Interfaces）来定义对象的类型。

在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（class）去实现（implement）

TypeScript中的接口既可以对类的一部分行为进行抽象，也可以对对象的形状（shape）进行描述，下面是一个简单的例子：

interface Person {
  name: string,
  age: number,
}

const tom: Person = {
  name: 'tom',
  age: 100,
};

上面我们通过定义接口Person，并且指定了tom的类型为Person，这样就约束了tom中的形状（也就是各个成员的类型）必须和接口Person一致

接口名首字母大写。

可选属性

使用了接口的变量属性数目必须和接口完全一致，不能多也不能少，也就是说，赋值的时候，变量的形状必须和接口的形状完全保持一致。

但是有些时候，我们希望不要完全匹配一个形状，那么就可以使用可选属性：

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

这个时候接口中的可选属性是可以在变量中不存在的，但是仍然不允许添加不存在的属性，并且可选属性的类型（如果存在）仍需要和接口中属性的类型一致。

任意属性

如果希望一个接口允许有任意的属性，可以使用[propName: string]来定义：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用[propName: string]，定义了任意属性（属性名类型为string）的类型为any，要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

只读属性

可以在接口的属性前添加readonly，定义此属性是只读的，不能为此属性赋值

interface Person {
  readonly name: string
}

let tom: Person = {
  name: 'tom',
};

tom.name = 'jerry';
// Cannot assign to 'name' because it is a read-only property.

数组的类型

数组类型有多重定义方法：

类型 + 方括号表示法

这是最简的表达式方法，适用于值都是基本类型的数组：

let arr: number[] = [1, 2, 3];
arr.push('8');

// Argument of type '"8"' is not assignable to parameter of type 'number'.

使用any表示数组中可以出现任意类型：

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

数组泛型

也可以使用数组泛型（Array Generic）Array<elemType>来表示数组：

let arr: Array<number> = [1, 2, 3];

用接口表示数组

因为数组实际上是特殊的对象，所以可以使用接口来描述数组：

interface NumberArray {
  [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

[index: number]限定的是索引的类型是数字的成员（实际上貌似使用propName代替index也可以成功）

复合数组

前面的几种方法都定义的是数组成员是基本类型的数组，如果数组的成员是对象的话，只需要借助接口来实现就好：

interface Item {
  name: string,
  age: number
}
let arr: Array<Item> = [
  { name: 'Tom', age: 100 },
  { name: 'Jerry', age: 100 },
];

类数组

类数组并不是数组，不能用普通的数组的方式来描述，而应该使用接口：

function sum() {
  let args: {
    [index: number]: number;
    length: number;
    callee: Function;
  } = arguments;
}

我们通过自定义接口约束了类数组的类型，但是实际上类数组在TypeScript中都有内置的接口定义，比如arguments对应的IArguments，还有NodeList、HTMLCollection等

function sum() {
  let args: IArguments = arguments;
}

IArguments的内容实际上就是：

interface IArguments {
  [index: number]: any;
  length: number;
  callee: Function;
}

这些内置对象在后面学习。

函数的类型

一个函数有输入也有输出，输入和输出的类型都需要进行限制

函数声明

函数参数的个数也会被限定

function sum(x: number, y: number): number {
  return x + y;
}

函数表达式

如果将上面的函数声明改写为函数表达式，是这样：

const sum = (x: number, y: number): number => {
  return x + y;
};

但是实际上，这样支队等号右侧的匿名函数进行了类型定义，等号左边的sum是通过赋值操作进行类型推论而推断出来的，如果需要手动给sum添加类型，应该是这样：

const sum: (x: number, y: number) => number = (x: number, y: number): number => {
  return x + y;
};

上面出现了两个箭头=>，右侧箭头是ES6中用来定义函数的箭头，而左侧的箭头是TypeScript中用来表示函数定义的箭头，这个箭头左侧表示输入类型，需要用括号括起来，右侧是输出类型。

实际上对sum的类型的限制及限制了函数的输入，也限制了函数的输出。

用接口定义函数类型

也可以用接口来定义函数类型：

interface sumFn {
  (x: number, y: number): number
}

const sum: sumFn = (x, y) => x + y;

接口的属性名为对应的函数输入参数类型，属性值为函数输出的参数类型。

可选参数

和接口的可选属性一样，函数的参数后面添加?表示这个参数时可选参数，要注意的是，可选参数必须接在必须参数的后面，也就是说，可选参数后面不能出必须参数了。

function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}

let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

默认参数

和ES6中的函数的默认参数一样，TypeScript中也可以给函数的参数添加默认值。

const sum = (x: number, y: number = 0): number => x + y;

sum(5, 2);
sum(5);

函数参数的默认值只能在函数中定义，不能在接口中定义：

interface sumFn {
  (x: number, y: number = 0): number,
}

const sum: sumFn = (x, y) => x + y;
// Error:(9, 15) TS2371: A parameter initializer is only allowed in a function or constructor implementation.

剩余参数

ES6中的剩余参数需要使用数组类型来定义（因为它就是一个数组）

function push(array: any[], ...items: any[]) {
  items.forEach(function(item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

要注意，剩余参数只能在参数的末尾出现。

函数重载

一个函数接受不同数量或者类型的参数，做出不同的处理，这种现象就是函数重载。

例如下面的函数，对输入数字和字符串时处理的过程是不同的：

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('');
  }
}

但是这样并不够精确，因为输入是数字的时候，也应该返回数字，输入是字符串，也应该返回字符串，这时我们可以使用重载定义多个函数类型：

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('');
  }
}

前两个都是函数定义，最后一个是函数实现，这样做在IDE就可以看到正确的两个提示

注意，TypeScript会从最前面的函数开始匹配，所以需要优先把精确定义写在前面

类型断言

类型断言（Type Assertion）用来手动指定一个值的类型，一般用在联合类型中，将一个不确定类型的变量指定为联合类型中的一种

比如，下面的函数，如果要访问length会报错，因为number是没有length属性的：

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

这个时候我们就可以使用类型断言，将something断言为string：

function getLength(something: string | number): number {
  return (<string>something).length;
}

或者：

function getLength(something: string | number): number {
  return (something as string).length;
}

上面用了两种语法类实现断言(<类型>值)和(值 as 类型)，在React应用的.tsx文件中，只能使用后一种。

要注意类型断言不是类型转换，不允许将类型断言为一个联合类型中不存在的类型

声明文件

声明语句

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

比如使用jQuery时，我们获取一个元素：

jQuery('#foo');
// ERROR: Cannot find name 'jQuery'.

但是这时编译器并不知道$或者jQuery是什么，所以我们需要使用declare定义它的类型

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

jQuery('#foo');

上面的declare var就是声明语句，它并没有定义一个变量，只是定义了jQuery的类型，仅仅用于编译时的检查，编译结果中会删除。

声明文件

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

// src/jQuery.d.ts

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

声明文件必须以.d.ts为后缀，当我们将jQuery.d.ts放入项目中，其他所有的*.ts文件就都可以获得jQuery的类型定义了

如果无法解析，可以检查一下tsconfig.json中的files、include、exclude配置，确保包含了声明文件

第三方声明文件

大部分热门的第三方库的声明文件都不需要我们自己定义了，我们可以直接使用@types统一管理第三方库的声明文件。

可以在这个页面搜索需要的声明文件，然后使用npm安装对应的声明模块即可：

npm install @types/jquery --save-dev

书写声明文件

如果第三方库没有提供声明文件，我们需要自己书写声明了，在不同的场景下，声明文件的内容和使用方式有所区别

全部变量

当通过<script>标签引入第三方库的时候，会注入全局变量，就像上面的例子一样。建议将声明文件和源码一起放到scr目录下

（1）声明变量

可以使用declare var和declare let和declare const来声明变量，一般来说全局变量都是禁止修改的常量，所以大部分情况都应该使用const

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

要注意的是，声明语句中只能定义类型，不要在声明语句中定义具体的实现。

（2）声明函数

使用declare function来声明全局函数的类型，jQuery其实就是一个函数，所以也可以使用function来定义。在函数类型的声明语句中，也支持函数重载

declare function jQuery(cb: () => any)
declare function jQuery(selector: string): any;

（3）声明类

使用declare class定义一个类：

declare class Person {
  name: string;
  constructor(name: string) ;
  sayHi(): string;
  sayBye: (msg: string) => string
}

同样的，declare class也只能定义类型，不能定义具体实现

（4）声明枚举类型

JS中是没有枚举类型的，TypeScript中使用declare enum声明的枚举类型也成为外部枚举，定义后的变量不能包含枚举值之外的属性

declare enum Direction {
  up,
  down,
  left,
  right,
}

const d1 = Direction.down;

const d2 = Direction.south;
// Error:(17, 22) TS2339: Property 'south' does not exist on type 'typeof Direction'.

（5）声明命名空间

使用declare namespace声明命名空间，用来表示全局变量是一个对象，包含很多子属性。

比如jQuery是一个全局变量，它是一个对象，提供了一个jQuery.ajax的方法可以调用，那么我们就可以通过declare namespace来声明这个拥有很多个子属性的全局变量：

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;
}

在declare namespace内部，直接使用function来声明函数，而不是使用declare function，类似的也可以使用class、enum、const等语句

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;

  const version: number;

  class Event {
    blur(eventType: EventType): void
  }

  enum EventType {
    CustomClick
  }
}

如果对象有深层的层级，则需要使用嵌套的namespace来声明深层的属性的类型：

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;

  namespace fn {
    function extend(object: any): void;
  }
}

假如jQuery下仅有fn这一个属性（没有ajax等其他属性或方法），则可以不需要嵌套namespace

declare namespace jQuery.fn {
  function extend(object: any): void;
}

（6）声明全局的接口或类型

我们可以将接口和其他的类型放到类型声明文件中，这样声明的接口或者类型就暴露成为全局的接口或类型，可以被其他文件使用

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

要注意，暴露在全局的interface或者type会作为全局类型作用域整个项目中，存在命名冲突的可能性，所以应该尽量减少全局变量或全局类型的数量，所以应该将他们放到namespace下：

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

使用这个interface的受，应该加上命名空间的前缀：

let settings: jQuery.AjaxSettings = {
  method: 'POST',
  data: {
    name: 'foo'
  }
};

（7）声明合并

如果一个对象即是一个函数，可以直接调用jquery('#foo')，又是一个对象，有子属性jQuery.ajax()，那么可以组合多了个声明语句，他们会不冲突的合并：

declare function jQuery(selector: string): any;
declare namespace jQuery {
  function ajax(url: string, settings?: any): void;
}

合并规则后面单独学习。

NPM包

找到已存在的声明文件

在给引入的NPM包创建声明文件之前，先看它的声明文件是否存在，一般来说可能存在于：

（1）与包绑定在一起，看package.json的types字段，或者看包中是否有index.d.ts声明文件。

推荐这种模式，因为不需要安装额外的其他包。我们自己创建NPM包的时候，最好也将声明与包绑定在一起

（2）发布到@types里，可以去上面提到的页面搜索对应的声明文件，然后安装即可。

这种模式一般是由第三方提供的声明文件，发布到@types中。

编写声明文件

如果没有找到声明文件，我们可以自己编写。由于一般是通过import来引入一个NPM包（假设为foo），所以声明文件的存放位置有要求。

最常用的方案是，创建一个types目录，专门用来管理自己写的声明文件，将自己编写的声明文件放到types/foo/index.d.ts中。

这种方式还需要配置tsconfig.json中的paths和baseUrl字段。

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "*": ["types/*"]
    }
  }
}

NPM声明文件包含下面几种语法：

（1）export导出变量

在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;
}

也可以使用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};

（2）export namesapce

与declare namspace一样，export namespace导出一个拥有子属性的对象

// types/foo/index.d.ts

export namespace foo {
  const name: string;
  namespace bar {
    function baz(): string;
  }
}

可以使用export default导出默认的function、class和interface，这三者可以直接导出，其他的类型需要先定义，然后在使用export default导出，一般会将这种导出放在整个声明文件的最前面：

// types/foo/index.d.ts

export default Directions;

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

UMD

针对UMD格式的模块，使用export as namespace进行导出，一般使用时，都是先有了NPM包的声明文件，再基于它添加export as namespace语句，就可以将声明好的一个变量声明为全局变量：

// types/foo/index.d.ts

export as namespace foo;
export = foo;

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

其他

可以使用declare global来在已有的声明文件中扩展全局变量的类型：

// types/foo/index.d.ts

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

export {};

要注意，此声明文件不需要导出任何东西，但是仍然导出了一个空对象，用来告诉编译器这是一个模块的声明文件，而不是全局变量的声明文件

可以使用declare module来扩展模块插件

自动生成声明文件

如果库的源码本身就是TypeScript编写的，那么使用tsc来将.ts编译为JS的过程中，可以添加declaration选项（简写-d，同时生成.d.ts声明文件

也可以在ts.config中添加declaration选项来实现：

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

这样就会由.ts文件生成.d.ts声明文件，并且输出到lib目录下：

这样做的时候，每个.ts文件都会对应一个.d.ts声明文件，这样使用方就可以再使用import导入时获得类型提示

此外，tsconfig.json中还有其他选项与自动生成声明文件相关：

• declarationDir，设置生成.d.ts文件的目录
• declarationsMap，对每个.d.ts文件都生成对应的.d.ts.map（sourcemap）文件
• emitDeclarationOnly，仅仅生成.d.ts文件，不生成.js文件

发布声明文件

如果是tsc命令自动生成的声明文件，不需要做任何其他配置，直接发布到NPM即可

如果是手动编写的，需要满足下面条件之一，才能被正确识别：

• 给package.json的types或者typings字段指定一个类型声明文件地址
• 在项目根目录下，编写index.d.ts文件
• 针对入口文件（package.json中的main字段指定的入口文件）编写一个同名不同后缀的.d.ts文件

内置对象

内置对象是指根据标准在全局作用域上存在的对象，主要分为以下几种：

（1）ECMAScript的内置对象

例如Error、Date、RegExp等，可以在TypeScript中直接将变量定义为这些类型：

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

（2）DOM和Bom的内置对象

例如Document、HTMLElement、Event、NodeList等，在TypeScript中也可以直接使用它们来定义变量类型：

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

（3）TypeScript核心库的定义文件

TypeScript核心库定义了所有浏览器环境需要用到的类型，预置在TypeScript中。当我们在使用一些常用的方法中，实际上TypeScript已经帮我们进行了类型判断：

Math.pow(10, '2');

// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

在TypeScript的核心库lib.es5.d.ts中定义了Math的接口类型：

interface Math {
  /**
   * Returns the value of a base expression taken to a specified power.
   * @param x The base value of the expression.
   * @param y The exponent value of the expression.
   */
  pow(x: number, y: number): number;
}

要注意，TypeScript核心库中不包含Node.js部分内容。

（4）Node.js

Node.js不是内置对象，如果要使用TypeScript写Node.js，需要引入第三方声明文件：

npm install @types/node --save-dev

参考

• TypeScript入门教程
• JavaScript和TypeScript中的void@segmentfault