資訊專欄INFORMATION COLUMN
摘要：使用場景數(shù)據(jù)類型聲明和約束聲明數(shù)據(jù)類型使用數(shù)據(jù)類型面向?qū)ο缶幊踢@里和面向?qū)ο笳Z言類似，用于定義對象接口，聲明對象的結(jié)構(gòu)，定義類時(shí)可以實(shí)現(xiàn)接口，滿足這個(gè)接口定義的功能。
什么是接口
TypeScript的核心就是類型檢查，接口就是用于聲明類型，給內(nèi)部或第三方使用者提供類型聲明和約束。
使用場景數(shù)據(jù)類型聲明和約束
// 聲明數(shù)據(jù)類型
interface CustomerInfo {
customerCode: string;
customerName: string;
}
// 使用數(shù)據(jù)類型
function helloCustomer(customerInfo: CustomerInfo) {
console.log(`Hello, ${customerInfo.customerName}!`);
}
helloCustomer({customerCode: "1001", customerName: "Jee"}); // ok
helloCustomer({customerName: "Jee"}); // error, Property "customerCode" is missing
面向?qū)ο缶幊?/p>
這里和面向?qū)ο笳Z言類似，用于定義對象接口，聲明對象的結(jié)構(gòu)，定義類時(shí)可以實(shí)現(xiàn)接口，滿足這個(gè)接口定義的功能。
// 接口聲明
interface Animal {
name: string;
}
// 接口繼承
interface Mammal extends Animal {
legNum: number;
sound(): string;
}
// 類實(shí)現(xiàn)
class Bull implements Mammal {
name: string;
legNum: number;
constructor(name: string) {
this.name = name;
this.legNum = 4;
}
sound() {
return "moo";
}
}
// 實(shí)例
let bull1 = new Bull("bull1");
console.log(bull1.sound()); // moo
可變接口屬性
有兩種方式可以實(shí)現(xiàn)可變屬性，屬性明確時(shí)，推薦第一種。不明確時(shí)可以用第二種。
可選屬性，定義可以選傳的屬性
interface CustomerInfo {
customerCode: string;
customerName: string;
customerAddr?: string; // 可選屬性
}
索引類型，支持string，number索引屬性
interface CustomerInfo {
customerCode: string;
customerName: string;
customerAddr?: string; // 可選屬性
[key: string]: any; // 其他任意名稱，任意類型的屬性
}
這里說明一下，因?yàn)镴avaScript對象中，數(shù)字索引是會轉(zhuǎn)換成string來取值的。如果一個(gè)接口里面，同時(shí)有number、string索引屬性時(shí)，number索引屬性的類型，必須時(shí)string索引屬性的子類型。也就是，number索引的屬性類型，必須能被string索引的屬性類型覆蓋；用number索引去取值，取到的值也是string索引屬性的類型。靜態(tài)屬性和只讀屬性
靜態(tài)類型，即類屬性，static修飾
只讀屬性，初始化后不能修改，readonly修飾
interface CustomerInfo {
static greeting = "Hello"; // 靜態(tài)屬性
static readonly standardGreeting = "Hello"; // 只讀靜態(tài)屬性
readonly customerCode: string; // 只讀屬性
customerName: string; // 普通屬性
}
const vs readonly，變量用const，屬性用readonly函數(shù)類型
接口除了能描述對象類型，還能描述函數(shù)類型（這個(gè)和面向?qū)ο笳Z言有點(diǎn)不一樣，需要理解一下）。
interface SearchFunc {
(content: string, key: string): boolean;
}
// 這里參數(shù)名可以不一樣，類型也可以省略
let mySearchFunc: SearchFunc = (c, k) => {
return c.search(k) > -1;
}
后續(xù)
會再寫一遍類的學(xué)習(xí)，一篇接口與類的結(jié)合使用。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110302.html
摘要：序列文章從項(xiàng)目中由淺入深的學(xué)習(xí)微信小程序和快應(yīng)用從項(xiàng)目中由淺入深的學(xué)習(xí)前言為什么會有大家有沒想過這個(gè)問題原因是是弱類型編程語言也就是申明變量類型可以任意變換。是的超集，也相當(dāng)于預(yù)處理器本文通過一個(gè)項(xiàng)目來讓你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章 從項(xiàng)目中由淺入深的學(xué)習(xí)vue,微信小程序...
摘要：接口前端程序員很難理解的點(diǎn)也是一門面向?qū)ο蟮恼Z言，但是中它是基于原型實(shí)現(xiàn)的，中使用了類，這樣會更清晰的體會到面向?qū)ο筮@一說法，但是實(shí)際在中的面向?qū)ο蟾油暾?，它跟這些語言一樣，通過接口和類去完整的面向?qū)ο缶幊獭? 從入門到放棄的java 初中時(shí)自學(xué)過JAVA，學(xué)了大概一個(gè)多月吧， 學(xué)了一個(gè)多月，看視頻這些，后面放棄了編程。 依稀記得，那段日子極度苦逼，我想如果當(dāng)時(shí)是學(xué)javaScrip...
摘要：接口前端程序員很難理解的點(diǎn)也是一門面向?qū)ο蟮恼Z言，但是中它是基于原型實(shí)現(xiàn)的，中使用了類，這樣會更清晰的體會到面向?qū)ο筮@一說法，但是實(shí)際在中的面向?qū)ο蟾油暾?，它跟這些語言一樣，通過接口和類去完整的面向?qū)ο缶幊獭? 從入門到放棄的java 初中時(shí)自學(xué)過JAVA，學(xué)了大概一個(gè)多月吧， 學(xué)了一個(gè)多月，看視頻這些，后面放棄了編程。 依稀記得，那段日子極度苦逼，我想如果當(dāng)時(shí)是學(xué)javaScrip...
摘要：是的超級，遵循最新的規(guī)范相當(dāng)于包含了的語法。表示方法沒有返回任何類型類型表示的是那些永不存在的值的類型，例如異常錯(cuò)誤寫法錯(cuò)誤三函數(shù)內(nèi)容概述函數(shù)的定義可選參數(shù)默認(rèn)參數(shù)剩余參數(shù)函數(shù)重載箭頭函數(shù)。 一、Typescript 介紹、環(huán)境搭建 1.1 Typescript 介紹 1.TypeScript 是由微軟開發(fā)的一款開源的編程語言，像后端 java、C#這樣的面向?qū)ο笳Z言可以讓 js 開發(fā)...
閱讀 3153·2021-10-08 10:04
閱讀 1096·2021-09-30 09:48
閱讀 3466·2021-09-22 10:53
閱讀 1683·2021-09-10 11:22
閱讀 1697·2021-09-06 15:00
閱讀 2156·2019-08-30 15:56
閱讀 717·2019-08-30 15:53
閱讀 2287·2019-08-30 13:04
