接口

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

接口初探

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

function printLabel(labeledObj: { label: string }) {
  console.log(labeledObj.label)
}
let myObj = { size: 10, label: 'Size 10 Object' }
printLabel(myObj)

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

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

interface LabelledValue {
  label: string
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label)
}

let myObj = { size: 10, label: 'Size 10 Object' }
printLabel(myObj)

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

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

可选属性

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

interface SquareConfig {
  color?: string
  width?: number
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = { color: 'white', area: 100 }
  if (config.color) {
    newSquare.color = config.color
  }
  if (config.width) {
    newSquare.area = config.width * config.width
  }
  return newSquare
}

let mySquare = createSquare({ color: 'black' })

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

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

interface SquareConfig {
  color?: string
  width?: number
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = { color: 'white', area: 100 }
  if (config.clor) {
    // Error: 类型 SquareConfig 上不存在属性 clor
    newSquare.color = config.clor
  }
  if (config.width) {
    newSquare.area = config.width * config.width
  }
  return newSquare
}

let mySquare = createSquare({ color: 'black' })

只读属性

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

interface Point {
  readonly x: number
  readonly y: number
}

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

let p1: Point = { x: 10, y: 20 }
p1.x = 5 // Error

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

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

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

a = ro as number[]

readonly vs const

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

额外的属性检查

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

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

interface SquareConfig {
  color?: string
  width?: number
}

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

let mySquare = createSquare({ colour: 'red', width: 100 })

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

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

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

// Error: 对象字面量只能指定已知属性只能指定已知属性，但类型 SquareConfig 中不存在 colour。你是想写 color 吗？
let mySquare = createSquare({ colour: 'red', width: 100 })

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

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

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

interface SquareConfig {
  color?: string
  width?: number
  [propName: string]: any
}

稍后会讲到索引签名，但在这要表示的是 SquareConfig 可以有任意数量的属性，并且只要它们不是 color 和 width ，那么就无所谓它们的类型是什么 还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量： 因为 squareOptions 不会经过额外属性检查，所以编译器不会报错

let squareOptions = { colour: 'red', width: 100 }
let mySquare = createSquare(squareOptions)

上面的方法只在 squareOptions 和 SquareConfig 之间有共同的属性时才好用。 在这个例子中，这个属性为 width。如果变量间不存在共同的对象属性将会报错。例如：

let squareOptions = { colour: 'red' }
let mySquare = createSquare(squareOptions)

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

函数类型

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

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

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

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

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

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

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

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。 如果不想指定类型，TypeScript 的类型系统会推断出参数类型，因为函数直接赋值给了 SearchFunc 类型变量。 函数的返回值类型是通过其返回值推断出来的（此例是false和true）

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

如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc 接口中的定义不匹配

let mySearch: SearchFunc
// Error: 类型 (src:string，sub:string) => string 不可分配给类型 SearchFunc
// 类型 string 不可赋值给类型 boolean
mySearch = function (src, sub) {
  let result = src.search(sub)
  return 'string'
}

可索引的类型

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

interface StringArray {
  [index: number]: string
}

let myArray: StringArray
myArray = ['Bob', 'Fred']

let myStr: string = myArray[0]

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

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

class Animal {
  name: string
}
class Dog extends Animal {
  breed: string
}

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

字符串索引签名能够很好的描述 dictionary 模式，并且它们也会确保所有属性与其返回值类型相匹配。因为字符串索引声明了 obj.property和obj["property"] 两种形式都可以。

下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

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

但如果索引签名是包含属性类型的联合类型，那么使用不同类型的属性就是允许的

interface NumberOrStringDictionary {
  [index: string]: number | string
  length: number
  name: string
}

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

interface ReadonlyStringArray {
  readonly [index: number]: string
}
let myArray: ReadonlyStringArray = ['Alice', 'Bob']
myArray[2] = 'Mallory' // Error

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

类类型

实现接口

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

interface ClockInterface {
  currentTime: Date
}

class Clock implements ClockInterface {
  currentTime: Date = new Date()
  constructor(h: number, m: number) {}
}

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

interface ClockInterface {
  currentTime: Date
  setTime(d: Date): void
}

class Clock implements ClockInterface {
  currentTime: Date = new Date()
  setTime(d: Date) {
    this.currentTime = d
  }
  constructor(h: number, m: number) {}
}

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

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

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

interface ClockConstructor {
  new (hour: number, minute: number)
}

// Error
class Clock implements ClockConstructor {
  currentTime: Date
  constructor(h: number, m: number) {}
}

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

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

interface ClockConstructor {
  new (hour: number, minute: number): ClockInterface
}
interface ClockInterface {
  tick(): void
}

function createClock(
  ctor: ClockConstructor,
  hour: number,
  minute: number
): ClockInterface {
  return new ctor(hour, minute)
}

class DigitalClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log('beep beep')
  }
}
class AnalogClock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log('tick tock')
  }
}

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

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

另一种简单方式是使用类表达式：

interface ClockConstructor {
  new (hour: number, minute: number)
}

interface ClockInterface {
  tick()
}

const Clock: ClockConstructor = class Clock implements ClockInterface {
  constructor(h: number, m: number) {}
  tick() {
    console.log('beep beep')
  }
}

继承接口

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

interface Shape {
  color: string
}

interface Square extends Shape {
  sideLength: number
}

let square = {} as Square
square.color = 'blue'
square.sideLength = 10

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

interface Shape {
  color: string
}

interface PenStroke {
  penWidth: number
}

interface Square extends Shape, PenStroke {
  sideLength: number
}

let square = {} as Square
square.color = 'blue'
square.sideLength = 10
square.penWidth = 5.0

混合类型

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

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

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

function getCounter(): Counter {
  let counter = function (start: number) {} as Counter
  counter.interval = 123
  counter.reset = function () {}
  return counter
}

let c = getCounter()
c(10)
c.reset()
c.interval = 5.0

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

接口继承类

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

当有一个庞大的继承结构时这很有用，但要指出的是代码只在子类拥有特定属性时起作用。除了继承自基类，子类之间不必相关联。 例：

class Control {
  private state: any
}

interface SelectableControl extends Control {
  select(): void
}

class Button extends Control implements SelectableControl {
  select() {}
}

class TextBox extends Control {
  select() {}
}

class ImageControl implements SelectableControl {
  // Error: ImageControl 类错误地实现了 SelectableControl 接口
  // 类型具有私有属性 state 的单独声明
  private state: any
  select() {}
}

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

在 Control 类内部，是允许通过 SelectableControl 的实例来访问私有成员 state 的。实际上 SelectableControl 就像 Control 一样，并拥有一个 select 方法。Button 和 TextBox 类是 SelectableControl 的子类（因为它们都继承自 Control 并有 select 方法）。而对于 ImageControl 类，它有自身的私有成员 state 而不是通过继承 Control 得来的，所以它不可以实现 SelectableControl

interface 和 type 区别

• 定义类型范围不同
  • interface 只能定义对象类型或者接口当名字的函数类型
  • type 可以定义任何类型，包括基础类型、联合类型。交叉类型、元组
• interface 可以继承一个或者多个接口，也可以继承 type（不常用），类可以实现一个或多个接口，type 没有继承功能
• type 可以用 & 交叉合并为一个新的 type，但 interface 不可以
• interface 可以合并声明（内部元素中相同键名的类型需保持一致），type 则会报错

其他

const symid = Symbol('ProductId')
interface Product {
  [symid]: number
  name: string
  price: number
  buy(): void
}

type A = Product['name']           // 相当于 type A = string
type B = Product['price']          // 相当于 type B = number
type C = Product['name' | 'price'] // 相当于 type C = string | number
type D = Product[typeof symid]     // 相当于 type D = number

// keyof 操作符用于获取一个对象类型的所有键（key）的类型
type PKeys1 = keyof Product // 相当于 type Pkeys1 = 'name' | 'price' | 'buy' | typeof symid

// 显式获取一个对象类型的所有键（key）的类型
type AllKeys<T> = T extends any ? T : never
type Pkeys2 = AllKeys<keyof Product> // type Pkeys2 = typeof symid | "name" | "price" | "buy"