typescript宣告變數型別

// 字串型別宣告
var myname: string = 'chris';
// 將myname宣告為string型別
myname = '123';    // 會提示myname為string型別，不能將數字賦給myname
// 但是這種報錯提示，並不會在編譯後的js程式碼中報錯，因為es5沒有型別檢測

var age: number = 13; // 宣告數字型別
var man: boolean = true; // 布林型別宣告
var param: any = 'chris'; // 宣告param為任意型別，此時可以給param賦其他型別的值
param = 123
 
; // 不會報錯

function test(name: string): void {
    // something
    // 此函式沒有返回值
}

function test(name: string): string {
    // something
    // 接受字串型別引數，返回字串型別值
}

自定義型別

class Person {
    name: string;
    age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = 'chris';
zhangsan.age = 18;

// 編譯生成的es5的程式碼如下：
 


var Person = /** @class */ (function () {
    function Person() {
    }
    return Person;
}());
var zhangsan = new Person();
zhangsan.name = 'chris';
zhangsan.age = 18;

引數新特性
- 引數型別： 在引數名稱後面使用冒號來指定引數的型別
- 預設引數： 在引數聲明後面用等號來指定引數的預設值
- 可選引數： 在方法的引數聲明後面用問號來標明此引數為可選引數

var myname: string = 'chris'
 
;

==引數型別==
function test(a: string, b: string, c: string) {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xxx', 'yyy', 'zzz');  // 如果傳入的引數個數不夠，則會報錯
// xxx
// yyy
// zzz

==預設引數==
// 如果給函式引數制定了預設值，則引數個數不夠不會報錯
function test(a: string, b: string, c: string = 'chris') {
    console.log(a);
    console.log(b);
    console.log(c);
}
test('xxx', 'yyy');  // 傳入的引數個數不夠，但因為有預設值，不會報錯
// xxx
// yyy
// chris
// 注意： 帶預設值的引數一定要宣告在最後，這樣引數個數不夠才不會報錯，否則還是會報錯

==可選引數==
function test(a: string, b?: string, c: string = 'chris') {
    console.log(a);
    console.log(b); // 需要在程式碼中處理沒有傳b引數的情況,否則會報錯
    console.log(c);
}
test('xxx'); // 不會報錯
// xxx
// chris
// 注意，可選引數不能宣告在必選引數之前, 否則報錯

函式新特性
Rest and Spread操作符： 用來宣告任意數量的方法引數
generator函式：控制函式的執行過程，手工暫停和恢復程式碼執行

// 宣告generator函式 在function後面加*
function* dosomething() {
    console.log('start');
    yield;
    console.log('finish');
}

// 直接呼叫控制檯不會輸出

var func1 = doSomething(); // 需要將generator函式宣告成一個變數，然後呼叫變數的next函式，才會執行
func1.next();  // 會執行generator函式，到yield，並停在那裡
func1.next();  // 執行接下來的generator函式部分

舉例程式碼:

function* getStockPrice(stock) {
    while(true) {
        yield Math.random() * 100;
    }
}

var priceGenerator = getStockPrice('IBM');
var limitPrice = 15;
var price = 100;
while(price > limitPrice) {
    price = priceGenerator.next().value;
    console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);
// 當generator生成的隨機價格大於15時，反覆執行列印the generator return 否則，執行buying

==note： 用yield來控制程式的暫停執行。==

destructuring析構表示式
通過表示式將物件或陣列拆解成任意數量的變數。

function getStock() {
    return {
        code: 'IBM',
        price: 100,
    }
}
var { code, price } = getStock();

function getStock() {
    return {
        code: 'IBM',
        price: {
            price1: 200,
            price2: 400
        }
    }
}
var { code: codex, price: { price1 } } = getStock();

針對陣列的析構表示式

var array = [1,2,3,4];

var [number1, number2] = array;
console.log(number1 + ',' + number2);  // 1, 2

var [, number1, ,number2] = array;
console.log(number1 + ',' + number2);   // 2, 4

var [number1, number2, ...others] = array;
console.log(number1 + ',' + number2);  // 1, 2
console.log(others);  // [3, 4]

表示式和迴圈
剪頭表示式： 用來宣告匿名函式，消除傳統匿名函式的this指標問題。

var myArr = [1,2,3,4,5,6];
console.log(myArr.filter(value => value % 2 == 0)); //  [2,4,6]

function getStock(name: String) {
    this.name = name;

    setInterval(() => {
        console.log('name is' + this.name);
    }, 1000);
}
var stock = new getStock('IBM');

for…in：（迴圈的是陣列的鍵值對的鍵key）for…in在迴圈中不可以break掉

var arr = [1,2,3,4];
arr.desc = 'four number';

for(var n in arr) {
    console.log(n);  // 0,1,2,3,desc
    console.log(arr[n]); // 1,2,3,4,desc
} // 

for…of: （迴圈的是陣列的鍵值對的值value）for…of在迴圈中可以break掉

var arr = [1,2,3,4];
arr.desc = 'four number';

for(var n of arr) {
    console.log(n);  // 1,2,3,4
} // 

for(var n of arr) {
    if(n > 2) break;   // 如果值大於2，則中斷迴圈
    console.log(n);  // 1,2
} //