Typescript 基礎知識

Typescript 就是 Javascript 的超集，因此首先你要知道 Javascript 基礎知識

類型註解

類型註解在TypeScript中是記錄函數或變量約束的簡便方法。

// 布爾值
let isDone: boolean = false;

// 數字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

// 字符串
let name: string = 'bob';
// 模板字符串，可定義多行文本和內嵌表達式
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }. I will  be ${ age + 1 } years old nex month.`;

// 字符串字面量類型
type EventNames = 'click' | 'scroll' | 'mouseove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}
handleEvent(document.getElementById('hello'), 'scroll');    // ok
handleEvent(document.getElementById('world'), 'dbclick');   // 報錯, event 不能爲 'dbclick'

// 數組
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

// person參數必須是string類型，且必須有參數
function greeter(person: string) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.innerHTML = greeter(user);
// 類型報錯

// 枚舉
enum Color { Red, Green, Blue };
let c: Color = Color.Green; // 1

// 手動賦值
enum Color { Red = 1, Green, Blue };
let c: Color = Color.Green;

// 根據值獲得名字
enum Color { Red = 1, Green, Blue };
let colorName: string = Color[2];
console.log(colorName); // Green

// 手動賦值的枚舉項能夠不是數字，須要使用類型斷言來讓tsc無視類型檢查
enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>'S' };

// 枚舉會被編譯爲
var Days;
(function (Days) {
    Days[Days['Sun'] = 0] = '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 = {}));

// 任意值(任意類型)
let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false;

// 與Object類型區別
let notSure: any = 4;
notSure.ifItExists();
notSure.toFixed();

let prettySure: Object = 4;
prettySure.toFixed();   // Error

// 空值
function warnUser(): void {
    alert("This is my warning message");
}

// 聲明一個void類型的變量，只能賦值爲null或者undefined
let unusable: void = undefined;

// Never
// never 類型表示的是那些永不存在的值的類型

// null 和 undefined 是全部類型的子類型。而 void 類型則不是。

元組 Tuple

元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同。

let x: [string, number];
x = ['hello', 10];  // ok
x = [10, 'hello'];  // error
// 類型約束
console.log(x[0].substr(1));    // ok
console.log(x[1].substr(1));    // error, 'number' does not have 'substr'
// 訪問越界的元素，會使用聯合類型替代
x[3] = 'world'; // ok
console.log(x[5].toString());   // ok
x[6] = true;    // error, 布爾不是（string | number）類型

類型斷言

• 「尖括號」語法

let someValue:any = "this is a string";
let strLength: number = (<string>someValue).length;

• as 語法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length

類型別名

用來給一個類型起個新名字。類型別名經常使用於聯合類型。

// 使用 type 建立類型別名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if ( typeof n === 'string' ) {
        return n;
    } else {
        return n();
    }
}

解構

• 解構數組

let input = [1, 2];
let [first, second] = input;
console.log(first); // 1
console.log(second);    // 2

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

• 對象解構

let o = {
    a: 'foo',
    b: 12,
    c: 'bar'
};
let { a, b } = o;

// 能夠用沒有聲明的賦值，必需以括號括起來，不然{起始的語句會解析爲一個塊
({ a, b } = { a: 'baz', b: 101 });

// 使用...語法建立剩餘變量
let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

// 屬性重命名
let { a: newName1, b: newName2 } = o;
// 至關於
let newName1 = o.a;
let newName2 = o.b;

// 指示類型
let { a, b }: { a: string, b: number } = o;

// 默認值，屬性爲undefined時使用缺省值
function keepWholeObject(wholeObject: { a: string, b?:number }) {
    let { a, b = 1001 } = wholeObject;
}

function f({ a, b = 0 } = { a: '' }): void {
    //...
}
f({ a: 'yes' });    // ok
f();    // ok, default to {a: ''}
f({});  // error, 'a' is required if you supply an argument

展開

// 數組展開，展開操做是淺拷貝
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

// 展開對象
let defaults = { food: 'spicy', price: '$$', ambiance: 'noisy' };
let search = { ...defaults, food: 'rich' };

// 展開，只包含自身的可枚舉的屬性
class C {
    p = 1;
    m() {
        
    }
}
let c = new C();
let clone = { ...c };
clone.p;    // ok
clone.m();  // error

類

class Student {
    fullName: string;
    // 構造函數
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

var user = new Student('Jane', 'M', 'User');
document.body.innerHTML = greeter(user);

更詳細的能夠關注Typescript官網