Angular 權(quán)威教程 | 第2章 TypeScript

Angular是用 TypeScript 構(gòu)建的

Angular 是用一種類似于 JavaScript 的語言TypeScript構(gòu)建的
TypeScript并不是一門全新的語言， 而是 ES6 的超集。 所有的 ES6 代碼都是完全有效且可編譯的 TypeScript 代碼

  1. TypeScript 是 Microsoft 和 Google 之間的官方合作項(xiàng)目
  2. TypeScript 并不是開發(fā) Angular 應(yīng)用的必選語言
  3. Angular 也為全部功能提供了 ES5 API
  4. TypeScript 能極大地簡化開發(fā)
ES5、ES6和TypeScript
  • TypeScript 代碼到ES5代碼的唯一轉(zhuǎn)換器是由 TypeScript核心團(tuán)隊(duì)編寫
  • 將 ES6 轉(zhuǎn)換到 ES5
    • Google 開發(fā)的 Traceur
    • JavaScript 社區(qū)創(chuàng)建的 Babel

TypeScript提供了哪些特性

  • 類型
  • 類
  • 注解
  • 模塊導(dǎo)入
  • 語言工具包（比如， 解構(gòu)）

類型

類型檢查的好處有

  1. 助于代碼的編寫，可以在編譯期預(yù)防bug
  2. 助于代碼的閱讀，能清晰地表明你的意圖
//同時(shí)為變量名提供可選的變量類型
var name: string;
//----------------------------
//為函數(shù)參數(shù)和返回值指定類型
function greetText(name: string): string {
return "Hello " + name;
}
  • 不符合類型聲明的代碼
function hello(name: string): string {
return 12;
}
//編譯時(shí)，報(bào)錯(cuò)
$ tsc compile-error.ts
compile-error.ts(2,12): 
error TS2322: Type 'number' is not assignable to type
  • 嘗試REPL

安裝工具TSUN（TypeScript Upgraded Node， 支持 TypeScript 的升級(jí)版 Node）

$ npm install -g tsun
// 啟動(dòng)
//后面例子，復(fù)制粘貼到終端窗口運(yùn)行
$ tsun
TSUN : TypeScript Upgraded Node
type in TypeScript expression to evaluate
type :help for commands in repl

內(nèi)置類型

字符串

var name: string = 'Felipe';

數(shù)字

// 無論整數(shù)還是浮點(diǎn)，任何類型的數(shù)字都屬于number類型。 
var age: number = 36;

布爾類型

var married: boolean = true;

數(shù)組

var jobs: Array<string> = ['IBM', 'Microsoft', 'Google'];
var jobs: string[] = ['Apple', 'Dell', 'HP'];

任意類型

沒有為變量指定類型，默認(rèn)類型就是 any。 在 TypeScript 中，any 類型的變量能夠接收任意類型的數(shù)據(jù)

var something: any = 'as string';
something = 1;
something = [1, 2, 3];

“無”類型

void 意味著我們不期望那里有類型。它通常用作函數(shù)的返回值， 表示沒有任何返回值：

function setName(name: string): void {
    this.name = name;
}

類

//類可以包含屬性、 方法以及構(gòu)造函數(shù)
class Vehicle {
}

屬性

屬性定義了類實(shí)例對(duì)象的數(shù)據(jù)。比如名叫Person的類可能有first_name、 last_name和age屬性

class Person {
  first_name: string;
  last_name: string;
  age: number;
}

方法

方法是運(yùn)行在類對(duì)象實(shí)例上下文中的函數(shù)。在調(diào)用對(duì)象的方法之前， 必須要有這個(gè)對(duì)象的實(shí)例。

// 調(diào)用greet方法之前，我們要有一個(gè)Person類的實(shí)例對(duì)象
var p: Person;// instantiate a new Person instance
p = new Person();
// give it a first_name
p.first_name = 'Felipe';
// call the greet method
p.greet();

// 對(duì)象的聲明和實(shí)例化縮寫為一行代碼
var p: Person = new Person();

void類型也是一種合法的any類型。

構(gòu)造函數(shù)

構(gòu)造函數(shù)是當(dāng)類進(jìn)行實(shí)例化時(shí)執(zhí)行的特殊函數(shù)。通常會(huì)在構(gòu)造函數(shù)中對(duì)新對(duì)象進(jìn)行初始化工作。

  • TypeScript中， 每個(gè)類只能有一個(gè)構(gòu)造函數(shù)。
  • 在ES6中， 一個(gè)類可以擁有不同參數(shù)數(shù)量的多個(gè)構(gòu)造函數(shù)重載實(shí)現(xiàn)
//沒有顯式地定義構(gòu)造函數(shù)時(shí)， 將自動(dòng)創(chuàng)建一個(gè)無參構(gòu)造函數(shù)：
class Vehicle {
}
var v = new Vehicle();
//等價(jià)于
class Vehicle {
    constructor() {
    }
}
var v = new Vehicle();

class Person {
    first_name: string;
    last_name: string;
    age: number;
    constructor(first_name: string, last_name: string, age: number) {
        this.first_name = first_name;
        this.last_name = last_name;
        this.age = age;
    } 
    greet() {
        console.log("Hello", this.first_name);
    } 
    ageInYears(years: number): number {
        return this.age + years;
    }
}
var p: Person = new Person('Felipe', 'Coury', 36);
p.greet();

繼承

面向?qū)ο蟮牧硪粋€(gè)重要特性就是繼承。繼承表明子類能夠從父類得到它的行為。 然后，我們就可以在這個(gè)子類中重寫、修改以及添加行為

  • 了解ES5的繼承
  • 繼承是TypeScript的核心語法，用extends關(guān)鍵字實(shí)現(xiàn)
class Report {
    data: Array<string>;
    constructor(data: Array<string>) {
        this.data = data;
    } 
    run() {
        this.data.forEach(function(line) { console.log(line); });
    }
}

// 復(fù)用Report類的行為，要使用extends關(guān)鍵字來繼承它
class TabbedReport extends Report {
    headers: Array<string>;
    constructor(headers: string[], values: string[]) {
        super(values)
        this.headers = headers;
    } 
    run() {
        console.log(this.headers);
        super.run();
    }
}
var headers: string[] = ['Name'];
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var r: TabbedReport = new TabbedReport(headers, data)
r.run();

工具

胖箭頭函數(shù)

胖箭頭（=>）函數(shù)是一種快速書寫函數(shù)的簡潔語法

// ES5 和 ES6 對(duì)比
var data = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach(function(line) { console.log(line); });

var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach( (line) => console.log(line) );

// 只有一個(gè)參數(shù)時(shí)
var evens = [2,4,6,8];
var odds = evens.map(v => v + 1);

// 另一種方式
data.forEach( line => {console.log(line.toUpperCase())
});

=>語法還有一個(gè)重要的特性，就是它和環(huán)繞它的外部代碼共享同一個(gè) this。

var nate = {
    name: "Nate",
    guitars: ["Gibson", "Martin", "Taylor"],
    printGuitars: function() {
        var self = this;
        this.guitars.forEach(function(g) {
        // this.name is undefined so we have to use self.name
        console.log(self.name + " plays a " + g);
        });
    }
};
//
var nate = {
    name: "Nate",
    guitars: ["Gibson", "Martin", "Taylor"],
    printGuitars: function() {
        this.guitars.forEach( (g) => {
        console.log(this.name + " plays a " + g);
        });
    }
};

模板字符串

優(yōu)勢(shì)

  1. 字符串中使用變量，也叫字符串插值，不必用+來拼接字符串

    var firstName = "Nate";
var lastName = "Murray";
// interpolate a string
var greeting = `Hello ${firstName} ${lastName}`;
console.log(greeting);

  2. 支持多行字符串

    var template = `
    <div>
    <h1>Hello</h1>
    <p>This is a great website</p>
    </div>
    ` /
/ do something with `template`

總結(jié)

TypeScript和ES6中其他的優(yōu)秀語法特性

  • 接口
  • 泛型
  • 模塊的導(dǎo)入、 導(dǎo)出
  • 標(biāo)注
  • 解構(gòu)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容