TypeScript(一) —— 瞭解並快速入門

以前ES6合集已經更新完畢，趁熱打鐵今天來更新一下TypeScript，雖然已經有不少的文檔和pdf了，可是本身總結的就是本身的。

目錄

• 前言
• 概述

• TypeScript優缺點

  • 優點
  • 缺點

• 起步

  • 安裝
  • 建立文件
  • 執行編譯命令
• 配置文件
• 類型標準庫

• 設置錯誤消息顯示爲中文

  • 使用VSCode設置
  • 使用命令行設置
• 做用域問題

前言

咱們以前已經討論過了JavaScript自身類型系統的問題，若是對強弱類型以及強類型的好處有不太懂的，回顧看 JavaScript類型系統 , 也介紹了Vue2.0源碼中使用過的JavaScript類型檢查器Flow，回顧看 Flow（一）—— JavaScript靜態類型檢查器，在Vue3.0的源碼中已經使用了TypeScript進行類型檢查，不少的類庫也使用了TypeScript，因此接下來簡單的瞭解一下它。

概述

TypeScript是一個基於JavaScript之上的編程語言，是JavaScript的超集(superset)。和Flow同樣，也是旨在解決JavaScript類型系統的問題。下圖咱們能夠清楚的看出：JavaScript、ES6與TypeScript的關係

TypeScript是靜態類型的語言，在開發的時候使用TypeScript，可是瀏覽器環境是不支持TypeScript運行的，必須在生產環境進行編譯成JavaScript才支持，因此須要提早進行編譯。同時，TypeScript並不是強類型語言，由於須要兼容JavaScript的隱式類型轉換，它只是提早了類型檢查的時機，並無讓類型系統自己變得更嚴格。

TypeScript優缺點

優點

• 解決JavaScript類型系統不足，在開發階段就進行類型檢查，能夠大大提升代碼的可靠程度。
• 漸進式開發，若是不會TypeScript，一開始使用JavaScript也是支持的，能夠學一個特性用一個特性。
• TypeScript相比較Flow的類型檢查，功能更增強大，生態也更加健全、完善。
• 逐漸應用普遍，Angular，Vue3.0都已經開始使用了，TypeScript已經成爲前端領域的第二語言。

缺點

• 語言自己多了不少概念，提升了學習成本
• 項目初期，引入TypeScript會增長一些成本，還須要進行編譯處理

起步

• TypeScript官網
• TypeScript中文網

安裝

npm-typescript

# yarn
yarn add typescript --dev

# npm
npm install -g typescript

安裝完成後，在node-Modules/bin 目錄下有tsc的文件，咱們可使用tsc去將ts文件轉化成js文件

建立文件

在src文件夾中添加一個後綴是.ts 的文件

// 隨便寫寫，先按照js原生寫，使用ES6新特性
const hello = (name: string) => {
  console.log(name)
}

hello('TypeScript')

執行編譯命令

# yarn
yarn tsc hello-TypeScript.ts

# npm
tsc .\src\hello-TypeScript.ts

會在同名目錄下添加一個編譯後的js文件

// 已經所有轉換成es3語法(默認是es3)
var hello = function (name) {
    console.log(name);
};
hello('TypeScript');

配置文件

編譯項目的時候，能夠生成一個配置文件tsconfig.json

# yarn
yarn tsc --init
# npm
tsc --init

裏面屬性是typescript編譯器配置的一些選項，通常咱們須要什麼改什麼便可，下面是一些經常使用的配置及其含義 TypeScript(二) —— 配置文件註解

有了配置文件以後，咱們使用tsc命令編譯整個項目的時候，配置文件纔會生效，若是是單個文件，則不會起做用。

# yarn
yarn tsc
# npm
tsc

能夠看到dist目錄下有對應的js文件和js.map文件

類型標準庫

標準庫是內置文件對應的聲明，配置文件中默認的版本是es3，因此類型聲明相似Symbol、Promise會報錯，在某種狀況下Array、console也可能會報錯，這個時候要讓程序認識那些個類型，在VSCode中，類型右鍵跳轉定義能夠看到lib文件夾裏面有不少內置對象的定義，這就是TypeScript標準庫，以Symbol爲例：

例如：Symbol，是ES6的語法才支持的，這個時候有兩種解決方案

• 須要將配置文件中的target改成es2015
• 不改target，將lib選項改成["ES2015"]

單獨設置這個， console的定義會報錯，默認引用的 DOM類庫被覆蓋，須要加上 "DOM"，這裏的 DOM是包含了 DOM+BOM

若是下次有遇到相似的錯誤，能夠找到其引用的標準庫，而後在配置文件中引用。

設置錯誤消息顯示爲中文

開發小技巧，可讓TypeScript顯示錯誤消息爲中文。

使用VSCode設置

設置 -> 輸入typescript locale -> TypeScript:Locale -> zh-CN

使用命令行設置

# yarn
yarn tsc --locale zh-CN
# npm
tsc --locale zh-CN

# 那反設置成英文模式
tsc --locale en

做用域問題

若是在項目中執行ts文件，那麼不一樣文件中的相同變量是會報錯的，爲了不這種問題，要進行做用域的處理

// 解決方法一：每一個文件使用當即執行函數包裹
(function () {
   const a = 123 
})()

// 解決方法二：使用export導出

const a = 123
export {}