Typescript - type vs Interface

1、Type不是类型，仅是别名而已

• 类型别名：给一个类型起一个别名，如： sting、number
• 使用场景：当同一类型被使用多次的时候，可以通过类型别名，简化该类型的使用
• 类型：原始值、元组、泛型、联合类型、交叉类型

type Name = string

type NameResolver = () => string

type NameOrResolver = Name | NameResolver // 联合类型

function getName (n: NameOrResolver): Name{
  if (typeof n === "string"){
    return n
  }
  else {
    return n()
  }
}

2、Interface定义接口

• 用于定义对象类型的
• 描述对象的属性

interface Card {
  suit: string;
  card: number;
}
interface Person {
  name:string, // 必须属性
  readonly id:number, // 只读属性
  age?:number, // 可选属性
  [propName:string]:any, // 任意属性
  createCar?(name:string, age:number):void, // 普通函数
  createCarRow?(this:Person):()=>Card // 带有闭包的箭头函数
}

let per:Person = {
  id: 82374823,
  name: "张三",
  age: 18,
  like: "乒乓",
  car: "兰博基尼"
}

3、type vs interface

相同点

• 都可以定义一个对象或函数
• 都允许继承：extends、type

// 1、都可以定义一个对象或函数
type addType = (num1:number,num2:number) => number 

interface addType { (num1:number,num2:number):number }

const add:addType = (num1, num2) => {
    return num1 + num2
}


// 2、都允许继承：extends、type

// 2.1 interface 继承 interface
interface Person { 
  name: string 
}
interface Student extends Person { 
  grade: number 
}

// 2.2 type 继承 type (用交叉类型)
type Person = { 
  name: string 
}
type Student = Person & { grade: number  }   

// 2.3 interface 继承 type
type Person = { 
  name: string 
}
interface Student extends Person { 
  grade: number 
} 

// 2.4 type 继承 interface (用交叉类型)
interface Person { 
  name: string 
}
type Student = Person & { grade: number  }

不同点

• 定义基本类型
• 重复声明

// 1、 type 可以，interface 不行：声明基本类型、联合类型、交叉类型、元组

type Name = string                              // 基本类型

type arrItem = number | string                  // 联合类型

const arr: arrItem[] = [1,'2', 3]

type Person = { 
  name: Name 
}

type Student = Person & { grade: number  }       // 交叉类型

type Teacher = Person & { major: string  } 

type StudentAndTeacherList = [Student, Teacher]  // 元组类型

const list:StudentAndTeacherList = [
  { name: 'lin', grade: 100 }, 
  { name: 'liu', major: 'Chinese' }
]


// 2、interface可以，type 不行：合并重复声明

// 重复声明 interface，就合并了
interface Person {
    name: string
}
interface Person { 
    age: number
}
const person: Person = {
    name: 'lin',
    age: 18
}

// 重复声明 type ，就报错了
type Person = {
    name: string
}
type Person = {
    age: number
}
const person: Person = {
    name: 'lin',
    age: 18
}