網(wǎng)站輸入字符 顯示出來怎么做問答推廣
目錄
為什么用TypeScript？
TS和JS的區(qū)別
控制類成員可見性的訪問關(guān)鍵字？
public
protected），該類及其子類都可以訪問它們。 但是該類的實例無法訪問。
私有（private），只有類的成員可以訪問它們。
接口interface與類型別名type
同
對象
函數(shù)
typeof
泛型T
extends
interface extends interface/type
type & interface/type（與聯(lián)合類型相對，又名交叉類型）
異
interface（數(shù)據(jù)結(jié)構(gòu)）
同名接口自動合并
type（類型關(guān)系）
類型別名
聯(lián)合類型：| 或
元祖類型
工具/高級類型Utility Types
Partial?：T全部屬性變?yōu)榭蛇x項??
Required與Partial相反
Readonly
Pick：T中選K,>
Omit和Pick相反
Extract：T U交集,>
Extract和Exclude相反
判斷類型：is
TS4 入門筆記
1.2W字 | 了不起的 TypeScript 入門教程 - 掘金
typescript史上最強學習入門文章(2w字) - 掘金
2022年了，我才開始學 typescript ，晚嗎？（7.5k字總結(jié)） - 掘金
為什么用TypeScript？
- 強制類型，防止報錯
- 自動類型推斷，保證變量的類型穩(wěn)定
// let a: string -> 類型推斷
let a = 'hello'
a = 123; // error- 強大的類型系統(tǒng)，包括泛型。
- 支持靜態(tài)類型。（主要改進）更有利于構(gòu)建大型應用
代碼可維護性=強類型語言（低級錯誤）+個人素質(zhì)和團隊規(guī)范約束（高級錯誤）
TS和JS的區(qū)別
控制類成員可見性的訪問關(guān)鍵字？
public
protected），該類及其子類都可以訪問它們。 但是該類的實例無法訪問。
私有（private），只有類的成員可以訪問它們。
TS與java不同，TS默認隱式公共的，
TS符合 JS 的便利性，java默認private，符合安全性
接口interface與類型別名type
同
對象
interface User {name: string;age: number;
}
等價于
type User = {name: string;age: number;
};const user: User = {name: "John",age: 25
};
函數(shù)
interface SetUser {(name: string, age: number): void;
}
等價于
type SetUser = (name: string, age: number) => void;const setUser: SetUser = (name, age) => {// 實際的函數(shù)實現(xiàn)console.log(`Setting user: ${name}, ${age}`);
};
typeof
let x = "John";const person: Name<typeof x> = {name: x,
};let div = document.createElement('div');
type B = typeof div
泛型T
interface Name<T> {name: T;
}// 使用 string 類型
const personWithString: Name<string> = {name: "John",
};// 使用 number 類型
const personWithNumber: Name<number> = {name: 25,
};// 定義 Callback 類型
type Callback<T> = (data: T) => void;// Callback 的使用
const stringCallback: Callback<string> = (data) => {console.log(`收到回調(diào)數(shù)據(jù): ${data}`);
};// 定義 Pair 類型
type Pair<T> = [T, T];！const numberPair: Pair<number> = [42, 23];extends
interface extends interface/type
interface Name { name: string; }
等價于
type Name = { name: string; } interface User extends Name { age: number; }type & interface/type（與聯(lián)合類型相對，又名交叉類型）
interface Name { name: string; }
等價于
type Name = { name: string; } type User = Name & { age: number };異
interface（數(shù)據(jù)結(jié)構(gòu)）
同名接口自動合并
?
type（類型關(guān)系）
類型別名
type Str = string
type NameLookup = Dictionary<string, Person>; 聯(lián)合類型：| 或
元祖類型
數(shù)組類型一般是
?
但有時需要存儲不同類型的值
所以可以通過ts特有的元組限制數(shù)組元素的個數(shù)和類型
?
工具/高級類型Utility Types
Partial<T>?：T全部屬性變?yōu)榭蛇x項??
Required與Partial相反
Readonly
Pick<T, K>：T中選K
Omit和Pick相反
type A = {username?: stringage?: numberreadonly gender: string
}type B = Readonly<A>
// Partial(可選)
type C = Partial<A>type D = Pick<A, 'username'|'age'>
//Record(改變類型)
//keyof 操作符可以用來一個對象中的所有 key 值：
type E = Record<keyof A, string>//Required(將可選變?yōu)楸剡x)
type F = Required<A>Extract<T, U>：T U交集
Extract和Exclude相反
判斷類型：is
// ！！！ 使用 is 來確認參數(shù) s 是一個 string 類型
function isString(s): s is string {return typeof s === 'string';
}「2022」TypeScript最新高頻面試題指南 - 掘金