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

目录
  • 前言
  • interface
  • type
  • 附: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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-13

TypeScript定义接口(interface)案例教程

接口的作用: 接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定. 在Typescript中是这么描述的: TypeScript的核心原则之一是对值所具有的结构进行类型检查.它有时被称做"鸭式辨型法"或"结构性子类型化". 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 举个例子: // 定义接口 Person interface Person { name: string; age: numb

Typescript 中的 interface 和 type 到底有什么区别详解

interface VS type 大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别 An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type

对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么区别呢,通过计算得到一些规律. 1.关于tf.nn.conv1d的解释,以下是Tensor Flow中关于tf.nn.conv1d的API注解: Computes a 1-D convolution given 3-D input and filter tensors. Given an input tensor of shape [batch, in_wi

Python中的None与 NULL(即空字符)的区别详解

1.首先要了解Python的对象的概念: Python中,万物皆对象,所有的操作都是针对对象的,那什么是对象,5是一个int对象,'oblong'是一个str对象,异常也是一个对象,抽象一点是,人,猫,够也是一个对象 那对于一个对象,它就有包括两方面的特征:  属性:去描述它的特征  方法: 它所具有的行为 所以,对象=属性+方法 (其实方法也是一种属性,一种区别于数据属性的可调用属性 把具有相同属性和方法的对象就可以归为一类,即Classl.类就好比是一张蓝图,使用一个类可以创建多个对象实例

JS中script标签defer和async属性的区别详解

向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

对pandas中两种数据类型Series和DataFrame的区别详解

1. Series相当于数组numpy.array类似 s1=pd.Series([1,2,4,6,7,2]) s2=pd.Series([4,3,1,57,8],index=['a','b','c','d','e']) print s2 obj1=s2.values # print obj1 obj2=s2.index # print obj2 # print s2[s2>4] # print s2['b'] 1.Series 它是有索引,如果我们未指定索引,则是以数字自动生成. 下面是一些例

对python中 math模块下 atan 和 atan2的区别详解

atan 和 atan2 都是反正切函数,返回的都是弧度 对于两点形成的直线,两点分别是 point(x1,y1) 和 point(x2,y2),其斜率对应角度的计算方法可以是: angle = atan( (y2-y1)/(x2-x1) ) 或 angle = atan2( y2-y1, x2-x1 ) 因此可以看出 atan 和 atan2 的区别: 1.参数的个数不同:atan 为单个参数,atan2为两个参数 2.atan2 的优点在于: 如果 x2-x1等于0 ,角度依然可以计算,但是

python中urllib.request和requests的使用及区别详解

urllib.request 我们都知道,urlopen()方法能发起最基本对的请求发起,但仅仅这些在我们的实际应用中一般都是不够的,可能我们需要加入headers之类的参数,那需要用功能更为强大的Request类来构建了 在不需要任何其他参数配置的时候,可直接通过urlopen()方法来发起一个简单的web请求 发起一个简单的请求 import urllib.request url='https://www.douban.com' webPage=urllib.request.urlopen(

C#中托管DLL和非托管DLL的区别详解

首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环境生成的DLL文件. 托管DLL文件,可以在Dotnet环境通过 "添加引用" 的方式,直接把托管DLL文件添加到项目中.然后通过 Using DLL命 名空间,来调用相应的DLL对象 .  非托管DLL文件,在Dotnet环境应用时,通过 DllImport 调用. C# 调用非托管DLL文件.DLL文件是用C语言编写的. 托管DLL就是能够在公共

C#中数组、ArrayList和List三者的区别详解

在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. //数组 string[] s=new string[2]; //赋值 s[0]="a"; s[1]="b"; //修改 s[1]="a1"; 但是数组存在一些不足的地方.在数组的两个数据间插入数据是很麻烦的,而且在声明数组的时候必须指定数组的长度

C#中数组、ArrayList和List三者的区别详解及实例

在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. //数组 string[] s=new string[2]; //赋值 s[0]="a"; s[1]="b"; //修改 s[1]="a1"; 但是数组存在一些不足的地方.在数组的两个数据间插入数据是很麻烦的,而且在声明数组的时候必须指定数组的长度