TypeScript
- TypeScript 簡介
- TypeScript 安裝
- TypeScript 簡單使用
- TypeScript 資料類型
寫下部落客要用來分享知識内容，并便于自我複習和總結。
如有錯誤之處，請各位大佬指出。
對于文章後續的内容，推薦讀者先學習JavaScript，再來學習TypeScript。
TypeScript 簡介
1、TS是由微軟在2012年正式釋出的一款開源的程式設計語言。随着技術的發展，TS已經變成了前端必會的技能。
（對于筆者而言，之前學習了很久也沒有選擇學習TS，直到Vue3選擇采用TS重寫，讓我才開始重新審視TS是否真的值得學習。為了閱讀源碼，TS的學習提上了日程）
2、TS是JS的超集，也就是說TS是建立在JS之上的，所有的TS代碼最後都會被轉化為JS代碼。
（雖然TS最後會轉為JS代碼，但TS既然存在，那麼它一定有比JS強的用法。通過之後的學習，希望各位可以感受到TS的優勢）
3、TS更像後端java、C#這樣的面向對象語言，可以讓JS開發大型企業項目。
（在面對大型企業項目的時候，真的，真的很有用！）
4、谷歌也在大力支援TS的推廣，谷歌的angular2.x+就是基于TS文法。
5、最新的Vue、React也可以內建TS。
6、Nodejs架構Nestjs、midway中用的就是TS文法。
除此以外，TS的優缺點，推薦文章：TS的優缺點
TypeScript 安裝
首先，先去安裝最新版的node.js（百度即可找到官網，找到連結直接下載下傳即可）
然後在指令行輸入代碼：
npm install –g typescript
或者
cnpm install –g typescript
或者
yarn global add typescript
以上幾種方式，推薦使用cnpm和yarn。如果想要使用cnpm和yarn，需要安裝：
npm install –g cnpm --registry=https://registry.npm.taobao.org
或者
npm install –g yarn
cnpm install –g yarn
TypeScript 簡單使用
筆者使用WebStorm。
随便建一個項目，項目中建立一個TS檔案 index.ts ：
但是浏覽器不支援TS和ES6，是以在這裡需要将其編譯成ES5，打開終端輸入：
tsc index.ts
這時我們就可以發現，在檔案夾中出現了index.js，現在浏覽器就可以去解析index.js了。
需要注意的是，每當我們在ts中寫下新的内容後，都需要重新tsc。為了解決這個問題，對于WebStorm隻需要一步，打開自動編譯即可：
（IDEA的自動編譯選項也在同樣位置）
而對于VSCode，需要進行一些配置，根據這個文章步驟就可實作：VSCode如何自動編譯TS
簡單看一下轉變後的效果：
想要在控制台看到效果，就去建一個html頁面，然後運作在浏覽器即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript測試</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
TypeScript 資料類型
在TS中，為了使編寫的代碼更規範，更有利于維護，增加了類型校驗。使用的時候，隻需要變量名後加上：并在它的後面寫上資料類型即可（如果不這麼寫，它不會報錯，同時也可以改變資料類型，和JS一樣。但是隻要這麼寫，在修改資料的時候，它的資料類型就不能改變，否則會報錯）。同時需要注意，TS推薦使用let或const（使用var不會報錯，但會有警告）。它有以下幾種資料類型：
// 布爾類型(boolean)
let flag1:boolean = false
let flag2:boolean = true
// 正确寫法：類型相同
flag1 = true
// 錯誤寫法：ts報錯
// flag1 = 1
/*
* 可以在ts中使用js，不會報錯（未指定資料類型）
* let flag = true
* flag = 1
* */
// 數字類型(number)
let a:number = 123
// 帶小數的資料也是number
a = 12.3
console.log(a)
// 字元串類型(string)
// string類型在ts裡可以用 雙引号 也可以用 單引号，不會報錯
// 推薦用 雙引号
let str:string = "this is ts"
// 數組類型(array)
// 1.第一種定義數組方式
// 根據資料類型定義
let arr:number[] = [7, 2200, 369, 4396]
// 2.第二種定義數組方式
// 使用泛型定義（暫時先記住，泛型在後面還會提到）
let arr1:Array<number> = [7, 2200, 369, 4396]
// 我們還可以讓數組中存放多種類型的資料
let arr2:(number | string)[] = [1, 'string', 3]
// 元組類型(tuple) 屬于數組的一種，可存儲多種資料類型
let tup:[string, number, boolean] = ["xh", 2200, false]
// 枚舉類型(enum)
/*
* 随着計算機的不斷普及，程式不僅隻用于數值計算，還更廣泛地用于處理非數值的資料。
* 例如：性别、月份、星期、顔色、機關名、學曆、職業等，都不是數值資料。
* 在其它程式設計語言中，一般用一個數值來代表某一狀态，這種處理方法不直覺，易讀性差。
* 如果能在程式中用自然語言中有相應含義的單詞來代表某一狀态，則程式就很容易閱讀和了解。
* 也就是說，事先考慮到某一變量可能取的值，盡量用自然語言中含義清楚的單詞來表示它的每一個值，
* 這種方法稱為枚舉方法，用這種方法定義的類型稱枚舉類型。
* */
// 如果指派，則根據值來輸出結果
enum Flag {success = 1, error = -1}
let f:Flag = Flag.error
console.log(f) // 輸出：-1
// 如果不指派，輸出結果預設為它的索引值
enum Color {red, blue, orange}
let c:Color = Color.blue
console.log(c) // 輸出：1
// 如果部分指派，指派前根據索引輸出結果，指派後以該值作為目前索引再輸出結果
enum Color2 {red, blue = 5, orange}
let d:Color2 = Color2.orange
console.log(d) // 輸出：6
// 任意類型(any)
// 資料類型随便換，不會報錯
let num:any = 123
num = "str"
num = true
console.log(num)
// 任意類型的用處
// 比如：在html中，有這麼一個标簽：<div id="box">box</div>
// 那我們想要在JS中擷取标簽，修改樣式，需要這麼做：
let oBox = document.getElementById("box")
oBox.style.color = "red"
// 雖然以上内容已經對樣式進行了修改，但是在VSCode裡，這部分會有警告
// 筆者WebStorm沒有警告
// 為了解決問題，隻需要這麼做即可：let oBox:any = document.getElementById("box")
// null 和 undefined：其他(never類型)資料類型的子類型
// 直接指定undefined：
let num2:undefined
// undefined類型，可以指派undefined
num2 = undefined
console.log(num2) // 輸出：undefined
// 輸出undefined 也可以設定資料類型，但不指派
let num3:number
console.log(num3) // 輸出：undefined
// 但是對于上面這個用法，VSCode也許會有警告，而筆者的WebStorm不會
// 為了解決VSCode警告問題，我們可以如下面這麼用：
// 即：如果指派就是number，不指派就是undefined
let num4:number | undefined
num4 = 123
console.log(num4)
// 直接指定null：
let num5:null
num5 = null
// void類型：TypeScript中的void表示沒有任何類型，一般用于定義方法的時候方法沒有傳回值。
// 表示方法沒有任何傳回類型：
function run():void{
console.log("run")
}
run()
// 有傳回資料類型的方法：
function run2():number{
return 123
}
console.log(run2())
// never類型：其他類型（包括null和undefined）的子類型，代表從不會出現的值。這意味着聲明never的變量隻能被never類型所指派。
let x:never
// 不能為其指派
// x = 123
// 雖然never看起來沒什麼用，但我們可以讓它抛出異常
x = (()=>{
throw new Error("錯誤")
})()
除了這幾種基本的資料類型以外，還有對象類型，之後的學習中還會遇到：
// 最基本的對象類型
const test:{
name:string,
age:number
} = {
name: '李四',
age: 18
}
還有更複雜一些的：
// age一定是個匿名函數，并傳回number值
const age:()=>number = ()=>{return 20}
這裡的class和interface之後還會提到，現在先混個臉熟，等學完再回來看就很輕松了。
// 對象數組
let testPerson:{name:string, age:number}[] = [
{name: '李四', age: 18},
{name: '王五', age: 28}
]
// type：類型别名，友善之後反複使用
type Lady = {name:string, age:number}
let testPerson:Lady[] = [
{name: '李四', age: 18},
{name: '王五', age: 28}
]
// 使用class和type都可以
class Person{}
// per必須是類Person的執行個體
const per:Person = new Person()
class Person2{
name:string;
age:number;
}
// per必須是類Person的執行個體
const per2:Person2 = {name: '李四', age: 18}
interface Animal {
name:string,
age:number
}
// cat必須實作接口中所有内容
const cat:Animal = {
name: '阿愈',
age: 7
}
在這裡，我們用
：
去定義一個指定資料類型的變量，這個方式叫做類型注解。
但實際上，VSCode和WebStorm等編輯器，還能自行對未指定資料類型的變量進行類型判斷：
是以，對于類型注解的使用，我們可以這麼考慮：如果TS能夠自動分析變量類型，那我們就什麼也不用補充。如果TS無法分析變量類型，那我們必須使用類型注解。
當然，對于類型注解在ts中一定要用嗎，諸如此類的問題，還是要看個人習慣和公司規定，而且一定要說的是，類型注解确實能讓編寫的代碼更規範，更有利于維護。那現在就來看例子：
當我們在ts中，寫了一些很簡單的，可以自動分析變量類型的用法，如果寫類型注解，倒是挺麻煩的。
那什麼情況下，TS無法分析變量類型？
function getTotal(one, two){
return one + two;
}
let total = getTotal(1,2);
很明顯，在函數中，我們希望在它使用的時候傳什麼值，TS肯定是無法判斷出來的，是以參數one和two在這裡都會接收any類型。此時如果不加類型注解，就不利于維護和規範。
那此時，我們就可以這麼做：
function getTotal(one:number, two:number){
return one + two;
}
let total = getTotal(1,2);
total不需要指定，是因為TS自動判斷其為number。
但是這裡，total的資料類型是自動判斷的，我們稍微做一些修改，它的傳回值類型就會變化：
function getTotal(one:number, two:number){
return one + two + '';
}
let total = getTotal(1,2);
那麼這種結果顯然不是我們想要的。是以，對于函數傳回值類型的指定，還是很重要的，因為它可以避免在函數中做了某些操作，進而導緻傳回結果類型的差異：
function getTotal(one:number, two:number):number{
return one + two;
}
let total = getTotal(1,2);
還有一種不是很好的方法，不如寫在函數傳回值上清晰：
function getTotal(one:number, two:number){
return one + two;
}
let total:number = getTotal(1,2);
（更多函數的用法之後還會學到）
是以綜上所述，有時我們可以考慮不指定類型注解，因為TS能自動分析變量類型。
除此以外，對象中的資料類型也能自動分析出來。
let person = {
name: '李四',
age: 15
}