TypeScript中正确使用interface和type的方法实例

 更新时间:2021年09月15日 11:53:50   作者:zidea  
在ts中定义类型由两种方式:接口(interface)和类型别名(type alias),interface只能定义对象类型,下面这篇文章主要给大家介绍了关于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下referer兼容各大浏览器的方法

    解决js下referer兼容各大浏览器的方法

    众所周知,我们web开发人员痛恨IE浏览器,因为IE不支持标准,标准外的默认行为又和其他浏览器经常不一致,所以我们在做项目的时候,经常需要专门针对IE来做些文章,当然对于referer也不例外,今天我们就来看下如何让referer兼容主流浏览器
    2014-11-11
  • 详解webpack之图片引入-增强的file-loader:url-loader

    详解webpack之图片引入-增强的file-loader:url-loader

    这篇文章主要介绍了详解webpack之图片引入-增强的file-loader:url-loader,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 详解springmvc 接收json对象的两种方式

    详解springmvc 接收json对象的两种方式

    本篇文章主要介绍了springmvc 接收json对象的两种方式,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12
  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    通常在我们的HTML页面表单中有大量的数据验证工作, 免不了要写很多验证表单的js代码,这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单,大家拿回去自由扩展吧
    2015-04-04
  • js精确的加减乘除实例

    js精确的加减乘除实例

    下面小编就为大家带来一篇js精确的加减乘除实例,具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript 中断请求几种方案详解

    JavaScript 中断请求几种方案详解

    这篇文章主要介绍了JavaScript 中断请求几种方案详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 超级标签之一键解除网页复制限制、网页自由编辑、显示星号密码功能代码

    超级标签之一键解除网页复制限制、网页自由编辑、显示星号密码功能代码

    实现以上功能不用安装任何插件,把下列书签图标拖动到浏览器书签栏,就可以实现一键解除网页复制限制、网页自由编辑、显示星号密码功能
    2022-09-09
  • JS简单获取当前日期和农历日期的方法

    JS简单获取当前日期和农历日期的方法

    这篇文章主要介绍了JS简单获取当前日期和农历日期的方法,涉及javascript日期运算与字符串转换相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • js 与 php 通过json数据进行通讯示例

    js 与 php 通过json数据进行通讯示例

    这篇文章主要介绍了js与php通过json数据进行通讯的具体实现,需要的朋友可以参考下
    2014-03-03
  • JS全角与半角转化实例(分享)

    JS全角与半角转化实例(分享)

    下面小编就为大家带来一篇JS全角与半角转化实例(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论