ts快速入门手册

最新推荐文章于 2024-05-29 11:37:40 发布

金融女魔头

最新推荐文章于 2024-05-29 11:37:40 发布

阅读量2.6k

点赞数 3

文章标签： typescript

本文链接：https://blog.csdn.net/weixin_45548211/article/details/99842393

版权

ts快速入门手册

基本数据类型

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

boolean

let isDone: boolean = false;

number

和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

string

和 JavaScript 一样，可以使用双引号（ "）或单引号（'）表示字符串。

let name: string = "bob";
name = "smith";

同样也可以使用 字符串模板：

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

array

有两种方式定义数组，第一种，在数组元素类型后面使用 []：

let list: number[] = [1, 2, 3];

第二种，使用数组泛型，Array<元素类型>：

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

Tuple

Tuple 类型也是一个数组，我们可以用它来表示一个已知元素数量和元素类型的数组。比如，你可以定义一对值分别为 string和number类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

当访问一个已知索引的元素，会得到正确的类型：

console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

使用索引进行越界访问：

x[3] = 'world'; // Error， Tuple type '[string, number]' of length '2' has no element at index '2'.

调用数组的方法：

x.push("world"); // OK
x.push(true); // Error, Argument of type 'true' is not assignable to parameter of type 'string | number'.

1、使用索引来访问越界元素，编译器会报错误

2、使用 push 方法新增元素，元素的类型必须满足其联合类型

enum

enum 类型是对 javascript 标准数据类型的一个补充。

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

默认情况下，枚举成员从 0 开始赋值，每次递增步长为 1，同时，可以从值到名进行反向映射：

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

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

同时，我们也可以对枚举项进行手动赋值，当值为 number 类型时，未赋值的枚举项会接着上一个枚举项依次赋值。

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

console.log(Days.Sun);  // 2
console.log(Days.Mon);  // 3
console.log(Days.Tue);  // 5
console.log(Days.Wed);  // 6
console.log(Days.Thu);  // 7

如果枚举项的值有重复的话，typescript 不会提示错误，但是通过 value 获取 key 的话，key 是最后一次的枚举项：

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

在使用的时候，最好不要出现覆盖的情况。

手动赋值的枚举项可以不是 number 类型，但是，紧跟着的枚举项必须给初始值，否则会报错。

enum Days { Sun = "s", Mon = 2, Tue = 1, Wed, Thu, Fri, Sat };

枚举类型与数字类型兼容，并且数字类型与枚举类型兼容。不同枚举类型之间是不兼容的。

enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let status = Status.Ready;
status = Color.Green;  // Error

any

any 表示可以赋值为任意类型。

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

针对未声明类型的变量，它会被识别为 any：

let something;
something = 'seven';
something = 7;

void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

function bar(): void {}

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

什么是类型推论

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7; // error TS2322: Type '7' is not assignable to type 'string'.

事实上，它等价于：

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

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

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

高级类型

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

索引类型查询操作符keyof

interface Person {
	name:string;
    age:number;
}
let personProps:keyof Person; // personProps的类型就是Person内的键值 "name" | "age"

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

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

联合类型使用 | 分隔每个类型。

访问联合类型的属性和方法

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

function getLength(something: string | number): number {
  return something.length;
}
// error TS2339: Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'.

上例中，length 不是 string 和 number 的共有属性，所以编译器报错。

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

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

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

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length);
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // error TS2339: Property 'length' does not exist on type 'number'.

在上例中，第 2 行 myFavoriteNumber 被推断成 string 类型，因此访问其 length 属性不会报错。而第 4 行被推断成 number，访问 length 就报错了。

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法

<type> value 

// or

value as type

在 tsx 中必须使用后面一种。

前面在联合类型中我们提到过，当 Typescript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

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

// error TS2339: Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'.

而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，比如：

function getLength(something: string | number): number {
  if (something.length) {
    return something.length;
  } else {
    return something.toString().length;
  }
}

// error TS2339: Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'.

在上例中，访问 something.length 的时候会报错，因为 length 并不是公共属性。此时，我们就可以使用类型断言，将 something 断言成 string：

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

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：

function toBoolean(something: string | number): boolean {
  return <boolean>something;
}

// error TS2352: Conversion of type 'string | number' to type 'boolean' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'number' is not comparable to type 'boolean'.

如果编译器不能够去除 null或 undefined，你可以使用类型断言手动去除。语法是添加 !后缀：

function fixed(name:string | null):string {
	function postfix(epithet:string) {
		return name!.charAt(0) + '. the' + epithet;
	}
	name = name || "Bob";
	return postfix("great")
}

类型别名

类型别名用来给一个类型起个新名字，常用语联合类型。

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

一个重要的区别是类型别名不能被 extends和 implements（自己也不能 extends和 implements其它类型）。因为 [软件中的对象应该对于扩展是开放的，但是对于修改是封闭的]，你应该尽量去使用接口代替类型别名。
如果你无法通过接口来描述一个类型并且需要使用联合类型或元组类型，这时通常会使用类型别名。

字符串字面量类型

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

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element | null , event: EventNames) {
  // do something
}

handleEvent(document.querySelector('hello'), 'scroll');
handleEvent(document.querySelector('world'), 'dbclick'); // error TS2345: Argument of type '"dbclick"' is not assignable to parameter of type 'EventNames'.

上例中，我们使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种。

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

函数

声明式函数

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单：

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

输入多余的（或者少于要求的）参数，都是不被允许的。

sum(1, 2, 3); // error TS2554: Expected 2 arguments, but got 3.
sum(1); //Expected 2 arguments, but got 1.

函数表达式

如果要我们现在写一个对函数表达式（Function Expression）的定义，可能会写成这样：

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

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行类型定义，而等号左边的 sum，是通过赋值操作进行 类型推论 推断出来的。如果我们需要手动给 sum 添加类型，则应该是这样：

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

不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。

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

使用接口定义函数类型

我们可以通过接口来定义函数的类型：

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

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

可选参数

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？

与接口中的可选属性类似，我们用 ? 表示可选的参数：

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

需要注意的是，可选参数必须接在确定参数后面。换句话说，可选参数后面不允许再出现确定参数。

function buildName(firstName?: string, lastName: string) {
  if (firstName) {
    return firstName + ' ' + lastName;
  } else {
    return lastName;
  }
}
// error TS1016: A required parameter cannot follow an optional parameter.

参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数：

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

此时就不受「可选参数必须接在必需参数后面」的限制了：

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

剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

function push(array, ...items) {
  items.forEach(function (item) {
    array.push(item);
  });
}

事实上，items 是一个数组，所以我们可以用数组的类型来定义：

function push<A, B>(array: A[], ...items: B[]): void {
  items.forEach(item => {
    console.log(item);
  })
}

重载

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

比如，我们需要实现一个函数 reverse，输入数字 123 时，返回反转的数字 321，输入字符串 hello 时，返回反转的字符串 olleh，利用联合类型，我们可以这样实现：

type Reverse = string | number;

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

然而这样做有一个缺点，就是不能精确的表达，输入数字的时候，返回也是数字，输入字符串的时候，也应该返回字符串。这时，我们可以使用重载定义多个 reverse 函数类型：

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

以上代码，我们重复多次定义了 reverse 函数，前几次都是函数的定义，最后一次是函数的实现，这时，在编译阶段的提示中，就可以正确的看到前两个提示了。

TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

接口

在 typescript 中，我们可以使用 interface 来定义复杂数据类型，用来描述形状或抽象行为。如：

interface IPerson {
  name: string;
  age: number;
  sayName(): void;
}

const p: IPerson = {
  name: "tom",
  age: 21,
  sayName() {
    console.log(this.name);
  }
};

接口名称首字母大写，同时加上 I 前缀。

变量 p 的类型是 IPerson，这样就约束了它的数据结构必须和 IPerson 保持一致，多定义和少定义都是不被允许的。

赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时，我们希望不要完全匹配接口中的属性，那么可以用可选属性：

interface IPerson {
  name: string;
  age: number;
  gender?: string; // 可选属性
  sayName(): void;
}

const p: IPerson = {
  name: "tom",
  age: 21,
  sayName() {
    console.log(this.name);
  }
};

在进行赋值时， gender 属性是可以不存在的。当然，这时仍然不允许添加接口中未定义的属性。

只读属性

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

interface IPerson {
  readonly id: number;	// 只读属性
  name: string;
  age: number;
  gender?: string;
  sayName(): void;
}

只读约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。 因此，在对象初始化的时候，必须赋值，之后，这个属性就不能再赋值。

const p: IPerson = {
  id: 1,
  name: "tom",
  age: 21,
  sayName() {
    console.log(this.name);
  }
};

const vs readonly：变量用 const，对象属性用 readonly

任意属性

有时候，我们希望一个接口允许有任意属性：

interface IPerson {
  readonly id: number;
  name: string;
  age: number;
  gender?: string;
  sayName(): void;
  [propsName: string]: any; // 任意属性
}

[propsName: string]: any;通过 字符串索引签名 的方式，我们就可以给 IPerson 类型的变量上赋值任意数量的其他类型。

const p: IPerson = {
  id: 1,
  name: "tom",
  age: 21,
  email: "102376640@qq.com", // 任意属性
  phone: 1234567890, // 任意属性
  sayName() {
    console.log(this.name);
  },
};

email 和 phone 属性没有在 IPerson 中显性定义，但是编译器不会报错，这是因为我们定义了字符串索引签名。

一旦定义字符串索引签名，那么接口中的确定属性和可选属性的类型必须是索引签名类型的子集。

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

// Property 'age' of type 'number | undefined' is not assignable to string index type 'string'.ts(2411)
// (property) IPerson.age?: number | undefined

[propName: string]: string;字符串索引签名类型为 string，但是可选属性 age 是 number 类型，number 并不是 string 的子集，因此编译报错。

表示数组

接口除了可以用来描述对象以外，还可以用来描述数组类型，也就是数字索引签名：

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

变量 fibonacci 的类型是 NumberArray，如果还想调用数组的方法，则：

interface NumberArray<T> extends Array<T> {
  [index: number]: T;
}
let fibonacci: NumberArray<number> = [1, 1, 2, 3, 5];

表示函数

接口还可以用来描述函数，约束参数的个数，类型以及返回值：

interface ISearchFunc {
  (source: string, subString: string): boolean
}

let mySearch: ISearchFunc = (source, subString) => {
  let result = source.search(subString);
  return result > -1;
}

类

修饰符

TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。

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

例子：

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

let a = new Animal('Jack');
console.log(a.name);
a.name = 'Tom';
console.log(a.name);

上面的例子中，name 被设置为 public，所以直接访问实例的 name 属性是允许的。如果希望 name不被外部访问，这时候就可以用 private：

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

let a = new Animal('Jack');
console.log(a.name); // error TS2341: Property 'name' is private and only accessible within class 'Animal'.
a.name = 'Tom'; // error TS2341: Property 'name' is private and only accessible within class 'Animal'.
console.log(a.name); // error TS2341: Property 'name' is private and only accessible within class 'Animal'.

使用 private 修饰的属性或方法，在子类中也是不允许访问的：

class Cat extends Animal {
  constructor(name: string) {
    super(name);
    console.log(this.name); // error TS2341: Property 'name' is private and only accessible within class 'Animal'.
  }
}

如果使用 protected 修饰，则允许在子类中访问：

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

class Cat extends Animal {
  constructor(name: string) {
    super(name);
    console.log(this.name);
  }
}

抽象类

abstract 用于定义抽象类和其中的抽象方法，抽象类是不允许被实例化的：

abstract class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract sayHello(): void;
  sayName() {
    console.log(this.name);
  }
}

new Animal("Jack"); // error TS2511: Cannot create an instance of an abstract class.

其次，抽象类中的抽象方法，必须被子类实现：

abstract class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract sayHello(): void;
  sayName() {
    console.log(this.name);
  }
}

class Cat extends Animal {
  sayHello(): void {
    console.log("hello");
  }
}

const cat: Cat = new Cat("Tom");
cat.sayName();	// ok
cat.sayHello();	// ok

类与接口

实现接口

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

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

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

上例中，Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯。

接口继承接口

接口与接口之间可以是继承关系：

interface Alarm {
  alert(): void;
}

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

接口继承类

接口也可以继承类：

class Point {
  x: number;
  y: number;
}

interface Point3d extends Point {
  z: number;
}

let point3d: Point3d = { x: 1, y: 2, z: 3 };

混合类型

我们知道，接口可以用来定义一个函数：

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

有时候，一个函数还可以有自己的属性和方法：

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  const counter: Counter = start => start.toString();
  counter.interval = 123;
  counter.reset = () => { }
  return counter;
}

let c: Counter = getCounter();
c(10);
c.reset();
c.interval = 20;

泛型

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

简单的例子

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

type CreateArray = (length: number, value: any) => Array<any>;

let createArray: CreateArray = (length, value) => {
  let result = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

上例中，我们使用了数组泛型来定义返回值的类型。这段代码不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：Array<any>允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该为 value 的类型，这时候，泛型就派上用场了：

type CreateArray = <T>(length: number, value: T) => Array<T>;

// 箭头函数
const createArray: CreateArray = <T>(length: number, value: T): Array<T> => {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

// 函数表达式
const createArray: CreateArray = function <T>(length: number, value: T) {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

// 声明式函数
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<number>(3, 1); // ['x', 'x', 'x']

在上例中，我们在函数中添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array[T] 中即可使用了。在调用的时候，指定他具体类型为 string，当然，也可以不手动指定，而让类型推论自动推算出来：

createArray(3, 1); // ['x', 'x', 'x']

多个类型参数

定义泛型的时候，可以次定义多个类型参数：

type Swap = <T, U>(tuple: [T, U]) => [U, T];
const swap: Swap = <T, U>([p1, p2]: [T, U]): [U, T] => [p2, p1];
const result = swap([1, "2"]);

在上例中，我们定义了一个 swap 函数，用来交换输入的 tuple。

泛型约束

在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：

function loggingIdentity<T>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// error TS2339: Property 'length' does not exist on type 'T'.

上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。这时，我们可以对泛型进行约束，只允许这个函数传入包含 length 属性的变量。这就是泛型约束：

interface ILengthwise {
  length: number;
}

function loggingIdentity<T extends ILengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

我们使用 extends 约束了泛型 T 必须符合接口 ILengthwise 的定义，也就是必须包含 length 属性。那么这时，如果调用 loggingIdentity 的时候，传入的 arg 不包含 length，那么在编译阶段就会报错了:

loggingIdentity(7); // error TS2345: Argument of type '7' is not assignable to parameter of type 'ILengthwise'.
loggingIdentity('7'); // OK

多个类型参数之间也可以相互约束：

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

上例中，我们使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段。

泛型接口

我们可以使用接口的方式来定义一个函数：

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function (source: string, subString: string) {
  return source.search(subString) !== -1;
}

当然也可以使用含有泛型的接口来定义函数：

interface CreateArrayFunc {
  <T>(length: number, value: T): Array<T>;
}

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

进一步，我们还可以把泛型参数提到接口名上：

interface CreateArrayFunc<T> {
  (length: number, value: T): Array<T>;
}

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

createArray(3, "x");

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

泛型类

与泛型接口类似，泛型也可以用于类的类型定义中：

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = (x, y) => x + y;

泛型参数的默认类型

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

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

迭代器与生成器

可迭代性

当一个对象实现了Symbol.iterator属性时，我们认为它是可迭代的。

for … of : 迭代键所对应的值；

for … in : 迭代对象的键；

JSX

基本用法

给文件一个 .tsx扩展名；
启用 jsx 选项；

三种模式

模式	输出	输出文件扩展名
preserve		.jsx
react	React.createElement(“div”)	.js
react-native		.js

`as` 操作符

在 JSX 语法中，只能使用 as 作为断言操作符。

类型检查

Typescript 使用与 React 相同的规范来区别它们。固有元素总是以一个小写字母开头，基于值的元素总是以一个大写字母开头。

固有元素

固有元素使用特殊的接口 JSX.IntrinsicElement来查找。

declare namespace JSX {
	interface ItrinsicElements {
        [elemName: string]: any;
    }
}

嵌入的表达式

JSX 允许你使用 { }标签来内嵌表达式。

三斜线指令

三斜线指令仅可放在包含的它的文件的最顶端。

/// <reference path="..." /> 用于声明文件间的依赖。

三斜线引用告诉编译器在编译过程中要引入的额外的文件。

JSCod

@type

/**
 * @type {string}
 */
var s;

/** @type {Window} */
var win;

/** @type {PromiseLike<string>} */
var promisedString;

// You can specify an HTML Element with DOM properties
/** @type {HTMLElement} */
var myElement = document.querySelector(selector);
element.dataset.myData = '';
/**
 * @type {(string | boolean)} 制定联合类型，括号可选
 */
var sb;

@param（or @arg or @argument）
@returns（or @return）
@typedof
@callback
@template
@class（or @constructor）
@this
@extends（@arguments）
@enum

声明文件

我们在开发过程中不可避免引入其它第三方的库，虽然通过直接引用，可以调用库提供的方法，但是却无法使用 Typescript 类型检查等特性功能。为了解决这个问题，需要将这些库里的函数去掉方法体，然后导出类型声明，这样就产生了一个描述库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

声明语句

假如我们想使用第三方库 jquery，一种常见的方式是在 html 中通过 script 标签引入 jquery，然后就可以使用全局变量 $ 或 jQuery了。比如，我们通常这样获取一个 id 是 foo 的元素：

$('#foo');
// or
jQuery('#foo'); //  error TS2581: Cannot find name '$'.

但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么东西。这时，我们需要使用 declare var 来定义它的类型：

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

上例中，declare var 并没有真的定义一个变量，只是定义了全局变量 $ 和 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。他的编译结果是：

$("#id");

除了 declare var 之外，还有其他很多种声明语句，稍后介绍。

声明文件

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

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

声明文件必须以 .d.ts 为后缀。一般来说，ts 会解析项目中所有的 *.ts 文件，当然也包含以 .d.ts 结尾的文件。所以，当我们将 jQuery.d.ts 放到项目中时，其他所有的 *.ts 文件就都可以获得 $ 的类型定义了。这里只演示了全局变量这种模式的声明文件，假如是通过模块导入的方式使用第三方库的话，那么引入声明文件又是另一种方式了。

第三方声明文件

当然，jQuery 的声明文件不需要我们定义了，社区已经帮我们定义好了：jquery.d.ts。我们可以下载下来直接使用，但是更推荐的是使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 为例：

npm install @types/jquery --save-dev

你可以在这个页面搜索需要的声明文件，DefinitelyTyped。

自定义声明文件

当一个第三方库没有提供声明文件时，我们就需要手动书写声明文件。前面只介绍了最简单的声明文件内容，而真正书写一个声明文件并不是一件简单的事。以下会详细介绍如何书写声明文件。在不同的场景下，声明文件的内容和使用方式会有所区别。

库的使用场景主要由以下几种：

全局变量：通过 <script> 标签引入第三方库，注入全局变量。
npm 包：通过 import ** from xx 导入，符合 ES6 模块化规范。
UMD 库：即可以通过 <script> 标签引入，也可以通过 import 引入。
直接扩展全局变量：通过 <script> 标签引入后，改变一个全局变量的结构。String.prototype 新增了一个方法。
通过导入扩展全局变量：通过 import 导入后，可以改变一个全局变量的结构。

全局变量

全局变量是最简单的一种场景，之前的示例中就是通过 <script> 标签引入 jQuery，注入全局变量 $ 和 jQuery。

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

├── README.md
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

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

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明全局对象
interface 和 type 声明全局类型

declare var

在所有的的声明语句中，declare var 是最简单的，它可以用来定义一个全局变量的类型。与其类似的是，还有 declare let 和 declare const，使用 let 与使用 var 没什么区别，但是使用 const 定义时，表示此时的全局变量是一个常量。一般来说，全局变量都是禁止修改的，所以大部分情况都应该使用 const 而不是 var 或 let。需要注意的是，在声明语句中只能定义类型，切勿在声明语句中定义具体的值。

// 全局变量foo包含了存在组件总数。
declare var foo: number;

declare function

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

declare function jQuery(selector: string): any;

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

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

declare class

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

declare class Animal {
  name: string;
  constructor(name: string);
  sayName(): void
}

同样的，declare class 语句也只能用来定义类型，不能用来定义具体的值，比如定义 sayName 方法的具体实现则会报错：

declare class Animal {
  name: string;
  constructor(name: string);
  sayName() { } // error TS1183: An implementation cannot be declared in ambient contexts.
}

declare enum

使用 declare enum 定义的枚举类型也称作外部枚举，如：

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

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

其中，Directions 是由第三方库定义好的全局变量。

declare namespace

namespace 是 ts 早期为了解决模块化而创造出来的关键字，中文称为命名空间。由于历史原因，在早期还没有 ES6 的时候，ts 提供了一种模块化方案，使用 module 关键字表示内部模块。但由于后来 ES6 也使用了 module 关键字， ts 为了兼容 ES6，使用 namespace 替代了自己的 module，更名为命名空间。随着 ES6 的广泛应用，现在已经不建议再使用 ts 中的 namespace，而推荐使用 ES6 的模块化方案，故我们不再需要学习 namespace 的使用了。namespace 被淘汰了，但是在声明文件中，declare namespace 还是比较常用的，它用来表示全局变量是一个对象，包含很多属性。

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

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

jQuery.ajax('/api/get_something');

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

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

jQuery.ajax('/api/get_something');
console.log(jQuery.version);
const e = new jQuery.Event();
e.blur(jQuery.EventType.CustomClick);

在编译之后，declare namespace 内的所有内容都会被删除。

嵌套的命名空间

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

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

jQuery.ajax('/api/get_something');
jQuery.fn.extend({
  check: function() {
      return this.each(() => {
          this.checked = true;
      });
  }
});

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

declare namespace jQuery.fn {
  function extend(object: any): void;
}
  
jQuery.fn.extend({
  check: function () {
    return this.each(() => {
      this.checked = true;
    });
  }
});

interface 和 type

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

interface IAjaxSetting {
  method: "GET" | "POST";
  data?: any;
}

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

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

const setting: IAjaxSetting = {
  method: "GET"
};

jQuery.ajax('/api/post_something', setting);

type 与 interface 类似，不在赘述。

防止命名冲突

暴露在最外层的 interface 或 type 会作为全局类型作用于整个项目中，我们应该尽可能的减少全局变量或全局类型的数量，因此，将他们放在 namespace 下：

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

那么，在使用 IAjaxSetting 接口的时候，也应该加上 jQuery 前缀了：

const setting: jQuery.IAjaxSetting = {
  method: "GET"
};

声明合并

jQuery 即是一个函数，可以直接调用，也可以是一个对象，拥有子属性，则我们可以组合多个声明语句，他们会不冲突的合并起来：

declare function jQuery(selector: string): any;
declare function jQuery(domReadyCallback: () => any): any;
declare namespace jQuery {
  interface IAjaxSetting {
    method: "GET" | "POST";
    data?: any;
  }
  function ajax(url: string, settings?: IAjaxSetting): void;
}
  
const setting: jQuery.IAjaxSetting = {
  method: "GET"
};
jQuery("#app");
jQuery(() => { });
jQuery.ajax('/api/post_something', setting);

npm 包

一般我们通过 import xxx from "xxx" 导入一个 npm 包，这是符合 ES6 模块规范的。当我们尝试给一个 npm 包创建声明文件之前，首先看看它的声明文件是否存在。一般来说，npm 包的声明文件可能存在于两个地方：

与该 npm 包绑定在一起。判断依据是 package.json 中有 types 字段，或者有一个 index.d.ts 声明文件。这种模式不需要额外安装其他包，是最为推荐的，所以以后我们自己创建 npm 包的时候，最好也将声明文件与 npm 包绑定在一起。
发布到了 @types 里只要尝试安装一下对应的包就知道是否存在，安装命令是 npm install @types/xxx --save-dev。这种模式一般是由于 npm 包的维护者没有提供声明文件，所以只能由其他人将声明文件发布到 @types 里了。

假如以上两种方式都没有找到对应的声明文件，那么我们就需要自己为它写声明文件了。由于是通过 import 语句导入的模块，所以声明文件存放的位置也有所约束，一般有两种方案：

创建一个 node_modules/@types/xxx/index.d.ts 文件，存放 xxx 模块的声明文件。这种方式不需要额外的配置，但是 node_modules 目录不稳定，代码也没有被保存到仓库中，无法回溯版本，有不小心被删除的风险。
创建一个 types 目录，专门用来管理自己写的声明文件，将 xxx 的声明文件放到 types/xxx/index.d.ts 中。这种方式需要配置下 tsconfig.json 的 paths 和 baseUrl 字段。

目录结构：

├── README.md
├── src
|  └── index.ts
├── types
|  └── xxx
|     └── index.d.ts
└── tsconfig.json

tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",	 /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "baseUrl": "./",
        "paths": {
            "*" : ["types/*"]
        }
    }
}

如何配置之后，通过 import 导入 xxx 的时候，也会去 types 目录下寻找对应的模块声明文件了。

module 配置可以有很多种选项，不同的选项会影响到导入导出模式。

不管采用了以上两种方式中的哪一种，我都强烈建议大家将书写好的声明文件（通过给原作者发 pr，或者直接提交到 @types 里）发布到开源社区中，享受了这么多社区的优秀的资源，就应该在力所能及的时候给出一些回馈。只有所有人都参与进来，才能让 ts 社区更加繁荣。

export

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

export 的语法与非声明文件中的语法类似，区别仅在于声明文件中禁止定义具体的值：

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 一次性导出。上例的声明文件可以等价的改写成：

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

与 declare namespace 类似，export namespace 也是用来导出一个拥有子属性的对象：

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

// src/main.ts
import { foo } from "./types/foo/index.d"
console.log(foo.name);
foo.bar.baz();

export default

在 ES6 模块系统中，使用 export default 可以导出一个默认值，引入方可以使用 import foo from "foo"，而不是使用 import { foo } from "foo" 来导入这个默认值。在类型声明文件中，export default 用来导出默认值的类型：

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

// src/index.ts
import foo from 'foo';
foo();

注意，只有 function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出：

export default enum Directions {  // error TS1109: Expression expected.
  Up,
  Down,
  Left,
  Right
}

上例中，export default enum 是错误的语法，需要先使用 declare enum 定义出来，再使用 export default 导出：

export default Directions;

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

如上，针对这种默认导出，我们一般会将导出语句房子啊整个声明文件的最前面。

金融女魔头

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
ts快速入门手册

ts快速入门手册基本数据类型TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。booleanlet isDone: boolean = false;number和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。这些浮点数的类型是 number。除了支持十进制和十六进制字面量，TypeScri...
复制链接

扫一扫