TypeScript入門級知識點整理

本文章主要講述了TypeScript的基礎知識點，這些是我我的的理解，若有不正確的地方請評論指正！

一：變量類型

數字類型(number)

let num: number = 1;
let num2: number = 0.8;
let num3: number = Infinity; // 整無窮大
let num4: number = -Infinity; // 負無窮大
let num5: number = NaN; // 屬於Number類型複製代碼

空值（void）

表示沒有任何返回值的函數

function alertMyName(): void {
    alet('my name is david');
}複製代碼

聲明一個void的類型變量沒有聲明用，只能將它賦值爲undefined和null；

let unuseable: void = undefined;複製代碼

Null 和 Undefine

let n: undefined = undefined;
let u: null = null;複製代碼

與void的區別是，null和undefined是全部類型的子類型。也就是說undefined類型的變量，能夠賦值給number類型的變量，以下：

let num: number = undefined;  // 這樣是不會報錯的複製代碼

// 這樣也不會報錯
let u: undefined;
let num: number = u;複製代碼

而void類型的變量不能賦值給number類型的變量：

let u: void;
let num: number = u;
// Type 'void' is not assignable to type 'number'.複製代碼

字符串(string)

let myName: string = 'david';
let myAge: number = 26;

//模板字符串
let sentence: string = `Hello, my name is ${myName}.I'll be ${myAge + 1} years old next month`;複製代碼

布爾值(Boolean)

let isDone: boolean = false;複製代碼

注意，使用構造函數Boolean創造的對象不是布爾值

let createNewBoolean: boolean = new Boolean(1);
// Type 'Boolean' is not assignable to type 'boolean'.複製代碼

事實上new Boolean() 返回的是一個 Boolean 對象：

let createyNewBoolean: Boolean = new Boolean(1);複製代碼

直接調用Boolean也能夠返回一個boolean類型：

let createBoolean: boolean = Boolean(1);複製代碼

在typescript中，boolean是JavaScript中的基本類型，而Boolean是JavaScript中的構造函數。

數組類型

最簡單的方法是使用「類型 + 方括號」來表示數組：

let numArr: number[] = [1, 2, 3, 4];複製代碼

數組的項中不容許出現其餘類型：

let arr: number[] = [1, '', 2, 3, 4];
// Type 'string' is not assignable to type 'number'.複製代碼

數組的一些方法也會根據數組在定義時約定的類型限制，好比：

let nums: number[] = [1, 2, 3, 4, 5];
nums.push('6');
// Argument of type '"6"' is not assignable to parameter of type 'number'.
//'6'是字符串類型複製代碼

數組泛型

let arr: Array<number> = [1, 2, 3, 4, 5];
let str: Array<string> = ['a', 'b', 'c'];複製代碼

元祖類型

數組是合併了相同類型的對象，而元祖合併了 不一樣類型的對象。

定義一對值分別爲string和number的元祖：

let score： [string, number] = ['david', 26];複製代碼

當賦值或訪問一個已知索引的元素時，會獲得正確的類型：

let david：[string, number];
david[0] = 'david';
david[1] = 26;
david[0].slice(1);
david[1].toFixed(2);複製代碼

固然也能夠只賦值其中一項：

let david: [string, number];
david[0] = 'david';複製代碼

可是直接對元祖類型的變量進行初始化或者賦值的時候，沒須要提供全部元祖類型中指定的項。

let david: [string, number];
david = ['david', 26];複製代碼

let david: [string, number];
david = ['david'];
/ Property '1' is missing in type '[string]' but required in type '[string, number]'.複製代碼

枚舉類型

枚舉成員會被賦值爲從0開始遞增的數字，同時也會對枚舉值到枚舉名進行反向映射：

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // trueconsole.log(Days["Mon"] === 1); // trueconsole.log(Days["Tue"] === 2); // trueconsole.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // trueconsole.log(Days[1] === "Mon"); // trueconsole.log(Days[2] === "Tue"); // trueconsole.log(Days[6] === "Sat"); // true複製代碼

手動賦值

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // trueconsole.log(Days["Mon"] === 1); // trueconsole.log(Days["Tue"] === 2); // trueconsole.log(Days["Sat"] === 6); // true複製代碼

在上面的例子中未手動賦值的枚舉項會接着上一個枚舉項遞增。

若是未手動賦值的枚舉項與手動賦值的重複了，TypeScript是不會察覺到這一點的：

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // trueconsole.log(Days["Wed"] === 3); // trueconsole.log(Days[3] === "Sun"); // falseconsole.log(Days[3] === "Wed"); // true複製代碼

上面編譯後的結果是：

var Days;(function (Days) {    Days[Days["Sun"] = 3] = "Sun";    Days[Days["Mon"] = 1] = "Mon";    Days[Days["Tue"] = 2] = "Tue";    Days[Days["Wed"] = 3] = "Wed";    Days[Days["Thu"] = 4] = "Thu";    Days[Days["Fri"] = 5] = "Fri";    Days[Days["Sat"] = 6] = "Sat";})(Days || (Days = {}));複製代碼

因此平時咱們在寫的時候，儘可能注意不要出現覆蓋的現象；

若是手動賦值的項不是數字，此時須要使用類型斷言來讓tsc無視類型檢查（編譯出的js仍然是可用的）：

enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};複製代碼

var Days;(function (Days) {    Days[Days["Sun"] = 7] = "Sun";    Days[Days["Mon"] = 8] = "Mon";    Days[Days["Tue"] = 9] = "Tue";    Days[Days["Wed"] = 10] = "Wed";    Days[Days["Thu"] = 11] = "Thu";    Days[Days["Fri"] = 12] = "Fri";    Days[Days["Sat"] = "S"] = "Sat";})(Days || (Days = {}));複製代碼

當賦值的枚舉項爲小數或負數時，此時後續未手動賦值的項的遞增步長仍未1：

enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // trueconsole.log(Days["Mon"] === 1.5); // trueconsole.log(Days["Tue"] === 2.5); // trueconsole.log(Days["Sat"] === 6.5); // true複製代碼

任意值

任意值（Any）是用來容許賦值爲任意類型。

若是是一個普通類型，在賦值過程當中改變類型是不被容許的：

let num: number = 5;
num = 'five';
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.複製代碼

若是是any類型：

let num: any = 'five';
num = 5;複製代碼

接口（interface ）

除了可用於對類的一部分行爲進行抽象之外，也經常使用於對「對象的形狀（Shape）」進行描述。

interface Person {
    name: string;
    age: number;
}
let david: Person = {
    name: 'david',
    age: 26
};複製代碼

定義的變量比接口少了一些屬性是不被容許的：

interface Person {
    name: string;
    age: number;
}
let david: Person = {
    name: 'david'
};
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.//   Property 'age' is missing in type '{ name: string; }'.複製代碼

多一些屬性也是不被容許的：

interface Person {
    name: string;
    age: number;
}
let david: Person = {
    name: 'david',
    age: 26,
    gender: 'male'
};
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.複製代碼

因而可知，賦值的時候，變量的形狀必須和接口的形狀保持一致。

可選屬性

有時咱們但願不要徹底匹配一個形狀，那麼能夠用可選屬性：

interface Person {
    name: string;
    age?: number;
};
let devid: Person = {
    name: 'david'
}
// 或者
let devid: Person = {
    name: 'david',
    age: 26
}複製代碼

可選屬性的含義是該屬性能夠不存在。