typeScript入門基礎介紹

TS 的特點：

• 始於 javaScript 歸於 javaScript 。
• 強大的型別系統。
• 先進的 javaScript 。
• 適合開發大型專案，編譯成純 js 程式碼，js 可以執行在任何瀏覽器上。

typeScript 是區分大小寫的一門語言，本篇文章主要帶你瞭解 ts 的安裝，環境設定，以及簡單的入門。

一、安裝 TS

使用之前需要安裝：

npm install -g typescript

安裝完成之後，使用 tsc -v 檢查安裝之後的版本。

第一個 ts 檔案：01.ts，程式碼如下：

(()=>{
 function show(msg){
  return "字串："+msg
 }
 let str = "前端"
 console.log(show(str))
})()

通過 script 引入 html 檔案

<script  src="./01.ts"></script>

頁面正常執行，因為 ts 能夠支援 js 語法，所以檔案內直接引入使用是沒問題的，除此之外，還可以使用 node 命令執行該檔案，也是可以正常執行的。

如果此時，在 ts 檔案內加入 ts 語法：

// 新增型別支援
(()=>{
 function show(msg:string){
  //新增 string 的意義在於傳入的 msg值只能是字串，不可以是其他型別
  return "字串："+msg
 }
 let str = "前端"
 console.log(show(str))
})()

此時瀏覽器執行時，會報錯，無法繼續執行。

此時就需要將 ts 檔案編譯為 js 檔案，開啟命令列工具，執行：

tsc 01.ts

執行後會自動生成一個 01.js 檔案，檢視js程式碼內容如下：

function show(msg) {
 return "字串：" + msg;
}
(function () {
 var str = "前端";
 console.log(show(str));
})();

總結：

• ts 檔案內直接輸入 js 檔案，在 html 檔案引入 ts 檔案，在瀏覽器內是可以直接執行的。
• ts 檔案內如果有 ts 語法程式碼，若在 html 檔案內引入 ts 檔案，直接在瀏覽器執行會報錯，此時需要先編譯為 js 檔案。
• 在 ts 檔案函數中的形參，如果使用了某個型別進行修飾，那麼在最終編譯的 js 檔案中是沒有該型別的。
• ts 內地 let 修飾符，編譯後的 js 檔案內變成了 var 。

二、Vscode 自動編譯 ts

新建一個專案目錄，當前目錄下開啟命令列工具，執行

tsc --init

自動生成 tsconfig.json 檔案，程式碼如下：

{
 "compilerOptions": {
  "target": "es2016",                                
  "module": "commonjs",                               
  "outDir": "./js",                                  
  "esModuleInterop": true,                             
  "forceConsistentCasingInFileNames": true,      
  "strict": true,                                                  
  "skipLibCheck": true                               
 }
}

注：

outDir 表示的是 ts 檔案編譯之後生成 js 檔案的存放目錄。如果屬性值之後的資料夾不存在時，就會自動建立。

strict 表示是嚴格模式。

新建 index.ts 檔案，程式碼如下：

(() => {
 function showStr(str:string) {
  return str 
 }
 let a: string = "前端人"
 // 呼叫函數
 console.log("a",showStr(a));
})()

型別註解：函數地形參後加修飾符，用來限制傳入引數的型別，string 表示只能為字串型別。

在命令列執行

tsc -w 
//或
tsc -watch

自動生成 js 資料夾，包括 index.js 檔案。執行該命令後，只要 ts 檔案發生改變，就會自動編譯。

一切執行正常，沒有任何錯誤。

如果呼叫函數的引數傳為數值時：

console.log(showStr(123));

此時編輯器內報錯：型別“number”的引數不能賦給型別“string”的引數。

ts 能夠智慧提示問題，是因為 ts 提供了靜態程式碼分析，可以分析程式碼結構和提供的型別註解。

但是 tsc 編譯的時候，雖然會提示錯誤，但它依舊會編譯為 js 檔案，js 在執行的時候不會報錯，因為 js 是弱型別語言。

三、入門 TS

基礎資料型別

• 為布林值型別。如：let isDone: boolean = false;
• number 為數值型別，ts 能夠支援二、八、十、十六進位制資料。如：let decLiteral: number = 6;
• string 為字串型別。如：let name: string = "bob";
• 表示陣列型別。陣列名後加元素型別[] 加 陣列值。如：let list: number[] = [1, 2, 3];
• 元組型別。如：let arr:[string,number,boolean] = ['str',1,true]
• 列舉，為一組數值賦予友好名字。如：enum Color { red, green, blue }
• 任意型別，有時不確定傳入的值是什麼型別，就可以使用 any 型別。如：let notSure:any = 1
• 空值，與 any 正好相反，表示沒有任何型別。 如：function show():void { }
• null 和 undefined
• never 型別，表示永不存在的值。function error(message: string): never { throw new Error(message); }

介面

介面簡單點講就是一種約束。在 ts 裡，介面的作用就是為這些型別命名和為你的程式碼或第三方程式碼定義契約。

TypeScript 中的介面是一個非常靈活的概念，除了可用於對類的一部分行為進行抽象以外，也常用於對「物件的形狀(Shape)」進行描述。

使用形式：

(() => {
 //定義一個介面
 interface Person{
  firstName:string,//新增型別限定
  lastName:string
 }
 function showFullName(person:Person) {
  // 新增型別限定之後，內部會自動提示介面內的欄位
  return person.firstName + '_' + person.lastName
 }
 const p = {
  firstName: "Hello",
  lastName: "World"
 }
 console.log("姓名",showFullName(p));
})()

如果把 p 中的 firstName 註釋掉，就會報錯，提示：

在本範例中，介面的意義就是限定傳入 showFullName 函數內的資料屬性的限制。

介面優點：自動檢測傳入的資料是否符合介面規範，如果不符合則會報錯。

類

Typescript類介紹

傳統的 JavaScript 的程式使用函數和基於原型的繼承來建立可重用的元件，但對於熟悉使用物件導向方式的程式設計師來講就有些棘手，因為他們用的是基於類的繼承並且物件是由類構建出來從 ECMAScript 2015，也就是 ECMAScript 6 開始，JavaScript 程式設計師將能夠使用基於類的物件導向的方式。使用 TypeScript，我們允許開發者現在就使用這些特性，並且編譯後的 JavaScript 可以在所有主流瀏覽器和平臺上執行，而不需要等到下個JavaScript的版本。

ts 的類只是一個語法糖，本質還是 js 函數實現的。

使用範例：

(() => {
  //定義一個介面
  interface Person{
    firstName: string,
    lastName:string
  }
  //定義一個類
  class Personal {
    //定義公共的欄位屬性
    firstName: string
    lastName: string
    fullName: string
    // 建構函式
    constructor(firstName: string,lastName:string) {
      //更新屬性資料
      this.firstName = firstName
      this.lastName = lastName
      this.fullName = this.firstName + this.lastName
    }
  }
  
  const p = new Personal('你','好')
  
  function showFullName(person: Person) {
    return person.firstName + person.lastName
  }
  console.log("p",showFullName(p));
})()

到此這篇關於 typeScript入門基礎介紹的文章就介紹到這了,更多相關 typeScript內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！