【TypeScript】接口interface類型（三）
一、前言
TypeScript的核心原則之一是對值所具有的結(jié)構(gòu)進行類型檢查。 它有時被稱做“鴨式辨型法”或“結(jié)構(gòu)性子類型化”。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。這些方法都應(yīng)該是抽象的，需要由具體的類去實現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法。
二、語法定義
語法：使用 interface 關(guān)鍵字開頭，定義類型對象，其中可以包含字符串和函數(shù)類型
典型的定義與使用參考下面：
interface Person {
name: string;
age: number;
sayHi(): void;
}
const person: Person = {
name: "Alice",
age: 30,
sayHi() {
console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
}
};
三、具體使用及規(guī)則限制
3.1 可選屬性
接口里的屬性不全都是必需的。 有些是只在某些條件下存在，或者根本不存在。 可選屬性在應(yīng)用“option bags”模式時很常用，即給函數(shù)傳入的參數(shù)對象中只有部分屬性賦值了。
下面我們來給Person定義一個接口，其中有些屬性是可選的
interface Person {
name: string,
age: number,
studentNo?: string
}
let persn1: Person = {
name: 'suwu150',
age: 24,
studentNo: '13240124'
}
let person2: Person = {
name: 'suwu150',
age: 24,
}
以上就是一個可選屬性的添加，studentNo這個屬性可以有，也可以不用賦值。我們編譯后，能夠看到如下結(jié)果：
這個Person接口，也能作為參數(shù)傳遞給函數(shù)使用，其中也能按照可選參數(shù)進行處理。
3.2 只讀屬性
有時候我們需要指定一個屬性只能在定義的時候賦值，其他情況下只能讀取，不能再次修改，那就需要處理為只讀屬性。
可以通過在屬性名前添加 readonly 關(guān)鍵字來指定只讀屬性，只讀屬性只能在創(chuàng)建的時候?qū)ζ滟x值，一旦創(chuàng)建完成，就再也不能更改
語法：readonly + 屬性名
interface Person {
readonly name: string,
age: string
}
let person: Person = {
name: 'suwu150',
age: 28
};
person.name = '張三'; // Cannot assign to 'name' because it is a read-only property.
person.age = 30;
編譯器中編譯運行，會發(fā)現(xiàn)
- age 能夠正常賦值，不會提示錯誤
- name報錯，提示是只讀屬性，不能夠再次賦值
3.3 可索引的類型
可索引類型具有一個_索引簽名_，它描述了對象索引的類型，還有相應(yīng)的索引返回值類型。
- 描述通過索引獲取的元素或?qū)傩?，形?Score[0]、Score[‘name’]
簡單看下索引值定義的??例子：
interface Score {
[index: number]: number
}
let score: Score = [23,65,99,20];
console.log(score);
console.log(score[2]);
我們定義了Score接口，具有索引簽名。
以上表示當(dāng)用 number 去索引 Score 接口時，會返回結(jié)果為number類型的值。
需要注意的是TypeScript支持兩種索引簽名： 字符串 和 數(shù)字。下面來看看使用數(shù)字索引和字符串索引的結(jié)果。
interface Person {
[key: number]: number
}
interface Student {
[key: number]: string
}
let person: Person = [23,65,99,20];
let student: Student = ['23','65','99','20'];
console.log(person);
console.log(student)
console.log(person[2]);
console.log(person['2']);
console.log(student[2]);
console.log(student['2']);
從上面的結(jié)果能夠看出，字符串和數(shù)字獲取到的是同一個值，這是因為當(dāng)使用 number來索引時，JavaScript會將它轉(zhuǎn)換成string然后再去索引對象。
3.4 函數(shù)類型
接口能夠描述JavaScript中對象擁有的各種各樣的外形。 除了描述帶有屬性的普通對象外，接口也可以描述函數(shù)類型。
為了使用接口表示函數(shù)類型，我們需要給接口定義一個調(diào)用簽名。 它就像是一個只有參數(shù)列表和返回值類型的函數(shù)定義。參數(shù)列表里的每個參數(shù)都需要名字和類型。
函數(shù)類型使用語法：
interface 接口名 {
(參數(shù)名): 返回值;
}
可以看看簡單的接口中使用函數(shù)類型的實例
interface SetName {
(newName: string): string;
}
let setname: SetName;
setname = (name: string) => {
console.log(name);
return name
};
setname('new suwu150');
編譯運行看看：
在使用函數(shù)類型類型時，需要注意定義的參數(shù)名可以不一致，但參數(shù)類型得保持一致。
3.5 類類型
類類型是TypeScript中比較常規(guī)的一種類型，接口的使用也離不開類類型的使用。
和其他靜態(tài)編譯語言中類似，TypeScript也能夠用它來明確的強制一個類去符合某種契約。
interface Person {
name: string
}
class Student implements Person {
name = '';
constructor(h: number, m: number) { }
}
以上就是一個典型的類類型的接口的使用，如果我們不在Student中初始化name，則會在編譯階段提示屬性缺失
同樣的，不僅僅在接口中能夠?qū)崿F(xiàn)屬性的定義，也能夠定義方法。文章來源：http://www.zghlxwxcb.cn/news/detail-627539.html
以上就是TypeScript接口類型介紹，希望喜歡的同學(xué)點贊加收藏，謝謝。
文章來源地址http://www.zghlxwxcb.cn/news/detail-627539.html
到了這里，關(guān)于【TypeScript】TS接口interface類型（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
