TypeScript基礎

caozheng550發表於2019-02-16
TypeScript

TypeScript基本語法

TypeScript 是微軟開發的 JavaScript 的超集，TypeScript相容JavaScript，可以載入JavaScript程式碼然後執行。TypeScript與JavaScript相比進步的地方 包括：加入註釋，讓編譯器理解所支援的物件和函式，編譯器會移除註釋，不會增加開銷；增加一個完整的類結構，使之更新是傳統的面嚮物件語言。

1、基本資料型別

Boolean

// Boolean
var isDone:boolean = false;

Number

// Number
var width:number = 100;

String

// String
var name:string = "hello"

Array

// Array
var list:number[] = [1,2,3];
var Array<number> = [1,2,3];

Enum

// enum Color {Red, Green, Blue}
var c: Color = Color.Red;
alert(c); //預設從零開始，alert(0);

// 可以手動設定指定值
enum Color1 {Red= 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1)  // alert(2)

// 根據值查詢名稱
enum Color2 {Red= 1, Green= 2, Blue= 4}
var c2: String = Color2[4];
alert(c2); // alert(Blue)

Any

// 不確定型別，退出編譯檢查
var notSure: any = 4;
notSure = "maybe a string instead";
console.log(notSure);
notSure = false;
console.log(notSure);

// 不確定陣列元素型別
var anylist: any[] = [1, true, undefined]
console.log(anylist);
anylist[50] = 123;
console.log(anylist)

Void

// 空白
function warnUser(): viod {
    alert(123);
}

型別斷言

// 在使用JSX語法時，只有as斷言語法是被允許的。
let someValue: string = "I`m string value";

// let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;

console.log(strLength);

類

基本語法

class Animal{
    animalName: string;

    constructor(name:string){
        this.animalName = name
    }

    sayHello(){
        alert(this.animalName + ": hello!")
    }
}

var tom = new Animal("Tom");
tom.sayHello();

繼承

class Cat extends Animal {
    // 重寫sayHello方法
    sayHello() {
        console.log(this.animalName + "(Cat): " + "Hello")
    }
}

class Mouse extends Animal {
    sayHello() {
        console.log(this.animalName + "(Mouse): " + "Hello")
    }
}

var cat = new Cat("Tom");
cat.sayHello();
var mouse = new Mouse("Jerry");
mouse.sayHello();

修飾符

如果學過強型別語言這裡很好掌握

// public private static
class Animal {
    public animalName: string;

    constructor(name:string) {
        this.animalName = name
    }

    sayHello() {
        alert(this.animalName + ": hello!")
    }
}

set、get訪問器

interface

function printLabel(labelObj: { label: string}) {
    console.log(labelObj.label);
}
var myobj = {label: "33333"};

printLabel(myobj);

// 使用interface

interface LabelledValue {
    label: string;
}

function printLabel(labelObj: LabelledValue) {
    console.log(labelObj.label)
}

printLabel({label: "1234"});

型別檢查器不會去檢查屬性的順序，只要相應的屬性存在並且型別也是對的就可以。

可選屬性

介面裡的屬性不全都是必需的。 有些是隻在某些條件下存在，或者根本不存在。 可選屬性在應用“option bags”模式時很常用，即給函式傳入的引數物件中只有部分屬性賦值了。

interface SquareConfig {
    color?: string;
    width?: number
}

function createSquare(config: SquareConfig): {color: string, area: number} {
    var newSquare = {color: "red", area: 100};
    if(config.color) {
        newSquare.color = config.color
    }
    if(config.width) {
        newSquare.area = config.width * config.width
    }

    return newSquare
}

var mySquare = createSquare({color: "black"});

函式型別

介面能夠描述JavaScript中物件擁有的各種各樣的外形。 除了描述帶有屬性的普通物件外，介面也可以描述函式型別。

為了使用介面表示函式型別，我們需要給介面定義一個呼叫簽名。 它就像是一個只有引數列表和返回值型別的函式定義。引數列表裡的每個引數都需要名字和型別。

interface SearchFuc {
    (source: string, subString: string): boolean
}
var mySearch: SearchFunc = function(src, sub) {
    var result = src.search(sub);
    if (result == -1) {
        return false;
    }
    else {
        return true;
    }
}

console.log(mySearch("123","123"));

陣列型別

與使用介面描述函式型別差不多，我們也可以描述陣列型別。 陣列型別具有一個index型別表示索引的型別，還有一個相應的返回值型別表示通過索引得到的元素的型別。

interface StringArray {
    [index: number]: string | number
}

var myArray: StringArray = ["1", "2", 9];
console.log(myArray);

支援兩種索引型別：string和number。 陣列可以同時使用這兩種索引型別，但是有一個限制，數字索引返回值的型別必須是字串索引返回值的型別的子型別。

索引簽名能夠很好的描述陣列和dictionary模式，它們也要求所有屬性要與返回值型別相匹配。 因為字串索引表明obj.property和obj[“property”]兩種形式都可以。 下面的例子裡，name的型別與字串索引型別不匹配，所以型別檢查器給出一個錯誤提示：

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length是number型別
  name: string       // 錯誤，`name`的型別不是索引型別的子型別
}

類型別

實現介面

相關文章