typescript中的type关键字和interface关键字区别

Type又叫类型别名(type alias),作用是给一个类型起一个新名字,不仅支持interface定义的对象结构,还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。

TypeScript 复制代码
type num = number; // 基本类型
type stringOrNum = string | number; // 联合类型
type person = {name: string}; // 对象类型
type user = person & { age: number } // 交叉类型
type data = [string, number]; // 元组
type fun = () => void; // 函数类型

type和interface的相同点

1.都可以用来描述一个对象或者函数

interface

TypeScript 复制代码
interface user {name: string; age:number}; // 对象
 
interface setUser {(name: string; age:number):void}; // 函数

type:

TypeScript 复制代码
 type user = {name: string; age:number}; // 对象
 
 type setUser = (name: string; age:number):void;//函数

2.都可以进行拓展

interface可以扩展,type可以通过交叉实现interface的extends行为,interface可以extends type,同时type也可以与interface类型交叉。

TypeScript 复制代码
// interface通过extends实现继承
interface userName {
  name: string;
}
interface user extends userName {
  age: number
}
let stu:user = {name: 'wang', age: 10}


// interface的extends扩展可以通过type交叉(&)类型实现
type userName = {
   name: string;
}
type user = userName & {age: number}
let stu:user={name: 'wang', age: 18}


// interface扩展type
type name = {
  name: string;
}
interface user extends name {
  age: number;
}
let stu:user={name: 'wang', age: 89}


// type与interface交叉
interface name {
  name: string;
}
type user = name & {
  age: number;
}
let stu:user={name:'wang', age: 18}

type和interface的不同点

1.类型别名可以用于其它类型 (联合类型、元组类型、基本类型(原始值)),interface不支持

2.interface 可以多次定义来合并声明,type 不支持

TypeScript 复制代码
interface user {
    name: string;
    age: number;
}
interface user {
    sex: string;
}
//user实际接口为:
{
    name: string;
    age: number;
    sex: string;
}

3.type 能使用 in 关键字生成映射类型,但 interface 不行

TypeScript 复制代码
type keys = 'firstname' | 'surname';
 
type nameTypes = {
  [key in Keys]: string;
};
const test: nameTypes = {
  firstname: 'Pawel',
  surname: 'Grzybek',
};

4.默认导出方式不同

TypeScript 复制代码
// inerface 支持同时声明,默认导出 而type必须先声明后导出
export default interface name {
  name: string;
};

// 同一个js模块只能存在一个默认导出
 type typeName = {name: string};
  export default typeName

5.在type中可以使用泛型

TypeScript 复制代码
type Zoo<T> = T;
const num : Zoo<number> = 3;
 
type callback<T> = (data: T) => void;

6.type可以使用typeof获取实例类型

TypeScript 复制代码
let div = document.createElement('div');
type divType = typeof div;
相关推荐
别拿曾经看以后~21 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死24 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试26 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人35 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人36 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR41 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香43 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter