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