TypeScript中如何使用interface和type

小編給大家分享一下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”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！