一、ts 入門和基礎（簡易版）

TypeScript入門教程

 

（一）  ts 趨勢

 

deno是下一代的node.js，deno 使用 Go 語言代替 C++ 重新編寫跨平台底層內核驅動，上層仍然使用 V8 引擎，最終提供一個安全的 TypeScript 運行環境。

且 大型框架，vue  ng react 等都支持使用TS。

 

（二） ts 🆚  js 對比

 

1、TypeScript 是 JavaScript 的類型的超集，它可以編譯成純 JavaScript。編譯出來的 JavaScript 可以運行在任何瀏覽器上。

     超集（增強版）：靜態類型和面向對象，適合 大型應用和 多人協作

2、ts是應用程序級別的語言，更適合開發大型應用

3、跨平台且開源：TypeScript 編譯工具可以運行在任何服務器和任何系統上（跨平台），即使是微軟出的，也可以運行在linux 或 蘋果系統。TypeScript 是開源的。

4、始於js, 止於js

5、可重用js,甚至可以直接引入js流行的庫，比如echats

6 、ts 類，接口模塊。

 

（三） 開發環境的安裝 

//查看 node 環境

node -v
npm -v

 

//安裝ts

sudo npm install typescript -g
tsc --version

 

（四） 編寫hello world

 

1. 初始化項目：進入你的編程文件夾后，可以使用 npm init -y 來初始化項目，生成package.json文件。

2. 創建tsconfig.json文件，在終端中輸入 tsc --init：它是一個TypeScript項目的配置文件，可以通過讀取它來設置TypeScript編譯器的編譯參數。

3. 安裝@types/node,使用 npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。

4. 編寫 HelloWorld.ts 文件，然后進行保存，代碼如下。

var a:string = "HelloWorld"
console.log(a)

5. 構建：根據 tsconfig.json 配置文件，終端執行 tsc HelloWorld.ts ，這時候就會生成一個helloWorld.js文件

6. 在終端中輸入node helloWorld.js，就可以看到結果了。

⚠️ 注意事項：

1、TypeScript 只會進行靜態檢查，如果發現有錯誤，編譯的時候就會報錯。TypeScript 編譯的時候即使報錯了，還是會生成編譯結果，我們仍然可以使用這個編譯之后的文件。

    如果要在報錯的時候終止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

（五）ts 變量類型

 

TypeScript中的數據類型有：

• Undefined :
• Number:數值類型;  如： var age:number = 18   var stature:number = 178.5 (包含 整型和浮點型; NaN是特殊的Number類型)； 
• string : 字符串類型;    如：var haha:string = "哈哈哈"
• Boolean: 布爾類型； 如：var bool:boolean = true 
• enum：枚舉類型；變量的結果有幾個固定的值，這時可用枚舉類型。比如一年四季。  枚舉類型常用大寫表示。如：enum SEASON{spring,summer,autumn,winter}  ; console.log(SEASON.autumn)  //2

• any : 任意類型；
• void：空類型；
• Array : 數組類型;
• Tuple : 元祖類型；
• Null ：空類型。

 

（六）ts 函數

   把功能相近的需求封裝成一個獨立的代碼塊，每次傳入不同的變量或參數，就可以得到不同的結果。

 

 

需要注意的是：

1. 聲明（定義）函數必須加 function 關鍵字；
2. 函數名與變量名一樣，命名規則按照標識符規則；
3. 函數參數可有可無，多個參數之間用逗號隔開；
4. 每個參數參數由名字與類型組成，之間用分號隔開；
5. 函數的返回值可有可無，沒有時，返回類型為 void；
6. 大括號中是函數體。

 

（七） 三種函數的定義方式

 

1、函數聲明法

  

2、函數表達式法

 

3、箭頭函數

 

     箭頭函數是 ES6 中新增的函數定義的新方式， TypeScript 語言是完全支持 ES6 語法的。箭頭函數定義的函數一般都用於回調函數中。 

 

4、函數的作用域

• 局部變量：函數體內定義的變量就是局部變量。
• 全局變量: 函數體外 定義的變量就是全局變量。
• 變量提升：Js 中，函數及變量的聲明都將被提升到函數的最頂部。Js 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。JavaScript 只有聲明的變量會提升，初始化的不會。 

     

 

（八）數組

      元祖是一種特殊的數組，元祖類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。 (不常用)

（九） 字符串

（十）  日期對象

（十一）正則表達式

• test(string) ：在字符串中查找是否存在指定的正則表達式並返回布爾值，如果存在則返回 true，不存在則返回 false。
• exec(string) : 用於在字符串中查找指定正則表達式，如果 exec() 方法執行成功，則返回包含該查找字符串的相關信息數組。如果執行失敗，則返回 null。