TypeScript interface与type区别及用法详解

前言

在TypeScript中，interface与type均用于定义类型结构，可视为定义数据的形状（shape）。形状代表一种设计框架，只要具备特定特征或行为即可归为一类。在Java等语言中，interface主要用于定义行为，类实现接口即表示具备某种能力（如writable或readable），从而通过行为对事物进行分类。尽管interface在Go语言中应用广泛，但在TypeScript中，interface更侧重于类型形状的定义。TypeScript同时也提供了type来定义类型，两者在TypeScript中区别不大，但仍存在细微差异。

interface

interface可用于定义类（class）、对象（object）或函数（function）的形状。


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接口用于描述函数，明确函数的参数类型及返回值类型。


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 interface，它们之间呈现扩展关系而非覆盖关系，这是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 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内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

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

前言

interface

type

附：interface和type不同点

总结

实用工具推荐