TypeScript速成手册

任意类型

let a: any = '123';
a = 123;
a.setColor('red');

设置变量为任意类型后,就可以访问该变量的任意属性,包括运行时不存在的属性~

联合类型

let a: number | string;

联合类型只能访问公共方法。

对象类型

interface props {
  id: string;
  count: number;
  onClick?: (id: string) => void; // 可选属性
  [propName: string]: string; // 任意属性
}

对象类型支持可选属性任意属性

数组类型

let arr: number[] = [1, 2, 3];
let arr: any[] = [1, '2', 3];

函数类型

函数声明

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

函数表达式

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

断言

(windows as any).location

不能滥用 as 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 扩展模块
// src/jQuery.d.ts
declare var jQuery: (selector: string) => any;

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

内置对象

let b: Boolean = new Boolean(1);
let body: HTMLElement = document.body;

字面量类型

type EventNames = 'click' | 'scroll' | 'mousemove';

元组

let tom: [string, number] = ['Tom', 25];
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'.

枚举

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

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

编译结果为:

let directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

class A {
  public name: string;
  protected constructor() {
    this.name = 'A';
  }
}

class B extends A {
  constructor() {
    super();
    this.name = 'B';
  }
}

const a = new A();

Constructor of class ‘A’ is protected and only accessible within the class declaration.ts(2674)protected 的构造函数是不能实例化的,只能被继承 **抽象类是不允许实例化的,父类继承了抽象类,抽象类里的抽象方法必须在父类实现。** 类的类型

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHi(): string {
    return `My name is ${this.name}`;
  }
}

let a: Animal = new Animal('Jack');

类实现接口

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

**接口还可以继承接口和类。**

泛型

function swap<T, U>(arr: [T, U]): [U, T] {
  return [arr[1], arr[0]];
}

swap([7, 'seven']); // ['seven', 7]