==1. Typescript是什么==
1.1 Typescript與Typescript的區(qū)別
| Typescript | Javascript |
|---|---|
JS的超集，本質(zhì)是JS + Types，即向JS中添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?/td>
| 一種腳本語言，用于創(chuàng)建動(dòng)態(tài)網(wǎng)頁 |
| 可以在編譯期間發(fā)現(xiàn)并糾正錯(cuò)誤 | 解釋性語言，只能在運(yùn)行時(shí)發(fā)現(xiàn)錯(cuò)誤 |
| 強(qiáng)類型，支持靜態(tài)和冬天類型 | 弱類型，沒有靜態(tài)類型選項(xiàng) |
最終被編譯成JS代碼，使瀏覽器可以理解 |
可以直接在瀏覽器中使用 |
| 支持模塊、泛型和接口 | 不支持模塊、泛型或接口 |
1.2 Typescript工作流程
（圖略）
==2. 基本數(shù)據(jù)類型==
2.1 數(shù)字
const a: number = 3;
2.2 字符串
const b: string = '1';
2.3 數(shù)組
const c: number[] = [1,2,3];
const d: Array<number> = [1, 3];
const arr: any[] = [1, '33', true];
// 元祖
const e: [number, string] = [1, 'www'];
2.4 枚舉
// ts支持?jǐn)?shù)字和基于字符串的枚舉
// 枚舉會(huì)生成一個(gè)maping對象
enum Result {
success = 1,
fail = 2,
}
const res: Result = Result.success // 1
// 減少冗余代碼
const list = [{
key: 1,
value: 'tomato'
}, {
key: 2,
value: 'banana'
}]
// 使用枚舉：
enum FruitEnum {
tomato = 1,
banana = 2,
}
const list = Object.entries(FruitEnum)
// 當(dāng)某個(gè)變量需要使用枚舉時(shí)，不能定義為string
enum GenderEnum {
male = '1',
female = '2',
}
const gender: keyof typeof GenderEnum = 'male';
2.5 布爾類型
const g: boolean = true;
2.6 對象
const obj： object = {};
2.7 undefined / null
// 常用于組合類型
let j: number | undefined;
let i: number[] | null;
j = 100;
i = [0];
2.8 任意類型
// 任何類型都可以被歸為any類型，全局超級類型
// 參數(shù)可以是任何一種類型
// 相當(dāng)于放棄了類型檢測，盡量不使用
let h: any = 1;
h = true;
h = 'str';
// 如果對于某個(gè)值的類型不確定，可使用unknown
// unknown是任何類型的子類型
let value: unknown;
let value1: unknwon = value; // OK
let value2: any = value; // OK
let value3: number = value; // Error
==3. 函數(shù)==
3.1 函數(shù)聲明
// void
// 指定方法類型，表示沒有返回值
function func(): void {
console.log(111)
}
// 如果方法有返回值，可以加上返回值的類型
function bb(): number {
return 11;
}
3.2 方法傳參
// ?表示參數(shù)可傳可不傳，不傳就是undefined
// 可選參數(shù)要放在普通參數(shù)后面，否則會(huì)編譯錯(cuò)誤
function getInfo(name: string, age: number, company = 'huawei', addr?: string) {
const str = addr ? `-${addr}` : '';
return `${name}-${age}-${company}${str}`;
}
// 參數(shù)超過4個(gè)的時(shí)候，可使用對象來聚合
interface IParams {
name: string;
key: string;
page: number;
size: number;
id?: string;
}
function handleList(params: IParams) {
// to do
}
==4. 接口==
// 接口是對行為的抽象
interface Props {
name: string;
handleClick(): void;
}
// 子組件
const ChildItem = (props: Props) => (
<div onClick={props.handleClick}>
{props.name}
</div>
)
// 父組件
const Father = () => {
const handleClick = () => {
console.log('clicked!');
}
return (
<div>
<ChildItem name="Click me" handleClick={handleClick} />
</div>
)
}
// 交叉類型
interface SpiderProps {
type: string
swim(): void;
}
interface ManProps {
name: string;
age: number;
addr?: string;
}
type SpiderMan = SpiderProps && ManProps
let bob: SpiderMan = {
name: 'Bob',
age: 20,
type: '1',
swim: () => {
console.log('I can swim.');
},
}
// 接口可以被定義多次，會(huì)自動(dòng)合并為單個(gè)接口
interface Point {
x: number
}
interface Point {
y: number
}
const point: Point = {
x: 10,
y: 20,
}
==5. 斷言==
5.1 非空斷言
// x!將會(huì)從x值域中排除null和undefined
function func(str: string | undefined | null) {
const finalStr: string = str!; // OK
const otherStr: string = str; // Error
}
function handleClick(onClick: void | undefined) {
onClick!(); // OK
onClick(); // Error, Object is possibly 'undefined'
}
==6. 運(yùn)算符==
6.1 邏輯空賦值運(yùn)算符??=
6.2 空值合并運(yùn)算符??
// 當(dāng)左側(cè)是操作數(shù)為null或者undefined時(shí)，返回其右側(cè)操作符，否則返回左側(cè)操作數(shù)
const foo = null ?? 'hello'; // hello
const baz = 0 ?? 42; // 0;
const val = 0 || 42; // 42;
// 不能和&&或者||組合使用
const val1 = null || undefined ?? 'hello'; // SyntaxError
const val2 = (null || undefined) ?? 'hello'; // hello
6.3 可選鏈?zhǔn)讲僮鞣?code>?.
// 允許讀取位于連接對象鏈深處的屬性值
// before:
const name = arr && arr[0] && arr[0].links && arr[0].links[0]
&& arr[0].links[0].sourceNode && arr[0].links[0].sourceNode.name || 'node'
// after:
const name = arr![0]?.links![0]?.sourceNode?.name || 'node';
// 處理函數(shù)
// before:
function doSth (onError) {
if (onError) {
onError(err.msg)
}
}
// after:
function doSth (onError) {
onError?.(err.msg)
}
// 可選鏈不能用于賦值
let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
