1. 巧用 typeof
一般我們情況下，我們都是先寫類型接口举农，再去使用。
interface initA {
inita: number,
}
const initA: initA = { inita: 123 }
如何巧用 typeof,如下敞嗡。typeof 可以自動(dòng)識(shí)別類型颁糟，如果只有一個(gè)屬性，可以減少代碼量喉悴。也可以通過 typeof 去進(jìn)行一些校驗(yàn)判斷棱貌。
const initA = {
inita: 123,
initb: 'aaa'
}
type initA = typeof initA;
if (typeof initA.inita === 'number') {
console.log('inita 是一個(gè)number')
}
控制臺(tái)輸出的值為：
問題：TypeScript 是靜態(tài)類型，所以在進(jìn)行項(xiàng)目聯(lián)調(diào)的時(shí)候箕肃，無法在運(yùn)行時(shí)檢驗(yàn)后端返回的值是否正確婚脱。
思路：當(dāng)拿到后端值，進(jìn)行 typeof 的檢驗(yàn)看是否與我們約定好的值是否匹配勺像。匹配才進(jìn)行后續(xù)的 setState 的操作障贸。如果，后端返回的值為復(fù)雜類型（對(duì)象數(shù)組吟宦，對(duì)象+字符串等）則可以考慮是否封裝一組循環(huán)遍歷值篮洁，進(jìn)行比較。type resultConst = { id: number, name: string, } const result: resultConst = await Request({ url: '/getopportunityconst' }); // 請(qǐng)求獲得的值 console.log(typeof result.id === 'number'); // 返回true
2. 巧用聯(lián)合類型
如何寫一個(gè)殃姓，Color 要么是 red 顏色袁波，要么是 yellow 顏色。
不推薦 -->
interface Color {
red?: string,
yellow?: string,
}
推薦 -->
type Color = { red: string, } | { yellow: string, }
原因：interface Color 可以理解為在 Color 中既有 red 也有 yellow 兩個(gè)非必須存在的屬性蜗侈。而 type Color 才是如題意篷牌。
3. 巧用查找類型
Person 為如下：
interface Person {
addr: {
city: string,
street: string,
num: number,
}
}
** 此時(shí)需要 addr 的類型時(shí)，你有什么寫法踏幻？**
interface Address {
city: string,
street: string,
num: number,
}
interface Person {
addr: Address
}
但是這樣把 Address 單獨(dú)拎出來賦值娃磺，可行但是代碼并不是最簡(jiǎn)潔的。
// Person["addr"] // This is Address.
interface Person1 {
addr1: Person["addr"],
}
有些場(chǎng)景如果后者會(huì)讓代碼更整潔、易讀偷卧。
4. 巧用 keyof
官網(wǎng)解釋，什么是 keyof吆倦。
interface Itest {
name: string,
age: number,
address: string,
}
type ant = keyof Itest;
查看 ant 會(huì)出來什么听诸？type ant = "name" | "age" | "address"
keyof 與 Object.keys 略有相似，只不過 keyof 取 interface 的鍵蚕泽。
假設(shè)有一個(gè) object 如下所示晌梨，我們需要使用 typescript 實(shí)現(xiàn)一個(gè) get 函數(shù)來獲取它的屬性值
const data = {
a: 3,
hello: 'world'
}
function get(o: object, name: string) {
return o[name]
}
如上這么寫會(huì)有什么缺點(diǎn)呢？（這也是很多小伙伴問须妻，ts 的優(yōu)點(diǎn)是什么）
1仔蝌、函數(shù)無法確認(rèn)返回類型: ts 最大的優(yōu)點(diǎn)是類型校驗(yàn)。
2荒吏、無法對(duì) key 做約束： 可能會(huì)犯拼寫的錯(cuò)誤敛惊。
我們使用 keyof 來增強(qiáng)一下 get 函數(shù)的類型功能
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
console.log(o[name]) // 3
return o[name]
}
get(data, 'a')
更升級(jí)版，突然讓我想到 form表單傳值是否也可以借鑒此方法
function get<T extends object, K extends keyof T>(o: T, name: K[]): T[K][] {
console.log(name.map(item => o[item])); // [3, "world"]
return name.map(item => o[item]);
}
get(data, [ 'a', 'hello'])
剛剛以上說的無法確認(rèn)返回類型绰更，很容易理解瞧挤。那無法對(duì) key 進(jìn)行約束，讓我們來看一下會(huì)出現(xiàn)怎樣的情況儡湾。
更多 keyof 小技巧用法特恬，官網(wǎng)給得很詳細(xì)
https://www.tslang.cn/docs/handbook/advanced-types.html
5. for...in 和 for...of
迭代器和生成器并沒有那么難理解
let list = ['hello', 'Danile', '1226'];
// for...in 輸出的是key值
for (let i in list) {
console.log(i); // '0', '1', '2'
}
// for...of 輸出的是value值
for (let i of list) {
console.log(i); // 'hello', 'Danile', '1226'
}
此 for...of 編譯為 js 的代碼如下
var list = ['hello', 'Danile', '1226'];
for (var i in list) {
console.log(i);
}
for (var _i = 0, list_1 = list; _i < list_1.length; _i++) {
var i = list_1[_i];
console.log(i);
}
