TypeScript中正确使用interface和type的方法实例
前言
interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape 表示一种设计大框,或者说只要具有某些特征或者行为就是为一类事物。在有些面向例如 Java 语言中,interface 用于定义行为,如果一个类实现了某一个 interface 表示该类具有某种行为或者说具有某种能力,例如writable 或者 readable 。可以通过行为来对事物进行划分。interface 在 golang 语言中应用风生水起,但是在 TypeScript interface 更偏于一种类型 shape,同时 TypeScript 也提供了 type 用于定义类型,其实 interface 和 type 在 TypeScript 中区别不大,但是还是有点区别。
interface
interface 可以用于对类(class)、对象(object)或者函数(function)进行 shape。
interface Tut{ title:string isComplete:boolean }
定义了一个接口 interface 用于表示 Tut 类型, 然后定义类型 Tut 的变量 machineLearningTut
const machineLearningTut:Tut = { title:"machine learning basic", isComplete:true }
如果类型为 Tut 的 machineLearningTut 没有完全实现接口接口定义属性或者方法就会在编译阶段给出友好的提示
const machineLearningTut:Tut = { title:"machine learning basic", }
提示类型 Tut 的 machineLearningTut 没有实现 isComplete 这个在接口中已经声明的属性。
Property 'isComplete' is missing in type '{ title: string; }' but required in type 'Tut'.ts(2741) [demo2.ts(3, 5): ]()'isComplete' is declared here.
class VideoTut implements Tut{ title:string; isComplete:boolean; }
也可以定义类 VideoTut 实现 Tut 接口
interface Greet{ (name:string):string } const greet:Greet = (name)=> `hello ${name}`
也可以定义 Greet 接口用于 shape 函数,定义函数的参数和函数返回值类型
interface AdvanceTut extends Tut{ isFree:boolean } const machineLearningTut:AdvanceTut = { title:"machine learning basic", isComplete:true, isFree:true }
接口间是可以通过 extend 来实现接口间的继承(扩展),AdvanceTut 是对 Tut 的扩展,在 type 不支持 extend 来实现 type 间的扩展。
interface Tut{ title:string isComplete:boolean } interface Tut{ isFree:boolean } const machineLearningTut:Tut = { title:"machine learning basic", isComplete:true, isFree:true }
上面连续声明了两个 Tut 同名 inteface 这两 Tut 显示是扩展的关系,并不是覆盖的关系,这一点也是 type 也是不具备的特点
type
其实 type 用法和 interface 用法大同小异,不过 type 便于类型,可以是 JavaScript 基础类型的别名。其实 type 从本质还是和 interface 还是有些区别,这个可能即使解释了还需要大家在实践过程慢慢体会。
type isComplete = boolean type title = string type greet = (name:string)=>string type Tut = { title:string; isComplete:boolean } const machineLearningTut:Tut = { title:"machine learning title", isComplete:true }
type Tut = { title:string; isComplete:boolean } & { isFree:boolean } const machineLearningTut:Tut = { title:"machine learning title", isComplete:true, isFree:true }
type 类型可以 & 实现对 type 的扩展
type VideoTut = Tut | { isFree:boolean } const machineLearningTut:VideoTut = { title:"machine learning title", isComplete:true, isFree:true }
export type InputProps = { type:'text'|'email'; value:string; onChane:(newValue:string)=>void }
而且前后端定义类型也可以用 type 来实现,如下可以定义多个基本类型,这些定义好的类型可以定义新的类型。
type onChaneType = (newValue:string)=>void type InputType = 'text'|'email'; type InputValue = string export type InputProps = { type:InputType; value:InputValue; onChane:onChaneType }
附:interface和type不同点
type可以声明基本类型别名、联合类型、元祖等类型
// 基本类型别名 type Name = string; // 联合类型 interface Dog { wong() } interface Cat { miao(); } type Pet = Dog | Cat; // 具体定义数组每个位置的类型 type PetList = [Dog, Pet];
type语句中还可以使用typeof获取实例的类型进行赋值
// 当你想要获取一个变量的类型时,使用typeof let div = document.createElement('div'); type B = typeof div;
type其他骚操作
type StringOrNumber = string | number; type Text = string | { text: string }; type NameLookup = Dictionary<string, Person>; type Callback<T> = (data: T) => void; type Pair<T> = [T, T]; type Coordinates = Pair<number>; type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
interface能够声明合并
interface User { name: string; age: number; } interface User { sex: string; }
User接口为:
{ name: string; age: number; sex: string; }
总结
到此这篇关于TypeScript中正确使用interface和type的文章就介绍到这了,更多相关TypeScript使用interface和type内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
一文彻底理解js原生语法prototype,__proto__和constructor
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下...2021-10-24Python astype(np.float)函数使用方法解析
这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08- 这篇文章主要给大家分享的是TypeScript 索引签名的理解,索引签名由方括号中的索引名称及其类型组成,后面是冒号和值类型:{ [indexName: KeyType]: ValueType }, KeyType 可以是一个 string、number 或 symbol,而ValueType 可以是任何类型,下面就俩简单了解一下吧...2021-10-15
- 这篇文章主要介绍了C#简单了解接口(Interface)使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要介绍了使用TS来编写express服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- 这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-29
- 这篇文章主要介绍了你不知道的 TypeScript 高级类型(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-29
解决mybatisplus插入报错argument type mismatch的问题
这篇文章主要介绍了解决mybatisplus插入报错argument type mismatch的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-25- 与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,需要的小伙伴可续看下文具体介绍...2021-09-15
- 这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏,对TypeScript感兴趣的同学,一定要看一下...2021-04-16
- 这篇文章主要介绍了基于MyBatis的parameterType传入参数类型,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-29
- 这篇文章主要给大家介绍了关于TypeScript中条件类型精读与实践的相关资料,,条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型,需要的朋友可以参考下...2021-10-05
- 本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
- 在比较对象时,需要了解他们的类型,才能决定他们的值是否能比较。所有的类都从System.Object中继承了GetType()方法,常常与typeo()运算符一起使用。这篇文章主要给大家介绍了关于C#基础知识之GetType与typeof区别的相关资料,需要的朋友可以参考下...2021-06-01
- function定义的对象有一个prototype属性,prototype属性又指向了一个prototype对象,注意prototype属性与prototype对象是两个不同的东西,要注意区别.这篇文章主要介绍了JS中的prototype的相关资料,需要的朋友可以参考下...2016-10-02
TypeScript中正确使用interface和type的方法实例
在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于TypeScript中正确使用interface和type的相关资料,需要的朋友可以参考下...2021-09-15- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 本文将结合实例代码,介绍Vue中 Vue.prototype使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧...2021-07-05