Angular是用 TypeScript 構(gòu)建的
Angular 是用一種類似于 JavaScript 的語言TypeScript構(gòu)建的
TypeScript并不是一門全新的語言， 而是 ES6 的超集普舆。 所有的 ES6 代碼都是完全有效且可編譯的 TypeScript 代碼
- TypeScript 是 Microsoft 和 Google 之間的官方合作項(xiàng)目
- TypeScript 并不是開發(fā) Angular 應(yīng)用的必選語言
- Angular 也為全部功能提供了 ES5 API
- TypeScript 能極大地簡(jiǎn)化開發(fā)
ES5涮俄、ES6和TypeScript
- TypeScript 代碼到ES5代碼的唯一轉(zhuǎn)換器是由 TypeScript核心團(tuán)隊(duì)編寫
- 將 ES6 轉(zhuǎn)換到 ES5
TypeScript提供了哪些特性
- 類型
- 類
- 注解
- 模塊導(dǎo)入
- 語言工具包（比如， 解構(gòu)）
類型
類型檢查的好處有
- 助于代碼的編寫，可以在編譯期預(yù)防bug
- 助于代碼的閱讀跳座，能清晰地表明你的意圖
//同時(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;
}
類
- ES5：基于原型的面向?qū)ο笤O(shè)計(jì)获列。依賴于原型
- ES6：內(nèi)置的類
//類可以包含屬性、 方法以及構(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ù)的簡(jiǎn)潔語法
// 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ì)
-
字符串中使用變量滑进，也叫字符串插值犀忱，不必用+來拼接字符串
var firstName = "Nate"; var lastName = "Murray"; // interpolate a string var greeting = `Hello ${firstName} ${lastName}`; console.log(greeting); -
支持多行字符串
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)
