TypeScript中正確使用interface和type的方法實(shí)例
前言
interface 和 type 都是用來(lái)定義類(lèi)型，可以理解定義 shape ，那么 shape 表示一種設(shè)計(jì)大框，或者說(shuō)只要具有某些特征或者行為就是為一類(lèi)事物。在有些面向例如 Java 語(yǔ)言中，interface 用于定義行為，如果一個(gè)類(lèi)實(shí)現(xiàn)了某一個(gè) interface 表示該類(lèi)具有某種行為或者說(shuō)具有某種能力，例如writable 或者 readable 。可以通過(guò)行為來(lái)對(duì)事物進(jìn)行劃分。interface 在 golang 語(yǔ)言中應(yīng)用風(fēng)生水起，但是在 TypeScript interface 更偏于一種類(lèi)型 shape，同時(shí) TypeScript 也提供了 type 用于定義類(lèi)型，其實(shí) interface 和 type 在 TypeScript 中區(qū)別不大，但是還是有點(diǎn)區(qū)別。
interface
interface 可以用于對(duì)類(lèi)(class)、對(duì)象(object)或者函數(shù)(function)進(jìn)行 shape。
interface Tut{
title:string
isComplete:boolean
}
定義了一個(gè)接口 interface 用于表示 Tut 類(lèi)型, 然后定義類(lèi)型 Tut 的變量 machineLearningTut
const machineLearningTut:Tut = {
title:"machine learning basic",
isComplete:true
}
如果類(lèi)型為 Tut 的 machineLearningTut 沒(méi)有完全實(shí)現(xiàn)接口接口定義屬性或者方法就會(huì)在編譯階段給出友好的提示
const machineLearningTut:Tut = {
title:"machine learning basic",
}
提示類(lèi)型 Tut 的 machineLearningTut 沒(méi)有實(shí)現(xiàn) isComplete 這個(gè)在接口中已經(jīng)聲明的屬性。
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;
}
也可以定義類(lèi) VideoTut 實(shí)現(xiàn) Tut 接口
interface Greet{
(name:string):string
}
const greet:Greet = (name)=> `hello ${name}`
也可以定義 Greet 接口用于 shape 函數(shù)，定義函數(shù)的參數(shù)和函數(shù)返回值類(lèi)型
interface AdvanceTut extends Tut{
isFree:boolean
}
const machineLearningTut:AdvanceTut = {
title:"machine learning basic",
isComplete:true,
isFree:true
}
接口間是可以通過(guò) extend 來(lái)實(shí)現(xiàn)接口間的繼承(擴(kuò)展)，AdvanceTut 是對(duì) Tut 的擴(kuò)展，在 type 不支持 extend 來(lái)實(shí)現(xiàn) type 間的擴(kuò)展。
interface Tut{
title:string
isComplete:boolean
}
interface Tut{
isFree:boolean
}
const machineLearningTut:Tut = {
title:"machine learning basic",
isComplete:true,
isFree:true
}
上面連續(xù)聲明了兩個(gè) Tut 同名 inteface 這兩 Tut 顯示是擴(kuò)展的關(guān)系，并不是覆蓋的關(guān)系，這一點(diǎn)也是 type 也是不具備的特點(diǎn)
type
其實(shí) type 用法和 interface 用法大同小異，不過(guò) type 便于類(lèi)型，可以是 JavaScript 基礎(chǔ)類(lèi)型的別名。其實(shí) type 從本質(zhì)還是和 interface 還是有些區(qū)別，這個(gè)可能即使解釋了還需要大家在實(shí)踐過(guò)程慢慢體會(huì)。
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 類(lèi)型可以 & 實(shí)現(xiàn)對(duì) type 的擴(kuò)展
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
}
而且前后端定義類(lèi)型也可以用 type 來(lái)實(shí)現(xiàn)，如下可以定義多個(gè)基本類(lèi)型，這些定義好的類(lèi)型可以定義新的類(lèi)型。
type onChaneType = (newValue:string)=>void
type InputType = 'text'|'email';
type InputValue = string
export type InputProps = {
type:InputType;
value:InputValue;
onChane:onChaneType
}
附：interface和type不同點(diǎn)
type可以聲明基本類(lèi)型別名、聯(lián)合類(lèi)型、元祖等類(lèi)型
// 基本類(lèi)型別名
type Name = string;
// 聯(lián)合類(lèi)型
interface Dog {
wong()
}
interface Cat {
miao();
}
type Pet = Dog | Cat;
// 具體定義數(shù)組每個(gè)位置的類(lèi)型
type PetList = [Dog, Pet];
type語(yǔ)句中還可以使用typeof獲取實(shí)例的類(lèi)型進(jìn)行賦值
// 當(dāng)你想要獲取一個(gè)變量的類(lèi)型時(shí)，使用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;
}
總結(jié)
到此這篇關(guān)于TypeScript中正確使用interface和type的文章就介紹到這了,更多相關(guān)TypeScript使用interface和type內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
uni-app開(kāi)發(fā)微信小程序遇到的部分踩坑實(shí)戰(zhàn)
最近在用uni-app開(kāi)發(fā)微信小程序,這里將開(kāi)發(fā)中遇到的坑和問(wèn)題記錄一下,所以下面這篇文章主要給大家介紹了關(guān)于uni-app開(kāi)發(fā)微信小程序遇到的部分踩坑,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了在HTML代碼中使用JavaScript代碼的例子,本文是入門(mén)級(jí)示例,初學(xué)js的同學(xué)不要錯(cuò)過(guò),需要的朋友可以參考下2014-10-10
js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
js不能跳轉(zhuǎn)到上一頁(yè)面的問(wèn)題解決方法
用JS：history.go(-1)就可以回到A頁(yè)面，如果使用Click,Change事件等激發(fā)了頁(yè)面的回傳，此時(shí)用history.go(-1)就回不到A頁(yè)面了，遇到此問(wèn)題的朋友們可以祥看本文2013-03-03
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)Swiper輪播圖效果，文中示例代碼介紹的非常詳細(xì)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對(duì)象屬性complete ，事件onload 異步加載圖片)
通過(guò)js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入，我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。2011-03-03
TypeScript中的接口Interface詳解(對(duì)象類(lèi)型的強(qiáng)大工具)
TypeScript中的接口是一個(gè)強(qiáng)大而靈活的特性,它為我們提供了一種清晰、簡(jiǎn)潔的方式來(lái)定義對(duì)象的結(jié)構(gòu)和類(lèi)型,通過(guò)使用接口,我們可以編寫(xiě)更加健壯、可維護(hù)的代碼,這篇文章主要介紹了TypeScript中的接口(Interface):對(duì)象類(lèi)型的強(qiáng)大工具,需要的朋友可以參考下2024-08-08
window.print()局部打印三種方式(小結(jié))
本文主要介紹了window.print()局部打印三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
全面解析Bootstrap中tooltip、popover的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中tooltip、popover的使用方法，了解提示框、彈出框的實(shí)現(xiàn)原理，感興趣的朋友可以參考一下2016-06-06
JavaScript中三種觀察者實(shí)現(xiàn)案例分享
前面突然看到 Object.defineProperty,就順道想到 Proxy,然后就想到了觀察者案例,這邊還沒(méi)有用 javascript編寫(xiě)一個(gè)觀察者的案例呢,順道加入了一個(gè) event-bus 監(jiān)聽(tīng)事件案例,湊一起看一看不同的實(shí)現(xiàn)方式,需要的朋友可以參考下2023-08-08