TypeScript type 和 interface区别使用总结

2022-05-22 03:00:33 阅读：208 来源： 互联网

标签：TypeScript name age 定义 interface type string

在使用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> = {
    [P in keyof T]: T[P];
};

type 和 interface 相同点

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

// type 扩展
type myObj = {
    name: string;
}
// &符号
type myObjPlus = myObj & { age: number };

const newObj: myObjPlus = {
    name: '',
    age: 233
};

// interface 扩展
interface myObj {
    name: string;
};

// extends继承扩展
interface myObjPlus extends myObj {
    age: number;
};

const newObj: myObjPlus = {
    name: '',
    age: 233
};

// 当然两者都支持互相交叉扩展
// 情况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 的使用场景

定义基本类型
定义元组类型
定义函数类型
定义联合类型
定义映射类型

interface 的使用场景

需要利用接口自动合并特性
定义对象类型且无需使用type时

标签：TypeScript,name,age,定义,interface,type,string
来源： https://www.cnblogs.com/tianmiaogongzuoshi/p/16296807.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9