TypeScript: interfaces 與 type 的區(qū)別和相同點(diǎn)

???? 1. Objects / Functions

• 接口和類型別名都可以用來(lái)描述對(duì)象的形狀或函數(shù)簽名
• 使用接口定義

// 使用接口
interface Point{
    x: number
    y: number
}

interface SetPoint {
    (x:number, y:number): void
}

• 使用類型別名定義

type Point = {
    x: number
    y: number
}

type SetPoint = (x: number, y: number) => void;

???? 2. Other Types

• 與接口類型不同, 類型別名可以用于一些其他類型, 比如原始類型, 聯(lián)合類型和元組

 // 原始類型
 type Name = string

 // const name: Name = 22
 const name: Name = 'sss'

 // Object
 type PartialPointX = { x: number }
 type PartialPointY = { y: number; z: number }

 // Union Object
 type PartialPoint = PartialPointX | PartialPointY
 const pointx: PartialPointX = { x: 1 }
 const pointy: PartialPointY = { y: 1, z: 88 }
 const pointer: PartialPoint = { x: 100, y: 200, z: 300 }

 // Tuple
 type Data = [number, string]
 const dataArr: Array<Data> = [[1, 'ss']]
 const data: Data = [1, 'ss']

???? 3 Extend

• 接口和類型別名都能夠被擴(kuò)展, 但語(yǔ)法有所不同. 此外, 接口和類型別名不是互斥的.
• ? 接口可以擴(kuò)展類型別名
• ? 類型別名不能擴(kuò)展接口

??interface extends interface

  interface PartialPointX {
      x: number
  }
  interface Point extends PartialPointX {
      y: number
  }
  const point: Point = { x: 11, y: 22 }

??Type Alias extends type alias

  type FirstName = { first: string }

  type FullName = FirstName & { last: string }

  const fullName: FullName = { first: 'su', last: 'zhen

??interface extends type alias

 type PartialPointX = {
     x: number
 }

 interface Point extends PartialPointX {
     y: number
 }

 const point: Point = {
     x: 1,
     y: 2,
 }

??type alias extends interface

 interface FirstName {
     first: string
 }

 type FullName = FirstName & { last: string }
     const name: FullName = {
     first: 'su',
     last: 'zhen',
 }

• 接口擴(kuò)展的時(shí)候使用 extends
• 類型別名擴(kuò)展的時(shí)候使用 &

???? 4 Implements

• 類可以以相同的方式實(shí)現(xiàn)接口或類型別名 ???
• 但類不能實(shí)現(xiàn)使用類型別名定義的聯(lián)合類型 ???

interface Point {
  x: number
  y: number
}

class SomePoint implements Point {
  x = 0
  y = 0
}

type Point2 = {
  x: number
  y: number
}

class SomePoint2 implements Point2 {
  x = 0
  y = 0
}

type PartialPoint = { x: number } & { y: number }
// A class can only implement an object type or
// intersection of object types with statically known members.ts(2422)
// class SomePartialPoint implements PartialPoint {} // Error ?

???? 5 Declaration merge

?

接口可以定義多次, 自動(dòng)合并到單個(gè)接口中

?

interface Point {
  x: number
}

interface Point {
  y: number
}

interface Point {
  y: number
}

interface Point {
  z: number
}

const point: Point = {
  x: 1,
  y: 2,
  z: 3,
}

• 類型別名只允許定義一次

type Name = {
  first: string
}

type Name = {
  last: string
}

Duplicate identifier 'Name'.ts(2300)

?? 看完三件事