前言
本文主要介紹TypeScript的基本知識，想深入瞭解還得去看官方文件。
這裡有一個自己用TypeScirpt編寫的工具庫，歡迎大家使用和互相學習，有時間會寫下文章講下如何開發和釋出自己的工具庫。
什麼是TypeScript
TypeScript是Javascript的超集，並新增可選的靜態型別和類別，但瀏覽器無法識別，所以要通過工具轉換為Javascript程式碼才可以在瀏覽器上執行。
為什麼要用TypeScript
使用TypeScript可以更好地編寫和維護程式碼，因為它可以指定變數的型別，更容易知道這個變數是什麼型別和擁有什麼屬性，並且它在編譯階段就會檢查出錯誤，提早發現錯誤的時間，並且很多編輯器對TypeScript有很好的支援，會有程式碼提示，提高開發效率。
基礎型別
booleannumberstringArray
let nums: number[] = [1, 2, 3];
let strings: Array<
string>
= ['str'];
複製程式碼enum
enum Color {Red, Green, Blue
} // Color = [0, 1, 2];
let c: Color = Color.Green;
// 1複製程式碼anyvoidnull、undefinednever
介面
物件型別
interface Shape {
readonly type: string;
// 只讀屬性 color?: string;
// 可選屬性 area: number;
setColor(color: string): void;
[prop: string]: any;
// 其他屬性
}複製程式碼函式型別
interface createShape {
(square: Shape): Shape;
}複製程式碼類型別與繼承介面
interface Square extends Shape {
// 繼承於Shape介面 width: number;
height: number;
[prop: string]: any;
// 其他屬性
}interface ShapeConstructor {
// 構造器函式結構 new(shape: Shape): Shape;
}interface CircleInterface extends Shape {
radius: number;
}class Shape implements Shape {
// 產生Shape型別的類 readonly type = 'shape';
// 只讀屬性只能在初始化時賦值 color?: string;
area: number;
constructor(shape: Shape) {
this.color = shape.color;
} setColor(color: string) {
this.color = color;
}
}class Square extends Shape implements Square {
readonly type = 'square';
// 只讀屬性只能在初始化時賦值 width: number;
height: number;
constructor(square: Square) {
super(square);
this.width = square.width;
this.height = square.height;
this.area = square.width * square.height;
}
}class Circle extends Shape implements CircleInterface {
readonly type = 'circle';
radius: number;
}function createNewShape(ctor: ShapeConstructor, shape: Shape): Shape {
return new ctor(shape);
}複製程式碼泛型
泛型允許我們可以靈活地在呼叫期間才指定型別或由TS推斷型別。
function createArray<
T>
(): ()=>
T[] {
return ()=>
[];
}const createNumberArray = createArray<
number>
();
const numberArray = createNumberArray();
numberArray.push(1);
numberArray.push('1');
// 報錯，因為上面以指定陣列為數字型別複製程式碼