IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【TypeScript】-- type 与 interface 的区别 -> 正文阅读

[JavaScript知识库]【TypeScript】-- type 与 interface 的区别

type(类型别名)

类型别名可以用于表示基本类型、对象类型、联合类型、泛型和元组

// 基本类型
type MtherString = string;
// 对象类型
type MyObj = {
	a: string;
	b: number;
	c: boolean;
};
// 函数类型
type setPoint = (x: number, y: number) => void;
// 联合类型
type Total = string | number;
// 泛型
type Tree<T> = {
	node: T;
}
// 元组
type comble = [number, string, number];

interface(接口)

接口只能用于描述对象类型

// 对象类型
interface MyObj {
	a: string;
	b: number;
	c: boolean;
}
// 函数类型
interface setPoint {
	(x: number, y: number): void;
}
// 泛型
interface Tree<TU> {
	node: T;
	leaf: U;
}

继承 extends

interface 继承 interface

interface Person{
    name:string
}

interface Student extends Person { stuNo: number }

interface 继承 type

type Person{
    name:string
}

interface Student extends Person { stuNo: number }

type 继承 type

type Person{
    name:string
}

type Student = Person & { stuNo: number }

type 继承 interface

interface Person{
    name:string
}

type Student = Person & { stuNo: number }

实现 implements

类可以实现 interface 以及 type(对象类型)

interface ICat{
    setName(name:string): void;
}

class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

// type 
type ICat = {
    setName(name:string): void;
}

class Cat implements ICat{
    setName(name:string):void{
        // todo
    }
}

总结(type 与 interface 的区别)

  1. type 可以定义基本类型别名、联合类型、元组类型, 但是 interface 无法定义。
  2. interface 支持声明合并,但是 type 不行。
// interface 
interface Person { name: string }
interface Person { age: number }

let user: Person = {
    name: "Tolu",
    age: 0,
};

// type 
type Person { name: string }; 

type Person { age: number }  // Error: 标识符“Person”重复。ts(2300)

  1. 索引签名问题
    如果你经常使用TypeScript, 一定遇到过相似的错误:(是的没错)

Type ‘xxx’ is not assignable to type ‘yyy’
Index signature is missing in type ‘xxx’.

interface propType{
    [key: string] : string
}

let props: propType

type dataType = {
    title: string
}
interface dataType1 {
    title: string
}
const data: dataType = {title: "订单页面"}
const data1: dataType1 = {title: "订单页面"}
props = data

props = data1  // Error:类型“dataType1”不可分配给类型“propType”; 类型“dataType1”中缺少索引签名 

我们发现 dataType 和 dataType1 对应的类型一样,但是interface定义的就赋值失败,是什么原因呢?
刚开始百思不解,最后我在 stack overflow上找到了一个相似的问题:

并且很幸运的找到了有效的答案:
在这里插入图片描述

翻译过来的大致意思就是:

Record<string,string> 与 {[key:string]:string} 相同。只有当该类型的所有属性都已知并且可以对照该索引签名进行检查时,才允许将子集分配给该索引签名类型。在您的例子中,从 exampleType 到 Record<string,string> 的所有内容都是可分配的。这只能针对对象字面量类型进行检查,因为一旦声明了对象字面量类型,就无法更改它们。因此,索引签名是已知的。
相反,在你使用 interface 去声明变量时,它们在那一刻类型并不是最终的类型。由于 interfac 可以进行声明合并,所以总有可能将新成员添加到同一个 interface 定义的类型上。

再结合第2点 ‘声明合并’ 的讲解, 这样就很好理解了。就是说 interface 定义的类型是不确定的, 后面再来一个:

interface propType{
    title:number
}

这样propType类型就被改变了。

参考资料

https://mp.weixin.qq.com/s/Y96lcMspyQ5WvXfoI61USg

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-09 12:31:32  更:2022-05-09 12:34:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:50:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码