TypeScript學習隨筆（一）

這麼久了還不沒好好學習哈這麼火的ts,邊學邊練邊記吧！

啥子是TypeScript 

TypeScript 是 JavaScript 的一個超集，支持 es6 標準。

TypeScript 由微軟開發的自由和開源的編程語言。

TypeScript 設計目標是開發大型應用，它可以編譯成純 JavaScript，編譯出來的 JavaScript 可以運行在任何瀏覽器上。

語言特性

TypeScript 是一種給 JavaScript 添加特性的語言擴展。增加的功能包括：

• 類型批註和編譯時類型檢查
• 類型推斷
• 類型擦除
• 介面
• 枚舉
• Mixin
• 泛型編程
• 名字空間
• 元組
• Await

以下功能是從 ECMA 2015 反向移植而來：

• 類
• 模塊
• lambda 函數的箭頭語法
• 可選參數以及預設參數

額。。。。反正直接看，大部分都不太懂事什麼玩意兒。。。，肯定是重點就是了，so繼續看吧！

JavaScript 與 TypeScript 的區別

TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型註解提供編譯時的靜態類型檢查。

TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。

TypeScript 安裝

噼里啪啦。。。老一套

npm install -g typescript

$ tsc -v
Version 3.3.3333

然後我們新建一個 test.ts 的文件，代碼如下：

var message:string = "Hello World" 
console.log(message)

通常我們使用 .ts 作為 TypeScript 代碼文件的擴展名。

然後執行以下命令將 TypeScript 轉換為 JavaScript 代碼：

tsc test.ts

這時候再當前目錄下（與 test.ts 同一目錄）就會生成一個 test.js 文件，代碼如下：

var message = "Hello World";
console.log(message);

使用 node 命令來執行 test.js 文件：

$ node test.js 
Hello World

TypeScript 轉換為 JavaScript 過程如下圖：

看到這，明顯 :string 肯定就是傳說中的限制了類型，把我們的弱類型javascript 搞成強類型了，來來來自己試一下：

var message:string =222;
console.log(message);

 所謂時間是檢驗真理的唯一標準，果不其然

提示還是很到位的，明說了，這類型不是“string”,不能轉；  gogogo 繼續

TypeScript 基礎語法

TypeScript 程式由以下幾個部分組成：

• 模塊
• 函數
• 變數
• 語句和表達式
• 註釋

第一個 TypeScript 程式

剛纔寫過了，多補充一個：同時編譯多個 ts 文件： 

tsc file1.ts, file2.ts, file3.ts

tsc 常用編譯參數如下表所示：

tsc ts-hw.ts --declaration

TypeScript 保留關鍵字

就是那些不能亂取名字的

空白和換行

TypeScript 會忽略程式中出現的空格、製表符和換行符。

空格、製表符通常用來縮進代碼，使代碼易於閱讀和理解

TypeScript 區分大小寫

嚴格點好，媽媽再也不用擔心我亂取名，亂用名了。

分號是可選的

可用可不用，但是。。。但是。。。寫在同一行就必須要了哦，不然就報錯哦；還是那句話：時間是檢驗整理的唯一標準。。。。gogogo

console.log("aaa") console.log("bbb");

提示也夠明顯，也方便找；不錯不錯

TypeScript 支持兩種類型的註釋

• 單行註釋 ( // ) − 在 // 後面的文字都是註釋內容。

• 多行註釋 (/* */) − 這種註釋可以跨越多行。

這個都一樣一樣的。咦...順便回一下HTML 和css的註釋

html

1.普通註釋 ：  <!-- html註釋的內容 -->

2.條件註釋 ：

1. <h1>您正在使用IE瀏覽器</h1> 
2. <!--[if IE 6]>  
3. <h2>如果IE版本是 6，我將被IE6瀏覽器顯示</h2>  
4. <![endif]-->  
5. <!--[if IE 7]>  
6. <h2>如果IE版本是 7，我將被IE7瀏覽器顯示</h2>  
7. <![endif]--> 

css

和js一樣一樣的------------ (/* */)   || //  

TypeScript 與面向對象

TypeScript 是一種面向對象的編程語言。
又來回顧下什麼是面向對象：
面向對象是一種對現實世界理解和抽象的方法。
（太TM抽象了。大概就是“萬物皆對象”，把什麼都可以當成一個對象，你只需要知道怎麼做能得到你要的東西，而不需要知道東西是怎麼做的，怎麼出來的。
好比你做鍛煉，你知道俯卧撐能鍛煉上肢就好了，並不知道他帶動什麼什麼核心肌肉什麼的，什麼轉什麼的，一大堆）

面向對象主要有兩個概念：對象和類。

• 對象：對象是類的一個實例（對象不是找個女朋友），有狀態和行為。例如，一條狗是一個對象，它的狀態有：顏色、名字、品種；行為有：搖尾巴、叫、吃等。
• 類：類是一個模板，它描述一類對象的行為和狀態。
• 方法：方法是類的操作的實現步驟。

• 下圖中 girl、boy 為類，而具體的每個人為該類的對象：

  

TypeScript 面向對象編程實例：

class Site { 
   name(){ 
      console.log("Cory") 
   } 
} 
var obj = new Site(); 
obj.name();

TypeScript 基礎類型

let binaryLiteral: number = 0b1010; // 二進位
let octalLiteral: number = 0o744;    // 八進位
let decLiteral: number = 6;    // 十進位
let hexLiteral: number = 0xf00d;    // 十六進位

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 發佈 ${ years + 1} 周年`;

let flag: boolean = true;

// 在元素類型後面加上[]
let arr: number[] = [1, 2];

// 或者使用數組泛型
let arr: Array<number> = [1, 2];

let x: [string, number];
x = ['Runoob', 1];    // 運行正常
x = [1, 'Runoob'];    // 報錯
console.log(x[0]);    // 輸出 Runoob

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 輸出 2

function hello(): void {
    alert("Hello Runoob");
}

註意：TypeScript 和 JavaScript 沒有整數類型。

Any 類型

任意值是 TypeScript 針對編程時類型不明確的變數使用的一種數據類型，它常用於以下三種情況。

1、變數的值會動態改變時，比如來自用戶的輸入，任意值類型可以讓這些變數跳過編譯階段的類型檢查，示例代碼如下：

let x: any = 1;    // 數字類型
x = 'I am who I am';    // 字元串類型
x = false;    // 布爾類型

2、改寫現有代碼時，任意值允許在編譯時可選擇地包含或移除類型檢查，示例代碼如下：

let x: any = 4;
x.ifItExists();    // 正確，ifItExists方法在運行時可能存在，但這裡並不會檢查
x.toFixed();    // 正確

3、定義存儲各種類型數據的數組時，示例代碼如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

Null 和 Undefined

null

在 JavaScript 中 null 表示 "什麼都沒有"。

null是一個只有一個值的特殊類型。表示一個空對象引用。

用 typeof 檢測 null 返回是 object。

undefined

在 JavaScript 中, undefined 是一個沒有設置值的變數。

typeof 一個沒有值的變數會返回 undefined。

Null 和 Undefined 是其他任何類型（包括 void）的子類型，可以賦值給其它類型，如數字類型，此時，賦值後的類型會變成 null 或 undefined。而在TypeScript中啟用嚴格的空校驗（--strictNullChecks）特性，就可以使得null 和 undefined 只能被賦值給 void 或本身對應的類型，示例代碼如下：

// 啟用 --strictNullChecks
let x: number;
x = 1; // 運行正確
x = undefined;    // 運行錯誤
x = null;    // 運行錯誤

上面的例子中變數 x 只能是數字類型。如果一個類型可能出行 null 或 undefined， 可以用 | 來支持多種類型，示例代碼如下：

// 啟用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 運行正確
x = undefined;    // 運行正確
x = null;    // 運行正確

never 類型

never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值。這意味著聲明為 never 類型的變數只能被 never 類型所賦值，在函數中它通常表現為拋出異常或無法執行到終止點（例如無限迴圈），示例代碼如下：

學習文檔鏈接：https://www.runoob.com/typescript/ts-tutorial.html