各位看官git上求個星星！ 我有趣的前端筆記！！（webpack，babel，typescript，手撕排序演算法等持續更新中！！）

基礎用法

1、變數型別

2、型別斷言

通過型別斷言這種方式可以告訴編譯器，“相信我，我知道自己在幹什麼”。 型別斷言好比其它語言裡的型別轉換，但是不進行特殊的資料檢查和解構。

let someValue: any = "this is a string";

//方法一："尖括號”語法
let strLength: number = (<string>someValue).length;
//方法二：as語法 《優先選擇》
let strLength: number = (someValue as string).length;

介面

TypeScript裡，介面的作用就是為這些型別命名和為你的程式碼或第三方程式碼定義契約。

實際使用 如同一個類中的建構函式！！

1、基礎用法

//定義的介面型別 設定SquareConfig型別中 必須符合下面包含的型別
interface SquareConfig {
  //屬性名後的？代表可選引數
  color?: string;
  width?: number;
}
//此處引數中的config 限制了引數型別，返回值
//後面的{ color?: string; area: number } 為返回值限定
function createSquare(config: SquareConfig): { color?: string; area: number } {
	return {color: "white", area: 100};
}

//等價於 將返回值提成介面形式 
interface config{
	color?: string;
  area: number;
}
function createSquare(config: SquareConfig): config {
	return {color: "white", area: 100};
}

2、只讀屬性

readonly vs const

最簡單判斷該用readonly還是const的方法是看要把它做為變數使用還是做為一個屬性。

做為變數使用的話用 const，若做為屬性則使用readonly。

interface Point {
    readonly x: number;
    readonly y: number;
}
//無法直接通過賦值修改
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

類

1、與JS的差別

與java的類類似 有public private protected修飾方法 此處不過多贅述！

要注意的是：類的繼承 建構函式中必須要呼叫super()

下面給出一個例子

class Person {
    protected name: string;
    protected constructor(theName: string) { this.name = theName; }
}

// Employee 能夠繼承 Person
class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name);
        this.department = department;
    }

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // 錯誤: 'Person' 的建構函式是被保護的.

類定義會建立兩個東西：類的例項型別和一個建構函式。 因為類可以創建出型別，所以你能夠在允許使用介面的地方使用類。

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

方法

1、與JS的差別

• 需要完全符合引數數量，JavaScript為可選

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

• 剩餘引數收集方法

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

2、this

當你this使用指標不當時，TypeScript會警告你犯了一個錯誤

interface Card {
    suit: string;
    card: number;
}
interface Deck {
    suits: string[];
    cards: number[];
    createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function(this: Deck) {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

3、過載

相同函式名 接收的形參不同 執行不同程式碼

在JavaScript中不支援過載！因為其引數是可選項！但是typescript可以

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };

泛型

除了提供的型別，使用者也可以以自己的資料型別來使用元件

function identity<T>(arg: T): T {
    return arg;
}

列舉

1、概念

定義一些帶名字的常量。

2、基礎用法

• 沒給值時，會根據最後的初始值進行向下排序
• 可以利用下標索引訪問string ，也可以用string訪問索引

enum BooleanEnum {
  No = 2,
  haha=4,
  true,
}
console.log(BooleanEnum)		//{ '2': 'No', '4': 'haha', '5': 'true', No: 2, haha: 4, true: 5 }
console.log(BooleanEnum['haha'],BooleanEnum[5],typeof BooleanEnum[5])			//4 Yes string

型別相容性問題

1、向下相容

let x = (a: number) => 0;
let y = (b: number, s: string) => 0;

y = x; // OK
x = y; // Error

2、列舉相容

列舉型別與數字型別相容，並且數字型別與列舉型別相容。不同列舉型別之間是不相容的。

enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let status = myStatus.Ready;
myStatus = Color.Green;  // Error 不能跨enum賦值