TypeScript之簡單型別&複雜型別
阿新 • • 發佈:2021-08-24
簡單型別
let my_name: string = '333';
void => 返回空值
function getName(str: string): void {
// 使用void 即 沒有返回值
}
getName('222')
any => 任意型別,這裡當型別不確定的時候,就可以使用 any 任意型別,不到萬不得已不使用
let abc: any
abc = {}
字面量 => 定義什麼,就只能賦值什麼
let animal: 'dog' | 'cat';
animal = 'dog';
animal = 'cat';
複雜型別
陣列 array => 宣告單一指定型別的陣列
let arr: number[] = [1, 2, 3]
元組 tuple => 宣告多個型別的陣列,但長度要一致
let tuple: [number, string] = [2, '4']
介面 interface => 它能很方便的幫我們定義 Object 型別,它是非常的靈活可以描述物件的各種型別
interface device { readonly id: 1, // readonly => 不可更改的 type: string, width: number, height?: number, // ? => 可以省略 } let phone: device = { id: 1, type: 'xiaomi', width: 40, }
函式 funtion => 我們要規定函式的 輸入型別 和 返回型別; 在形參後面接冒號宣告 形參的型別,在 ()後面冒號宣告 返回值型別
function sum(num1: number, num2: number, num3?: number): number { return num1 + num2; } sum(2, 3) // 傳入多餘的引數,或非指定型別的引數均會報錯 sum(2, 3, 4) const sum2 = (num1: number, num2: number): number => { return num1 + num2; } const sum3 = (num1: any, num2: any) => { return num1 + num2; } interface sum { (num1: number, num2: number): number } let mySum: sum = sum3
聯合型別 union types => 可以指定哪幾種類型
let union: number | string;
union = '3';
union = 'aaa';
物件 object => let a: object; 是不是沒有什麼意義,因為 js 中物件太多了
let object: { name: string, age: number }
object = {
name: 'zhangsan',
age: 18
} // 屬性必須在型別 { name: string; age: number; } 中
斷言 type inference => 我們聲明瞭這個型別為 number | string 它不能呼叫 length 方法,因為不知道到底是number型別還是string型別
- 寫法一:as => 通過 as 來指定某種具體的型別
function getLength1(params: number | string): number {
const str = params as string;
if (str.length) {
return str.length
}
return str.toString().length
}
getLength1('345');
- 寫法二:<型別>
function getLength2(params: number | string): number {
const str = <string>params;
if (str.length) {
return str.length
}
return str.toString().length
}
型別守衛 type guard => 遇到聯合型別的時候,使用 型別守衛可以 縮小範圍
型別守衛 除了 typeof 之外 ,還有 instanceof、 in
function getLength3(params: number | string): number {
if (typeof params === 'string') {
return params.length
}
return params.toString().length
}