Follow Me通讀Angular權威教程之TypeScript

原書第二章：

angular是用typescript構建的

但是typescript並不是一種新的語言，嚴格上說是屬於es6（ECMAScript 6（是於2015年6月正式發佈的JavaScript語言的標準，正式名爲ECMAScript 2015（ES2015）。）的超集。
這裏說一下超集的概念：

定義：如果一個集合S2中的每一個元素都在集合S1中，且集合S1中可能包含S2中沒有的元素，則集合S1就是S2的一個超集，反過來，S2是S1的子集。
S1是S2的超集，若S1中一定有S2中沒有的元素，則S1是S2的真超集，反過來S2是S1的真子集。

所以typescript是es6的超集，簡單理解就是typescript比es6大就完事，es6再typescript裏面。

再來看看書本中給出的圖，明顯比博主的好看許多，包含關係也是非常的正確。

typescript提供了哪些特性：

類型

typescript類型是可選的，也就是說可以和之前JavaScript的代碼一樣一直var var var（哇哇哇），也可以進行包括字符串，數字，布爾值等的類型聲明
還是要哇，但是提供哇完了之後進行類型指定了

var name: string; 

在聲明函數時，同樣可以指定函數參數的返回值類型：

function greetText(name: string): string 
{  
 return "Hello " + name; 
 } 

因爲此時name已經確定了類型，所以如果給函數傳一個非string類型的參數，是會報錯的。

新語法

除string 的number，boolean，Array，enum

var age: number = 36; 

var married: boolean = true; 

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

enum Role {Employee, Manager, Admin}; 
var role: Role = Role.Employee; 

特殊類型

任意類型

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

無類型

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

類

不多說，class就是類

class 類名{}

類中存在的屬性，方法

  class Person {      
   first_name: string;       
   last_name: string;       
   age: number; 
 
   greet() {         
      console.log("Hello", this.first_name);       
      } 
 
   ageInYears(years: number): number {        
       return this.age + years;       }     } 
 
   // instantiate a new Person instance     
    var p: Person = new Person(); 
 
   // set initial age     
    p.age = 6; 
 
   // how old will he be in 12 years?     
    p.ageInYears(12); 
 
   // -> 18 

構造函數

等價↑↓

可以在構造函數中進行初始化數據

繼承

• extend標註

模塊導入

import

語言工作包

胖箭頭函數

語法特性：！！！！！它和環繞它的外部代碼共享一個this！！！！！！！

• old JavaScript：

• new typescript：

模板字符串

• 字符串中可以添加變量：

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` 

嘗試REPL

REPL(Read Eval Print Loop:交互式解釋器) 表示一個電腦的環境，類似 Window 系統的終端或 Unix/Linux shell，
我們可以在終端中輸入命令，並接收系統的響應。

安裝

npm install -g tsun

建議科學上網安裝

問題解決

啓動以後出現了問題：
報錯：Error: Cannot find module ‘typescript’
原因是沒有安裝typescript

npm install -g typescript

啓動

tsun

使用

Use it as repl: tsun
Use it as interpreter: tsun path/to/app.ts
Other repl command can be accessed by typing :help
Command Line options can be viewd by passing -h or --help option

附一個網址：

https://www.npmjs.com/package/tsun

🆗，準備就緒，下一篇正式進入angular的世界。