TypeScript 筆記

目錄

• 前言
• 筆記

前言

ts 和 js 的區別

ts 是靜態語言，而 js 是動態語言。一個是強類型語言，一個是弱類型語言。 強類型，弱類型的區別
最大的區別就是 檢查類型 上的區別

爲什麼要學習 ts

其實我寫這個心裏是沒譜的， 因爲公司項目不大，也沒有使用 ts。但是 ts 可以使得項目的 bug降低(類型檢查)，還有更好的劃分模塊化(命名空間)，降低維護成本。

• 官網稱 ts 是 js的 超集,ts使得我們能夠以 js 的方式實現自己的構思，ts 對面向對象的支持也非常完善，它擁有面向對象編程語言的所有特性。
• 而ts對es6語法的支持也非常友好，所以降低了 熟悉 js開發人員的學習成本。
• js 是 弱類型 並且沒有 命名空間，導致很難模塊化，使得其在大型的協作項目中不是很方便
• ts 已經很成熟、不管是編輯器的支持也好、各種資料也好，都非常多。

最重要的是
js 能做的，它能做。
js 不能做的，它也能做。

本來想將文檔目錄列出來，每個標題寫幾次例子，但是寫完基礎類型後，發現好像沒有意義，因爲也只是重敲一遍官網上的example而已。 所以除了基礎類型外，其他都寫自己的理解，這樣更能明白自己在學什麼。

筆記

1. 基礎類型
2. 變量聲明
3. 接口
4. 類
5. 函數
6. 泛型
7. 枚舉
8. 類型推論
9. 類型兼容性
10. 高級類型
11. Symbols
12. 模塊
13. 命名空間
14. 模塊解析

1.基礎類型

1. boolean、
2. number、
3. string
4. Array
5. tuple
6. enum
7. any
8. void
9. null 和 undefined
10. never
11. object
12. 類型斷言

// 1. boolean
let idDone: boolean = false
//idDone = 'this is error'

/ / 2. number
let decLiteral: number = 6

// 3. string
let name: string = 'Gavin'

//  4. Array
let num1List: number[] = [1, 2, 3]
let num2List: Array<number> = [1, 2, 3]

let str1List: string[] = ['1', '2', '3']
let str2List: Array<string> =  ['1', '2', '3']

let anyList: any[] = [1, 2, 'str']

// 5. tuple
var tuple: [number, string] = [123, 'string']

// 6. 枚舉
enum Flag {
   error,
   success = 1,
}
let falg1: Flag = Flag.success   // 賦值 返回 val
let falg2: Flag = Flag.error  // 如果 沒有賦值 則返回 下標

// 7. any
// 在對現有代碼改寫的時候， any 類型十分有用，因爲它允許你在編譯時選擇包含或移除類型檢測
let notSure: any = 1
notSure = 'right'
notSure = true

// 8. Void
// 在某種程度上來說， void 類型像是與 any 類型相反， 它表示沒有任何類型。通常用於函數沒有返回值的情況。
function warnUser(): void {
	console.warn('this is warning message')
}

// 9. Null 和 undefined
通常用於你在某處想傳入 string 或 null 或 undefined。

let unSure: string | undefined | null = undefined | null
unSure = '124'
unSure = undefined
unSure = null

// 10. never
// 網上說 這個類型是你永遠得不到的 爸爸， 恩 很形象。
// 返回 never 的函數必須存在無法到達的終點
function error(msg: string): enver {
	throw new Error(msg)
}
// 推斷的返回值爲 never
function fail() {
	return error('someThing failed')
}
// 循環
function infiniteLoop(): never {
	while (true) {
	}
}

// 10. object
// object 表示非原始類型，

let obj: object = {
    a: 124
}

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create("string"); // Error

// 11. 類型斷言
1. as 語法
let someValue: any = 'this is a string'
let strLength: number = (someValue as string).length

2. 尖括號
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 然而，當你在TypeScript裏使用JSX時，只有 as語法斷言是被允許的。

2. 變量聲明

let、var、const、 跟 js 一樣， 好的 next->
最早的塊級作用域是 try catrh，但是不能捕捉異步

3. 接口

1、對象/函數 的抽象類型，用來描述 函數/對象。
2、interface和 type可以互相 extends
3、可以設置 只讀 和 可選屬性

//使用 interface 關鍵字聲明
interface User {
    name: string
    age?: number
    readonly sex: number
}
const gavin: User = {
    age: 1,
    name: 'gavin',
    sex: 1
}

4. 類

1、自從 es6開始 js也能使用 基於類的面對對象方式，更讓熟悉 Java C#　C++等使用強類型語言的開發者開始喜歡上 js和 ts，
2、比 js多了 public、 private、protected等概念。默認 public，而 js提案可能以後會通過，現在一般使用 _name表示私有

private
表示 私有屬性，不能在外部訪問
protected
表示 派生屬性，定義在當前 Animal 時，通過繼承這個 Animal 得到的 Dog 可以訪問

class Animal {
    private name: string;
    protected　age: number;
    constructor(theName: string, theAge: number) { 
        this.name = theName; 
        this.age = theAge;
    }
}
var monkey = new Animal('monkey', 1)
// console.log(
//     monkey,
//     monkey.age, // error: 只能在子類訪問
//     monkey.name // 只能在 Animal 中訪問，
// )
class Dog extends Animal {
    constructor(theName: string, theAge: number) { 
        super(theName, theAge)
    }
    getNameAndAge(): string {
        return `
            ${this.name}, // error
            ${this.age}   // success
        `
    }
}
var dog = new Dog('dingding', 2)
console.log(
    dog.getNameAndAge(),
)

5. 函數

好像和 js 差不多
1、注意類型定義，和返回值
2、支持，剩餘參數、默認參數等。。。
3、還是通過 arguments實現重載。

6. 泛型

1、我理解的就是 當我們要複用一個 通用邏輯時，將定義的值,eg: number 改成 any，
2、但是 如果傳入的是 array || Object時，要注意類型約束

7. 枚舉

1、類似字典
2、使用時，定義了 value, 返回 value，沒則返回 index

8. 類型推斷

像我們 js中，類型轉換會調用 toString valueOf， 這裏應該也是吧，(大寫的捂臉)
1、不定義類型的時候，計算通過類型算法會考慮所有元素的候選類型，並給出一個兼容所有候選類型的類型。

9. 類型兼容性

這個類型兼容性不是很理解。
大概就是，兩個 類或其他兩個之間，互相包含的 屬性和類型，是否一樣，

interface Named {
    name: string;
    // age: number;
}

let x: Named;

// y's inferred type is { name: string; location: string; }
let y = { 
    name: 'Alice', 
    location: 'Seattle' 
};
// 1. Named 中 有 name 屬性，而 y 中包含name屬性，所以是 right
// 2. 如果 Named 中的 age 註釋打開後， 而 y  中不包含 age， 則 error
x = y;

10. 高級類型

不知道怎麼描述。。

11. Symbols 英譯爲記號

1、js 中的 第七種數據類型，用來表示唯一、且不可變，
2、無需通過 new關鍵字來創建、可用於 字符串 或 鍵值
3、有很多 Api可以操作 Symbols

12. 模塊

1、大致和 es6 的 export 一致
2、不過 有模塊聲明通配符

declare module "*!text" {
    const content: string;
    export default content;
}
// Some do it the other way around.
declare module "json!*" {
    const value: any;
    export default value;
}

13. 命名空間

1、當我們定義在模塊中的函數越來越多時，我們可能會再次對函數做一次分類、這時就可以通過命名空間在分層
2、定義在 namespace中的 屬性/方法 來通過 export向其他需要引入的地方導出
3、不過好像很多人不建議使用 namespace，因爲 export就已經是天然的命名空間了