simpread-TypeScript interface 与 type 的区别

2022-08-13 16:32:44 阅读：222 来源： 互联网

标签：TypeScript name age User interface type string

interface 和 type 在 TypeScript 中的区别

1、TypeScript interface 和 type 的介绍

在 TypeScript 中，interface 更偏于一种约束类型，而 type 的作用就是给类型起一个新名字，也就是别名。后来随着 TypeScript 语言的发展，type 被赋予了新的内涵，type 也可以用来定义类型。

约束类型与定义类型，本质都是围绕 “类型” 而产生，所以说interface 和 type 在 TypeScript 中区别不大，但是在细微之处，两者的差别也非常明显，需要开发者仔细的体会。本文主要带领大家领略这种细微差别。

在其他面向对象编码语言中，例如 Java 语言中，interface用于定义行为，如果一个类实现了某一个interface则表示该类具有某种行为或者说具有某种能力，例如run或者fly，从而可以通过行为来对动物进行划分，看看它到底是走兽还是飞禽。

而type的作用就是给类型起一个新名字，也就是别名，可以作用于原始值（基本类型），联合类型，元组以及其它任何类型。如下代码所示：

type Second = number; 

let time: Second = 60;  

type user = {name:string} 

type getName = ()=>string  

type data = [number,string] 

type numOrFun = Second | getName

注意：起别名不会新建一个类型，它创建了一个新名字来引用那个类型。给基本类型起别名通常没什么用。类型别名常用于联合类型。另外，和接口一样，type 用来描述对象或函数的类型，如下所示：

type User = {
    name: string
    age: number
};
type SetUser = (name: string, age: number)=>void;

在 ts 编译成 js 后，所有的接口和 type 都会被擦除掉。

2、TypeScript interface 和 type 的区别

2.1、接口可以扩展，但 type 不能 extends 和 implement 。

接口可以扩展，但type不能extends和implement。

不过，type可以通过交叉类型实现interface的extends行为。

interface 可以extends type，同时type也可以与interface类型交叉。

2.1.1、接口扩展

interface Name {
    name: string;
}
interface User extends Name {
    age: number;
}
let student:User={name:'wang',age:10}

2.1.2、type 交叉

上面的扩展可以用type交叉类型来实现

type Name = {
    name: string
}

type User = Name & { age: number  };

let student:User={name:'张三',age:20}
console.log(stu)

2.1.3、interface 扩展 type

type Name = {
    name: string;
}

interface User extends Name {
    age: number;
}

let student:User={name:'张三',age:20}

2.1.4、type 与 interface 交叉

interface Name {
    name: string;
}

type User = Name & {
    age: number;
}
let student:User={name:'张三',age:20}

2.2、接口可以定义多次，type 不可以定义多次。

接口可以定义多次，并将被视为单个接口（即所有声明属性的合并）。而type不可以定义多次。

interface User {
    name: string
    age: number
}

interface User {
    sex: string
}

let user:User={name:'张三',age:20,sex:'man'}

原文链接：http://www.mybatis.cn/typescript/1992.html

原文地址 www.mybatis.cn

标签：TypeScript,name,age,User,interface,type,string
来源： https://www.cnblogs.com/zhuoss/p/16583379.html

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

ICode9