typescript中的type跟interface的区别

相同点

---

 

都可以定义一个函数跟对象

interface

 

interface IUser { 
    age: number;
    name: string;  
    (sex: string, grade: string): string; 
}

type

type TUser = {
    name: string,
    age: number,
    setInfo: (sex: string, grade: string) => string
}    

都可以拓展

 

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface IAnimal {
    name: string
}
interface Idog extends IAnimal {
    (food: string): string  
}

type extends type

type TAnimal = {
    name: string
}
type TDog = TAnimal & {
    eat: (food: string) => string
}    

interface extends type

type TName = {
    name: string
}
interface IName extends TName {
    (sex: string): string
}

type extends interface

interface Iinfo {
    name: string  
}
type Tinfo = Iinfo & {
    age: number  
}

不同点

---

type可以而interface不可以

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
    wong();
}
interface Cat {
    miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 语句中还可以使用 typeof 获取实例的 类型进行赋值

 

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

 

type其他用法

type StringOrNumber = string | number;  
type Text = string | { text: string };  
type NameLookup = Dictionary<string, Person>;  
type Callback<T> = (data: T) => void;  
type Pair<T> = [T, T];  
type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

 

interface 可以而 type 不行

interface可以合并

interface IInfo {
  name: string
}
interface IInfo {
  age: number
}
/** 
 * IInfo 接口为 {
 *  name: string;
 *  age: number
 * }
*/

转载于： https://juejin.cn/post/6844903749501059085