TypeScript 初學筆記

由於不少工做崗位要求程序員會typescript了，畢竟也是個趨勢， 雖然本人是入門級別的程序員，也要遇上時代潮流， 學習學習typescript。

主要是如今開發要引用不少的插件， 想看看插件源碼，按住alt點擊函數， 打開以後是ts文件，本身看不懂ts，有時也會出現不知道是否是本身哪裏寫錯了之類的，技多不壓身，學習ts勢在必行

1、 先配置簡易的開發環境

1. 全局下載typescript

cnpm -g i typescript

2. vscode 插件

• live server 熱更新頁面插件
• typescript auto compiler 保存自動編譯

3. 編譯第一個文件

tsc test.ts tsc: typescript compile

4. 生成ts編譯配置文件tsconfig.json

tsc --init 默認狀況下，執行tsc會將當前目錄下，以及子目錄下的ts文件所有轉換成js文件

5. 類型在typescript中定義， js中並不會編譯出類型的限制的語句，只是在編譯前進行類型檢查

js並不會出現類型檢查的語句， 好比

if(typeof 123 !=='string'){
    throw 'Type 123 is not assignable to type 'string' } 複製代碼

由於在編譯以前就會執行檢查

類型的學習

1. 定義類型

• 一個變量在一開始等於什麼， 日後他就是什麼類型。

let num = 3;
num = 4;

//下面這句會報錯！由於類型已經被定義成數字類型
num = true; 
複製代碼

• 若是初始等於null， undefined， 或者定義類型爲:any, 就是類型隨意，而且後續隨便改

let a;
let b: any;
let udf = undefined;
let nl = null;
// 若是不賦值，或者是null， 就是any(也就是能夠隨意賦值)
a = 1;
a = 'a';
b = 2;
b = 'b';
udf = function () { };
udf = 0;
udf = true;
nl = setTimeout(() => { });
nl = function () { };
複製代碼

• ts原型

// ts原型，原始值的原型是小寫字母， string， boolean， number
// 使用冒號來定義類型
let num5: number = 5; // 數字
let boolean1: boolean = true; // 布爾值
let str: string = '你好'; //字符串
複製代碼

• 數字類型能夠是十進制， 小數， 十六進制， 二進制， 八進制。

let num = 3;
let float = 1.00;
let hex = 0x6;
let binary = 0b1010;
let octal = 0o675;
// 默認類型是初始設置的類型；
// 一開始給他賦值是什麼， 那麼他後來就是什麼類型的
複製代碼

• 引用值定義類型， 類型的首字母要大寫

let hworld: Array<string> = ['你好', '世界'];
let fun: Function = function () { };
let obj: Object = { name: 'lyz' };
let reg: RegExp = /\d/g;
複製代碼

2. 數組， 元組， 枚舉

/* 數組 */
// 裏面必須是字符串類型的, 定義所有的類型
let hworld: Array<string> = ['你好', '世界'];
···
元組 按照索引定義數組裏面的類型
···
/* 元組 */
// 裏面是任意類型的數組
let arr: any[] = [1, true, {}, [], 'abc']
// 按索引指定類型
let color: [string, number, number, number] = ['red', 255, 0, 0];
···
枚舉（只能在指定的枚舉對象裏面挑數據）
···
/* 枚舉 */
enum Vegetable {
    Broccly,
    Cucumber,
    Tomato
}
enum Fruit {
    Apple,
    Pear,
    Grape
}

let food1: Fruit = Fruit.Apple;
let food2: Vegetable = Vegetable.Broccly;
// 若是選錯了枚舉對象，會報錯
// let food3: Fruit = Vegetable.Broccly; 
//報錯類型錯誤： Type 'Vegetable.Broccly' is not assignable to type 'Fruit'

// 編譯成js文件以後的枚舉
var Vegetable;
(function (Vegetable) {
    Vegetable[Vegetable["Broccly"] = 0] = "Broccly";
    Vegetable[Vegetable["Cucumber"] = 1] = "Cucumber";
    Vegetable[Vegetable["Tomato"] = 2] = "Tomato";
})(Vegetable || (Vegetable = {}));

var Fruit;
(function (Fruit) {
    Fruit[Fruit["Apple"] = 0] = "Apple";
    Fruit[Fruit["Pear"] = 1] = "Pear";
    Fruit[Fruit["Grape"] = 2] = "Grape";
})(Fruit || (Fruit = {}));

var food1 = Fruit.Apple;
var food2 = Vegetable.Broccly;
複製代碼

打印下來的枚舉

{ '0': 'Apple',
  '1': 'Pear',
  '2': 'Grape',
  Apple: 0,
  Pear: 1,
  Grape: 2 }
複製代碼

3. 函數

• 返回值類型
• 定義函數返回值
• 返回值不定義並不會報錯
• 返回字符串

// 返回字符串
function foo(): string {
    return 'hello world';
}

// 返回空數組
function foo2(): Array<void> {
    return [];
}

// 什麼都不返回
function foo3(): void {

}
//不定義返回值不會報錯
function foo4() {
    return true;
}
複製代碼

• 函數參數類型

// 定義參數類型
// 參數類型不定義會報警告！
function getType(value: any) {
    // 至關於 var value1, value2
    return typeof value;
}

// function getType(value) {
//     return typeof value;
//     // 報警告 ： Parameter 'value' implicitly has an 'any' type.
// }
複製代碼

• 定義函數類型

//定義一個函數類型 (這個並非件箭頭函數)
let fn1 : (a: number, b: number) => number ;
//讓這個函數類型等於一個函數
var foo = function (a, b) {
    return a + b;
}
fn1 = foo;
fn1 =(1,2);
複製代碼

//編譯前的ts
let fn2: (a: number, b: number) => number = (a, b) => {
    console.log(this);
    return a + b;
}
fn2(2);

let rectanglePerimeter: (a: number, b: number) => number = function (width, height) {
    console.log(this);
    return (width + height) * 2
}

rectanglePerimeter(10, 20)
複製代碼

//編譯以後
var _this = this;
var fn2 = function (a, b) {
    console.log(_this);
    return a + b;
};
fn2(2);
var rectanglePerimeter = function (width, height) {
    console.log(this);
    return (width + height) * 2;
};
rectanglePerimeter(10, 20);
複製代碼

4. 對象

• 注意定義類型要使用分號

// //定義對象類型
let student: { name: string, age: number } = {
    name: "lyz",
    age: 24
};

// // 修改對象
student = {
    name: 'jelly',
    age: 25
}
複製代碼

let hybridObj: { data: number[]; getPow: (pow: number) => number[] } = {
    data: [1, 2, 3],
    getPow: function (pow) {
        return this.data.map((ele) => {
            return ele ** pow;
        })
    }
}

console.log(hybridObj.getPow(2))
複製代碼

或者 使用type關鍵字

type obj2Type = { data: number[]; getPow: (pow: number) => number[] };

let hybridObj2: obj2Type = {
    data: [1, 2, 3],
    getPow: function (pow) {
        return this.data.map((ele) => {
            return ele ** pow;
        })
    }
}

console.log(hybridObj2.getPow(2));
複製代碼