iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript中正确使用interface和type的方法实例
  • 313
分享到

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

2024-04-02 19:04:59 313人浏览 八月长安
摘要

目录前言interface type 附:interface和type不同点总结前言 interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape

前言

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

--结束END--

本文标题: TypeScript中正确使用interface和type的方法实例

本文链接: https://www.lsjlt.com/news/135792.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript中正确使用interface和type的方法实例
    目录前言interface type 附:interface和type不同点总结前言 interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape...
    99+
    2024-04-02
  • 微信小程序中正确使用地图的方法实例
    目录前言1. 准备2. 实战2.1 配置小程序权限2.2 封装工具函数2.2.1 全局函数与变量2.2.2 工具函数2.3 跳转选址页面前的处理2.4 跳转后的处理2.4.1 页面初...
    99+
    2024-04-02
  • Python词云的正确实现方法实例
    一、相关模块 jieba:中文分词 wordcloud :Python词云库 imageio:读取图形数据 安装: pip install jieba pi...
    99+
    2024-04-02
  • python爬虫之代理ip正确使用方法实例
    目录代理ip原理输入网址后发生了什么呢?代理ip做了什么呢? 为什么要用代理呢?爬虫代码中使用代理ip检验代理ip是否生效 未生效问题排查1.请求协议不匹配2.代...
    99+
    2024-04-02
  • Go - 使用 pgtypes 的正确方法
    php小编西瓜今天为大家介绍一种正确的使用 pgtypes 的方法,这对于使用 Go 语言进行 PostgreSQL 数据库编程的开发者来说非常重要。pgtypes 是一个 Go 语言...
    99+
    2024-02-13
  • TypeScript 中使用 getter 和 setter的方法
    使用 get 和 set 关键字在 TypeScript 中定义 getter 和 setter。 getter 使我们能够将属性绑定到在访问属性时调用的函数,而 setter 将属...
    99+
    2023-05-14
    TypeScript 使用 getter 和 setter TypeScript  getter 和 setter
  • 关于Java中@SuppressWarnings的正确使用方法
    目录@SuppressWarnings比较常见,理解和使用起来都很简单。 通过源码可以看出,支持在类、属性、方法、参数、构造方法、本地变量上使用。 @SuppressWarning...
    99+
    2023-05-19
    Java @SuppressWarnings @SuppressWarnings使用
  • JS中数据类型的正确判断方法实例
    目录前言 typeof是否能正确判断类型? instanceof是否能正确判断类型? Object.prototype.toString.call() constructor Arr...
    99+
    2024-04-02
  • 如何正确的使用pykeyboard方法
    如何正确的使用pykeyboard方法?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。· 键盘操作k.type_string(‘abcdefg') --输入内容k.p...
    99+
    2023-06-08
  • 正确使用dotnet-*工具的方法
    目录安装验证dotnet-dumpcreatedump分析coredump文件相关资料:安装 因为我们现在都是容器化时代了,所以我们可以把这类工具全部制作成基础镜像 ...
    99+
    2024-04-02
  • 正确使用dotnet工具的方法
    正确使用dotnet工具的方法有以下几步:1. 安装dotnet SDK:首先需要在计算机上安装dotnet SDK,可以从dotn...
    99+
    2023-08-16
    dotnet
  • Protobuf在Cmake中的正确使用方法详解
    Protobuf是google开发的一个序列化和反序列化的协议库,我们可以自己设计传递数据的格式,通过.proto文件定义我们的要传递的数据格式。例如,在深度学习中常用的ONNX交换...
    99+
    2024-04-02
  • Java中怎么正确使用wait-notify方法
    本篇内容介绍了“Java中怎么正确使用wait-notify方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. sleep(long n...
    99+
    2023-06-29
  • vue中使用TypeScript的方法
    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集,并支持了泛型、类型、命名空间、枚举等特性...
    99+
    2024-04-02
  • MySQL分区表的正确使用方法
    MySQL分区表概述 我们经常遇到一张表里面保存了上亿甚至过十亿的记录,这些表里面保存了大量的历史记录。 对于这些历史数据的清理是一个非常头疼事情,由于所有的数据都一个普通的表里。所以只能是启用一个或多个...
    99+
    2024-04-02
  • 如何正确的使用mysql-joins方法
    今天就跟大家聊聊有关如何正确的使用mysql-joins方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。假设有两个表,Table_A和Table_B。这两个表中的数据如下所示:TA...
    99+
    2023-06-06
  • Python线程池的正确使用方法
    目录Python线程池的正确使用1、为什么要使用线程池呢?2、线程池怎么用呢?3、如何非阻塞的获取线程执行的结果4、线程池的运行策略Python线程池的正确使用 1、为什么要使用线程...
    99+
    2024-04-02
  • Vue3中正确使用ElementPlus的示例代码
    目录一、创建Vue3项目二、进入项目,安装Element-Plus三、配置Icon四、测试运行五、Git提交一下一、创建Vue3项目 vue create vue_element...
    99+
    2023-01-28
    Vue3使用ElementPlus ElementPlus使用
  • Go语言中interface语法与使用实例分析
    这篇“Go语言中interface语法与使用实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Go语言中interfac...
    99+
    2023-07-02
  • setTimeout在vue中的正确使用方式
    目录setTimeout在vue中的正确使用遇到了1个坑问题出在我的格式上面解决vue在setTimeout内修改this失效使用箭头函数总结setTimeout在vue中的正确使用...
    99+
    2023-01-28
    vue使用setTimeout vue setTimeout setTimeout在vue使用
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作