simpread-(83 条消息) TypeScript type 和 interface 区别_天渺工作室的博客 - CSDN 博客_typescript 中 type 和 interface 的区别

ts 的 type 和 interface 两者作用 (简单案例)

interface 只能定义对象数据结构类型

对象类型

泛型

// 简单案例1
interface User {
    name: string;
    age: number;
    sex?: string;
}
 
let user: User  = {
    name: '',
    age: 233
};
 
// 简单案例2
interface User1<T> {
    name: string;
    age: number;
    sex?: string;
    details?: T;
}
 
const userObj: User1<{ hobby: string;}> = {
    name: '',
    age: 233,
    details: {hobby: '爱好吃饭'}
};

type 侧重于直接定义类型

type 还可以给一个或多个类型起一个新名称 (当变量用)

type Demo = string | number; // 赋值
let test1: Demo  = 1;
let test2: Demo  = '';

type 当然也能定义对象类型

type Demo = {
    [propname: string]: any
};
 
type Demo<T> = {
    [propname: string]: T;
};

type 和 interface 相同点

相同 1：type 和 interface 都支持扩展

&符号扩展

and符号

// type 扩展
type myObj = {
    name: string;
}
// &符号
type myObjPlus = myObj & { age: number };
 
const newObj: myObjPlus = {
    name: '',
    age: 233
};

extends继承扩展

继承扩展

// interface 扩展
interface myObj {
    name: string;
};
 
// extends继承扩展
interface myObjPlus extends myObj {
    age: number;
};
 
const newObj: myObjPlus = {
    name: '',
    age: 233
};

&符号和extends交叉使用扩展

// 当然两者都支持互相交叉扩展
// 情况1
type myObj = {
    name: string;
};
interface myObjPlus extends myObj {
    age: number;
};
 
const newObj: myObjPlus = {
    name: '',
    age: 233
};
// 情况2
interface user {
    age: number;
};
type myUser = { name: string} & user;
const newObj: myUser = {
    name: '',
    age: 233
};

type 和 interface 不同点

区别 1: type 可以为基本类型，联合类型 或 元组 甚至 any 等等 赋值定义别名, interface 明显办不到

type A = string;
type B = string | unknown;
type C = B | [ 1, 2 ,3 ,4]; // 赋值当变量用
let test: C = '';

区别 2: interface 定义重名了会合并属性，type 办不到 (会报错提醒 重复定义)

// interface 定义重名了会合并属性,很多库ts源码里面都用到过类似方法作为扩展
interface A {
    name: string;
}
 
interface A {
    age: number;
}
const aObj: A = {
    name: '', // 必须
    age: 233 // 必须
};

总结 使用场景

(其实自己确实可以想怎么定义就怎么定义，但为了标准化 最好还是得规范点)

type 的一般使用场景

1. 一般定义基本或联合类型

2. 一般定义元组类型

3. 一般定义函数类型

4. 定义映射类型

interface 的使用场景

1. 需要 interface 重名会自动合并属性扩展的

2. 定义对象数据结构 (不使用 type 时)

原文地址 blog.csdn.net