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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uni-app开发微信小程序遇到的部分踩坑实战

    uni-app开发微信小程序遇到的部分踩坑实战

    最近在用uni-app开发微信小程序,这里将开发中遇到的坑和问题记录一下,所以下面这篇文章主要给大家介绍了关于uni-app开发微信小程序遇到的部分踩坑,需要的朋友可以参考下
    2023-02-02
  • 在HTML代码中使用JavaScript代码的例子

    在HTML代码中使用JavaScript代码的例子

    这篇文章主要介绍了在HTML代码中使用JavaScript代码的例子,本文是入门级示例,初学js的同学不要错过,需要的朋友可以参考下
    2014-10-10
  • js实现3D旋转相册

    js实现3D旋转相册

    这篇文章主要为大家详细介绍了js实现3D旋转相册,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js不能跳转到上一页面的问题解决方法

    js不能跳转到上一页面的问题解决方法

    用JS:history.go(-1)就可以回到A页面,如果使用Click,Change事件等激发了页面的回传,此时用history.go(-1)就回不到A页面了,遇到此问题的朋友们可以祥看本文
    2013-03-03
  • 微信小程序实现Swiper轮播图效果

    微信小程序实现Swiper轮播图效果

    这篇文章主要介绍了微信小程序实现Swiper轮播图效果,文中示例代码介绍的非常详细,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。
    2011-03-03
  • TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口Interface详解(对象类型的强大工具)

    TypeScript中的接口是一个强大而灵活的特性,它为我们提供了一种清晰、简洁的方式来定义对象的结构和类型,通过使用接口,我们可以编写更加健壮、可维护的代码,这篇文章主要介绍了TypeScript中的接口(Interface):对象类型的强大工具,需要的朋友可以参考下
    2024-08-08
  • window.print()局部打印三种方式(小结)

    window.print()局部打印三种方式(小结)

    本文主要介绍了window.print()局部打印三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 全面解析Bootstrap中tooltip、popover的使用方法

    全面解析Bootstrap中tooltip、popover的使用方法

    这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法,了解提示框、弹出框的实现原理,感兴趣的朋友可以参考一下
    2016-06-06
  • JavaScript中三种观察者实现案例分享

    JavaScript中三种观察者实现案例分享

    前面突然看到 Object.defineProperty,就顺道想到 Proxy,然后就想到了观察者案例,这边还没有用 javascript编写一个观察者的案例呢,顺道加入了一个 event-bus 监听事件案例,凑一起看一看不同的实现方式,需要的朋友可以参考下
    2023-08-08

最新评论