TypeScript 笔记

ZRoger

Apr 14, 2020

#typescript

TypeScript 学习笔记：从基础类型、解构与展开，到接口的完整梳理。

这个系列是我系统过一遍 TypeScript 时留下的笔记。

第一篇把基础类型挨个走一遍，从 boolean、number、string 到元组、枚举，再到 any、void、never 和类型断言；
第二篇讲解构与展开，覆盖数组与对象解构、属性重命名与默认值，以及展开运算符的几种用法；第三篇则是接口的完整梳理——可选属性、只读属性、额外属性检查、函数类型、可索引类型、类类型，以及接口的继承与混合类型。

TypeScript 基础类型

ZRoger

Apr 8, 2020

#typescript #javascript

TypeScript 基础类型速览：boolean、number、string、数组、元组、枚举，以及 any、void、null/undefined、never、object 与类型断言。

TypeScript 支持与 JavaScript 几乎相同的数据类型，同时还提供了枚举类型

布尔值 boolean

1
let isDone: boolean = false;

数字 number

支持二进制、八进制、十进制、十六进制

1
let decLiteral: number = 6;
2
let hexLiteral: number = 0xf00d;
3
let binaryLiteral: number = 0b1010;
4
let octalLiteral: number = 0o744;

字符串 string

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

可以使用 模板字符串 定义多行文本和内嵌表达式，需要被 **** 包围，以 ${ expr }`嵌入表达式

1
let name: string = `Gene`;
2
let age: number = 37;
3
let sentence: string = `Hello, my name is ${ name }. I'll be ${ age + 1 } years old next month.`;

也可以这样写：

1
let sentence: string = "Hello, my name is " + name  + ". I'll be " + (age + 1) + " years old next month.";

数组 [ ] / Array< >

第一种方式，在类型后面接上[ ]，以此声明数组

1
let list: number[] = [1,2,3];
2
let strList: string[] = ['aa','bb','cc'];
3
let booleanList: boolean[] = [true,false,true];

第二种方式，泛型数组，Array<元素类型>

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

元组 Tuple

表示一个已知元素数量和类型的数组，各元素类型可不同

1
// Declare a tuple type
2
let x: [string, number];
3
// Initialize it
4
x = ['hello', 10]; // OK
5
// Initialize it incorrectly
6
x = [10, 'hello']; // Error

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

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

当访问一个越界的元素，会使用联合类型替代：

1
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
2

3
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
4

5
x[6] = true; // Error, 布尔不是(string | number)类型

枚举 enum

1
enum Color {Red, Green, Blue}
2
let c: Color = Color.Green;

默认情况下，从0开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1开始编号：

1
enum Color {Red = 1, Green, Blue}
2
let c: Color = Color.Green;

或者，全部都采用手动赋值：

1
enum Color {Red = 1, Green = 2, Blue = 4}
2
let c: Color = Color.Green;

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

1
enum Color {Red = 1, Green, Blue}
2
let colorName: string = Color[2];
3

4
console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

any

1
let notSure: any = 4;
2
notSure = "maybe a string instead";
3
notSure = false; // okay, definitely a boolean

any 与 Object 虽然相似，但是也有不同之处：

1
let notSure: any = 4;
2
notSure.ifItExists(); // okay, if It Exists might exist at runtime
3
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
4

5
let prettySure: Object = 4;
6
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

当你只知道一部分数据的类型时，any类型也是有用的

1
let list: any[] = [1, true, "free"];
2

3
list[1] = 100;

void

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

1
function warnUser(): void {
2
    console.log("This is my warning message");
3
}

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

1
let unusable: void = undefined;

Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。和 void相似，它们的本身的类型用处不是很大：

1
// Not much else we can assign to these variables!
2
let u: undefined = undefined;
3
let n: null = null;

默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。

然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。这能避免很多常见的问题。也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。

Never

never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

下面是一些返回never类型的函数：

1
// 返回never的函数必须存在无法达到的终点
2
function error(message: string): never {
3
    throw new Error(message);
4
}
5

6
// 推断的返回值类型为never
7
function fail() {
8
    return error("Something failed");
9
}
10

11
// 返回never的函数必须存在无法达到的终点
12
function infiniteLoop(): never {
13
    while (true) {
14
    }
15
}

Object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API

1
declare function create(o: object | null): void;
2

3
create({ prop: 0 }); // OK
4
create(null); // OK
5

6
create(42); // Error
7
create("string"); // Error
8
create(false); // Error
9
create(undefined); // Error

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。其一是“尖括号”语法：

1
let someValue: any = "this is a string";
2

3
let strLength: number = (<string>someValue).length;

另一个为as语法：

1
let someValue: any = "this is a string";
2

3
let strLength: number = (someValue as string).length;

两种形式是等价的。至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

TypeScript 解构与展开

ZRoger

Apr 8, 2020

#typescript #javascript

TypeScript 的解构与展开：数组解构、对象解构与属性重命名/默认值、函数声明解构，以及展开运算符的用法。

解构赋值语法是一种JavaScript表达式，可以将数组中的值或对象中的属性解压缩为不同的变量。

解构数组

最简单的解构莫过于数组的解构赋值了：

1
let input = [1, 2];
2
let [first, second] = input;
3
console.log(first); // outputs 1
4
console.log(second); // outputs 2

这创建了2个命名变量 first 和 second。相当于使用了索引，但更为方便：

1
first = input[0];
2
second = input[1];

解构作用于已声明的变量会更好：

1
// swap variables
2
[first, second] = [second, first];

作用于函数参数：

1
function f([first, second]: [number, number]) {
2
    console.log(first);
3
    console.log(second);
4
}
5
f(input);

你可以在数组里使用...语法创建剩余变量：

1
let [first, ...rest] = [1, 2, 3, 4];
2
console.log(first); // outputs 1
3
console.log(rest); // outputs [ 2, 3, 4 ]

当然，由于是JavaScript, 你可以忽略你不关心的尾随元素：

1
let [first] = [1, 2, 3, 4];
2
console.log(first); // outputs 1

或其它元素：

1
let [, second, , fourth] = [1, 2, 3, 4];

对象解构

你也可以解构对象：

1
let o = {
2
    a: "foo",
3
    b: 12,
4
    c: "bar"
5
};
6
let { a, b } = o;

这通过 o.a and o.b 创建了 a 和 b 。注意，如果你不需要 c 你可以忽略它。

就像数组解构，你可以用没有声明的赋值：

1
({ a, b } = { a: "baz", b: 101 });

注意，我们需要用括号将它括起来，因为Javascript通常会将以 { 起始的语句解析为一个块。

你可以在对象里使用...语法创建剩余变量：

1
let { a, ...passthrough } = o;
2
let total = passthrough.b + passthrough.c.length;

属性重命名

你也可以给属性以不同的名字：

1
let { a: newName1, b: newName2 } = o;

这里的语法开始变得混乱。你可以将 a: newName1 读做 “a 作为 newName1”。方向是从左到右，好像你写成了以下样子：

1
let newName1 = o.a;
2
let newName2 = o.b;

令人困惑的是，这里的冒号不是指示类型的。如果你想指定它的类型，仍然需要在其后写上完整的模式。

1
let {a, b}: {a: string, b: number} = o;

默认值

默认值可以让你在属性为 undefined 时使用缺省值：

1
function keepWholeObject(wholeObject: { a: string, b?: number }) {
2
    let { a, b = 1001 } = wholeObject;
3
}

现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。

函数声明

解构也能用于函数声明。看以下简单的情况：

1
type C = { a: string, b?: number }
2
function f({ a, b }: C): void {
3
    // ...
4
}

但是，通常情况下更多的是指定默认值，解构默认值有些棘手。首先，你需要在默认值之前设置其格式。

1
function f({ a="", b=0 } = {}): void {
2
    // ...
3
}
4
f();

上面的代码是一个类型推断的例子，将在本手册后文介绍。

其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。要知道 C 的定义有一个 b 可选属性：

1
function f({ a, b = 0 } = { a: "" }): void {
2
    // ...
3
}
4
f({ a: "yes" }); // ok, default b = 0
5
f(); // ok, default to {a: ""}, which then defaults b = 0
6
f({}); // error, 'a' is required if you supply an argument

要小心使用解构。从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。解构表达式要尽量保持小而简单。你自己也可以直接使用解构将会生成的赋值表达式。

展开

展开操作符正与解构相反。它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。例如：

1
let first = [1, 2];
2
let second = [3, 4];
3
let bothPlus = [0, ...first, ...second, 5];

这会令bothPlus的值为[0, 1, 2, 3, 4, 5]。展开操作创建了 first和second的一份浅拷贝。它们不会被展开操作所改变。

你还可以展开对象：

1
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
2
let search = { ...defaults, food: "rich" };

search的值为{ food: "rich", price: "$$", ambiance: "noisy" }。对象的展开比数组的展开要复杂的多。像数组展开一样，它是从左至右进行处理，但结果仍为对象。这就意味着出现在展开对象后面的属性会覆盖前面的属性。因此，如果我们修改上面的例子，在结尾处进行展开的话：

1
let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };
2
let search = { food: "rich", ...defaults };

那么，defaults里的food属性会重写food: "rich"，在这里这并不是我们想要的结果。

对象展开还有其它一些意想不到的限制。首先，它仅包含对象自身的可枚举属性。大体上是说当你展开一个对象实例时，你会丢失其方法：

1
class C {
2
  p = 12;
3
  m() {
4
  }
5
}
6
let c = new C();
7
let clone = { ...c };
8
clone.p; // ok
9
clone.m(); // error!

其次，TypeScript编译器不允许展开泛型函数上的类型参数。这个特性会在TypeScript的未来版本中考虑实现。

资料来源

1、变量声明 https://www.tslang.cn/docs/handbook/variable-declarations.html

2、表达式-解构分配 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

3、变量的解构赋值 https://es6.ruanyifeng.com/#docs/destructuring

TypeScript 接口

ZRoger

Apr 14, 2020

#typescript #javascript

TypeScript 接口详解：可选属性、只读属性、额外属性检查、函数类型、可索引类型、类类型，以及接口的继承与混合类型。

TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口初探

下面通过一个简单示例来观察接口是如何工作的：

1
function printLabel(labelledObj: { label: string }) {
2
  console.log(labelledObj.label);
3
}
4

5
let myObj = { size: 10, label: "Size 10 Object" };
6
printLabel(myObj);

类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。然而，有些时候TypeScript却并不会这么宽松，我们下面会稍做讲解。

下面我们重写上面的例子，这次使用接口来描述：必须包含一个label属性且类型为string：

1
interface LabelledValue {
2
  label: string;
3
}
4

5
function printLabel(labelledObj: LabelledValue) {
6
  console.log(labelledObj.label);
7
}
8

9
let myObj = {size: 10, label: "Size 10 Object"};
10
printLabel(myObj);

LabelledValue接口就好比一个名字，用来描述上面例子里的要求。它代表了有一个 label属性且类型为string的对象。需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

下面是应用了“option bags”的例子：

1
interface SquareConfig {
2
  color?: string;
3
  width?: number;
4
}
5

6
function createSquare(config: SquareConfig): {color: string; area: number} {
7
  let newSquare = {color: "white", area: 100};
8
  if (config.color) {
9
    newSquare.color = config.color;
10
  }
11
  if (config.width) {
12
    newSquare.area = config.width * config.width;
13
  }
14
  return newSquare;
15
}
16

17
let mySquare = createSquare({color: "black"});

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。比如，我们故意将 createSquare里的color属性名拼错，就会得到一个错误提示：

1
interface SquareConfig {
2
  color?: string;
3
  width?: number;
4
}
5

6
function createSquare(config: SquareConfig): { color: string; area: number } {
7
  let newSquare = {color: "white", area: 100};
8
  if (config.clor) {
9
    // Error: Property 'clor' does not exist on type 'SquareConfig'
10
    newSquare.color = config.clor;
11
  }
12
  if (config.width) {
13
    newSquare.area = config.width * config.width;
14
  }
15
  return newSquare;
16
}
17

18
let mySquare = createSquare({color: "black"});

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly来指定只读属性:

1
interface Point {
2
    readonly x: number;
3
    readonly y: number;
4
}

你可以通过赋值一个对象字面量来构造一个Point。赋值后， x和y再也不能被改变了。

1
let p1: Point = { x: 10, y: 20 };
2
p1.x = 5; // error!

TypeScript具有ReadonlyArray类型，它与Array相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

1
let a: number[] = [1, 2, 3, 4];
2
let ro: ReadonlyArray<number> = a;
3
ro[0] = 12; // error!
4
ro.push(5); // error!
5
ro.length = 100; // error!
6
a = ro; // error!

上面代码的最后一行，可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。但是你可以用类型断言重写：

1
a = ro as number[];

`readonly` vs `const`

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用readonly。

额外的属性检查

我们在第一个例子里使用了接口，TypeScript让我们传入{ size: number; label: string; }到仅期望得到{ label: string; }的函数里。我们已经学过了可选属性，并且知道他们在“option bags”模式里很有用。

然而，天真地将这两者结合的话就会像在JavaScript里那样搬起石头砸自己的脚。比如，拿 createSquare例子来说：

1
interface SquareConfig {
2
    color?: string;
3
    width?: number;
4
}
5

6
function createSquare(config: SquareConfig): { color: string; area: number } {
7
    // ...
8
}
9

10
let mySquare = createSquare({ colour: "red", width: 100 });

注意传入createSquare的参数拼写为*colour*而不是color。在JavaScript里，这会默默地失败。

你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。

然而，TypeScript会认为这段代码可能存在bug。对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

1
// error: 'colour' not expected in type 'SquareConfig'
2
let mySquare = createSquare({ colour: "red", width: 100 });

绕开这些检查非常简单。最简便的方法是使用类型断言：

1
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。如果 SquareConfig带有上面定义的类型的color和width属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

1
interface SquareConfig {
2
    color?: string;
3
    width?: number;
4
    [propName: string]: any;
5
}

我们稍后会讲到索引签名，但在这我们要表示的是SquareConfig可以有任意数量的属性，并且只要它们不是color和width，那么就无所谓它们的类型是什么。

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量：因为 squareOptions不会经过额外属性检查，所以编译器不会报错。

1
let squareOptions = { colour: "red", width: 100 };
2
let mySquare = createSquare(squareOptions);

要留意，在像上面一样的简单代码里，你可能不应该去绕开这些检查。对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大部额外属性检查错误是真正的bug。就是说你遇到了额外类型检查出的错误，比如“option bags”，你应该去审查一下你的类型声明。在这里，如果支持传入 color或colour属性到createSquare，你应该修改SquareConfig定义来体现出这一点。

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

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

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

1
let mySearch: SearchFunc;
2
mySearch = function(source: string, subString: string) {
3
  let result = source.search(subString);
4
  return result > -1;
5
}

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。比如，我们使用下面的代码重写上面的例子：

1
let mySearch: SearchFunc;
2
mySearch = function(src: string, sub: string): boolean {
3
  let result = src.search(sub);
4
  return result > -1;
5
}

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。如果你不想指定类型，TypeScript的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc类型变量。函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

1
let mySearch: SearchFunc;
2
mySearch = function(src, sub) {
3
    let result = src.search(sub);
4
    return result > -1;
5
}

可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap["daniel"]。可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。让我们看一个例子：

1
interface StringArray {
2
  [index: number]: string;
3
}
4

5
let myArray: StringArray;
6
myArray = ["Bob", "Fred"];
7

8
let myStr: string = myArray[0];

上面例子里，我们定义了StringArray接口，它具有索引签名。这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

TypeScript支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是说用 100（一个number）去索引等同于使用"100"（一个string）去索引，因此两者需要保持一致。

1
class Animal {
2
    name: string;
3
}
4
class Dog extends Animal {
5
    breed: string;
6
}
7

8
// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
9
interface NotOkay {
10
    [x: number]: Animal;
11
    [x: string]: Dog;
12
}

字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型相匹配。因为字符串索引声明了 obj.property和obj["property"]两种形式都可以。下面的例子里， name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

1
interface NumberDictionary {
2
  [index: string]: number;
3
  length: number;    // 可以，length是number类型
4
  name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
5
}

最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：

1
interface ReadonlyStringArray {
2
    readonly [index: number]: string;
3
}
4
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
5
myArray[2] = "Mallory"; // error!

你不能设置myArray[2]，因为索引签名是只读的。

类类型

实现接口

与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。

1
interface ClockInterface {
2
    currentTime: Date;
3
}
4

5
class Clock implements ClockInterface {
6
    currentTime: Date;
7
    constructor(h: number, m: number) { }
8
}

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

1
interface ClockInterface {
2
    currentTime: Date;
3
    setTime(d: Date);
4
}
5

6
class Clock implements ClockInterface {
7
    currentTime: Date;
8
    setTime(d: Date) {
9
        this.currentTime = d;
10
    }
11
    constructor(h: number, m: number) { }
12
}

接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。

在Java中，如果多个类处理的目标是一样的，但是处理的方法方式不同，那么就定义一个接口，也就是一个标准，让他们的实现这个接口，各自实现自己具体的处理方法来处理那个目标。而在TypeScript中实现一个接口，更多是一种约束，一种规定

类静态部分与实例部分的区别

当你操作类和接口的时候，你要知道类是具有两个类型的：静态部分的类型和实例的类型。你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误：

1
interface ClockConstructor {
2
    new (hour: number, minute: number);
3
}
4

5
class Clock implements ClockConstructor {
6
    currentTime: Date;
7
    constructor(h: number, m: number) { }
8
}

这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。

因此，我们应该直接操作类的静态部分。看下面的例子，我们定义了两个接口， ClockConstructor为构造函数所用和ClockInterface为实例方法所用。为了方便我们定义一个构造函数 createClock，它用传入的类型创建实例。

1
interface ClockConstructor {
2
    new (hour: number, minute: number): ClockInterface;
3
}
4
interface ClockInterface {
5
    tick();
6
}
7

8
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
9
    return new ctor(hour, minute);
10
}
11

12
class DigitalClock implements ClockInterface {
13
    constructor(h: number, m: number) { }
14
    tick() {
15
        console.log("beep beep");
16
    }
17
}
18
class AnalogClock implements ClockInterface {
19
    constructor(h: number, m: number) { }
20
    tick() {
21
        console.log("tick tock");
22
    }
23
}
24

25
let digital = createClock(DigitalClock, 12, 17);
26
let analog = createClock(AnalogClock, 7, 32);

因为createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数签名。

继承接口

和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

1
interface Shape {
2
    color: string;
3
}
4

5
interface Square extends Shape {
6
    sideLength: number;
7
}
8

9
let square = <Square>{};
10
square.color = "blue";
11
square.sideLength = 10;

一个接口可以继承多个接口，创建出多个接口的合成接口。

1
interface Shape {
2
    color: string;
3
}
4

5
interface PenStroke {
6
    penWidth: number;
7
}
8

9
interface Square extends Shape, PenStroke {
10
    sideLength: number;
11
}
12

13
let square = <Square>{};
14
square.color = "blue";
15
square.sideLength = 10;
16
square.penWidth = 5.0;

在Java中，是单一继承，多个实现。这里只是一个接口可以继承多个接口

混合类型

先前我们提过，接口能够描述JavaScript里丰富的类型。因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

1
interface Counter {
2
    (start: number): string;
3
    interval: number;
4
    reset(): void;
5
}
6

7
function getCounter(): Counter {
8
    let counter = <Counter>function (start: number) { };
9
    counter.interval = 123;
10
    counter.reset = function () { };
11
    return counter;
12
}
13

14
let c = getCounter();
15
c(10);
16
c.reset();
17
c.interval = 5.0;

在使用JavaScript第三方库的时候，你可能需要像上面那样去完整地定义类型。

接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的private和protected成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。

当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。这个子类除了继承至基类外与基类没有任何关系。例：

1
class Control {
2
    private state: any;
3
}
4

5
interface SelectableControl extends Control {
6
    select(): void;
7
}
8

9
class Button extends Control implements SelectableControl {
10
    select() { }
11
}
12

13
class TextBox extends Control {
14
    select() { }
15
}
16

17
// 错误：“Image”类型缺少“state”属性。
18
class Image implements SelectableControl {
19
    select() { }
20
}
21

22
class Location {
23

24
}

在上面的例子里，SelectableControl包含了Control的所有成员，包括私有成员state。因为 state是私有成员，所以只能够是Control的子类们才能实现SelectableControl接口。因为只有 Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。

在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。实际上， SelectableControl接口和拥有select方法的Control类是一样的。 Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。

布尔值 boolean

数字 number

字符串 string

数组 [ ] / Array< >

元组 Tuple

枚举 enum

any

void

Null 和 Undefined

Never

Object

类型断言

解构数组

对象解构

属性重命名

默认值

函数声明

展开

资料来源

接口初探

可选属性

只读属性

readonly vs const

额外的属性检查

函数类型

可索引的类型

类类型

实现接口

类静态部分与实例部分的区别

继承接口

混合类型

接口继承类

`readonly` vs `const`