一、TypeScript介紹
1.TypeScript是由微軟開發的一款開源的編程語言。
2.TypeScript是JavaScript的超集，遵循最新的ES6、ES5規范。TypeScript擴展了JavaScript的語法。
3.TypeScript更像后端java、C#面向對象語言。
4.最新的Vue、React也可以集成TypeScript。
5.Nodejs框架Nestjs、midway中用的就是TypeScript語法。
TypeScript相比JS的優勢
· 優勢一：類型化思維方式，使開發更加嚴謹，提前發現錯誤，減少改bug時間
· 優勢二：類型系統提高了代碼可讀性，并使維護和重構代碼更加容易
· 優勢三：補充了接口、枚舉等開發大型應用時JS缺失的功能
配置 typeScript+nodejs 和 react+typeScript 開發環境
1.安裝nodejs(中文文檔 http://nodejs.cn，node --version查看版本)
運行TS/JS代碼的工具：Node.js
JavaScript的運行環境：瀏覽器、Node.js
Node.js讓JavaScript擺脫了瀏覽器的束縛，可以實現服務端/桌面端編程等等。
2.npm(安裝好node時就安裝好了npm， npm -v查看是否安裝成功)
3.typescript (終端命令，輸入 cnpm install -g typescript 或者 yarn global add typescript，輸入 tsc -v 查看是否安裝成功）
VSCode中搭建typeScript+nodejs開發環境
1.新建一個空文件夾
2.使用VSCode打開文件夾
3.生成package.json 文件
npm init -y
VSCode生成自動編譯.ts文件
4.創建tsconfig.json文件
tsc --init 生成配置文件
負責獎ts代dccg轉為瀏覽器和nodejs識別的js代碼
5.打開tsconfig.json文件，把其中的 “outDir" 和 ”rootDir“ 的注釋打開，然后分別把后面的內容修改成 " ./out " 和 " ./src "，然后就要在左邊的文件欄中創建這兩個文件（out表示輸出文件目錄和src表示寫代碼的資源文件目錄）
6.在src下創建一個index.ts文件， 同時會在out文件夾下生成index.js文件
7.運行index.ts的代碼，需要修改 package.json 文件中的 "scripts"
修改前：
修改后：
因為修改了 outDir 使得生成的 Index.js 文件放在了定義的文件夾中，那么要編譯 typeScript 的代碼，實際上就是要編譯它的 js 代碼文件，所以這里也需要做相應的修改，否則運行報錯
8.運行
npm start
搭建 react + typeScript 開發環境
create-react-app react_typescript --typescript
創建成功，再輸入終端命令： cd react_typescript
運行：yarn start
TypeScript
1.編譯型語言
2.強類型語言
3.真正面向對象的語言
變量
變量：是用來存儲數據的容器，并且是可以變化的，為變量指定了類型就只能給這個變量設置相同類型的值
命名規則：變量只能出現：數字、字母、下劃線、$，并且不能以數字開頭。變量名稱區分大小區
基本使用
let age: number = 18
let name: String = 'name'
var的作用域是函數作用域，在內層循環中和外層循環中使用的是同一個變量，在內層的修改會改變外層。
let的作用域是塊級作用域，在內層循環中的變量和外層循環中的變量不是同一個變量，在內層的修改不會改變外層。
var：可以聲明同名變量，只會得到一個變量，let一個變量只能聲明一次
var age = 17; var age = 18; // 不會報錯
let age = 0; let age = 1; // 報錯
const：定義的是常量，聲明的的變量不能被重復賦值，const聲明變量是必須立刻賦值；const聲明的對象，對象本身是不能被賦值覆蓋，但是對象的可修改屬性是允許被修改值的
const num: Number = 10;
const info = {
name: 'name',
age: num,
}
info.name = 'na'
info.age = 20
console.log(info);
// { name: 'na', age: 20 }
數據類型
TypeScript中的數據類型分為兩大類：原始類型(基本數據類型)、對象類型(復雜數據類型)
常用基本數據類型：number、string、boolean、undefined、null。
基本數據類型
數字類型
數字類型：包含整數和浮點型, 用number表示.
let age: number = 18 // 整數
let score: number = 18.8 // 浮點型
字符串類型
字符串：使用string表示文本數據類型。可以使用(" ")或者(' ')表示字符串
let age: number = 18
let name: sting = '姓名'
console.log( name + `${age}`)
// 姓名18
console.log(name+age) // 加號兩邊只要有一邊是字符串，就執行字符串拼接
// // 姓名18
布爾型
最基本的數據類型就是簡單的true/false值，不能用0和1代表
關鍵字： boolean
let is: boolean = true
數組
數組：是用于存放多個數據的集合。需要聲明時指定數組中元素的類型，多個元素之間使用( , )分隔， 數組中的每一項內容稱為元素
創建數組
// [](中括號)表示數組。如果數組中沒有內容，就是一個空數組
1. [](中括號)表示數組
let 數組名: 元素類型[] = [ 元素1, 元素2, 元素3, ... ]
let list: string[] = []
2. 使用數組泛型表示，Array<元素類型>=[ 元素1, 元素2, 元素3, ... ]：
let list: Array<number> = [1, 2, 3]
3. new Array()
let list: number[] = new Array(1, 2, 3) // 創建一個數組
console.log(list) // [ 1, 2, 3 ]
4.用any類型創建數組
var arr: any[] = ['12345', 2345, true]
// 數組長度
console.log(list.length) // 3
// 修改元素，下標存在表示修改
list[1] = 5
console.log(list) // [ 1, 5, 3 ]
// 添加元素，下標不存在表示添加
list[3] = 5
遍歷數組
for (let i = 0; i < list.length; i++) {
console.log(list[i])
}
// 1
// 5
// 3
// 5
· push()方法將一個或多個元素添加到數組的未尾，并返回該數組的長度
let num: number[] = [1, 3, 5]
num.push(7, 9)
console.log(num)
// [ 1, 3, 5, 7, 9 ]
let len = num.push()
console.log(len)
// 5
· forEach
forEach方法的參數是一個函數，這種函數也稱為回調函數，是作為forEeach方法的實參傳入，不需要指定類型注解
forEach方法的執行過程: 遍歷整個數組，為數組的每一項元素，調用一次回調函數，無法中間停止
let num: number[] = [1, 3, 5, 7]
num.forEach(function(item, index){
console.log(item, index)
})
// 1 0
// 3 1
// 5 2
// 7 3
some方法：遍歷數組，查找是否有一個滿足條件的元素(如果有，就可以停止循環)
循環特點：根據回調函數的返回值，決定是否停止循環，如果返回true，就停止；返回false就繼續循環
let num: number[] = [1, 12, 9, 8, 6]
num.some(function(num){
console.log(num)
if (num > 10) {
return true
}
})
// 1
// 12
元組(Tuple)
元組屬于數組的一種，就是固定長度的數組，合并了不同類型的對象，規定了元素數量和每個元素類型的數組，聲明時要指完元素個數為每個元素規定類型，元素的類型和值必須一一對應。
語法：[數據類型, 數據類型, 數據類型, ... ]
let tuple: [string, number, boolean] = ['tuple', 20, false];
console.log( tuple);
// [ 'tuple', 20, false ]
console.log( tuple[1]);
// 20
修改元組
tuple[1] = 10
console.log(tuple)
// [ 'tuple', 10 ]
在聲明一個元組時，可以在元素類型后綴一個問號 ？ 來說明元素是可選的，可選元素類型必須在必選元素類型后面，如果一個元素類型后面后綴了一個問號 ？，那么這個元素之后的所有元素類型都要后綴一個問號。
let tup1: [string, number?, number?]
tup1 = ['tup']
tup1 = ['tup', 1]
tup1 = ['tup', 1, 3]
使用 push() 方法向這個元組中添加新的元素
let tup2: [string, number, number] = ['tup2', 2, 3]
tup2.push('tup')
console.log(tup2);
// [ 'tup2', 2, 3, 'tup' ]
使用 pop() 方法刪除元組中最后一個元素
let tup3: [string, number, number] = ['tup2', 2, 3]
tup3.pop()
console.log(tup3);
// [ 'tup2', 2 ]
解構元組
let tup3: [string, number, boolean] = ['tup3', 2, true]
let [a, b, c] = tup3
console.log(a);
console.log(b);
console.log(c);
// tup3
// 2
// true
枚舉
枚舉是組織有關聯數據的一種方式，枚舉使用 enum 關鍵詞來聲明一個枚舉
使用場景：當變量的值只能是幾個固定值中的一個，應該使用枚舉來實現
數字枚舉，聲明了一個枚舉成員均不帶初始化值的枚舉，枚舉的成員值從 0 開始，依次遞增；聲明帶初始化值的枚舉，枚舉的成員值是在上一個成員的基礎上 +1；
· 枚舉的特點
數字枚舉經過編譯之后會生成 lookup table (反向映射表)，即除了生成鍵值對的集合，還會生成值鍵對的集合。
字符串枚舉沒有自增行為，必須為每一個成員賦值
枚舉成員是只讀的，只可以訪問，不能賦值
創建枚舉的語法:
enum 枚舉名稱 { 成員1, 成員2, 成員3, ... }
enum enumTS {
ts1,
ts2 = 10,
ts3,
ts4 = 'ts4',
ts5 = 'ts5',
}
console.log(enumTS);
// {
// '0': 'ts1',
// '10': 'ts2',
// '11': 'ts3',
// ts1: 0,
// ts2: 10,
// ts3: 11,
// ts4: 'ts4',
// ts5: 'ts5'
// }
console.log(enumTS.ts2);
// 10
Any
Any: 任意類型可以是 Number String Boolean Object ... 等等 JS 中存在的類型，一個變量設置為any類型后相當于對該變量關閉了TS的類型檢測
聲明變量如果不指定類型，TS會根據最后一次給變量賦值判斷變量的類型，變量不賦值會自動判斷變量的類型為any，any類型只能賦值給unknown類型
let any: any = 2
any = 'any'
console.log(any);
// any
let anyList: any[] = [1, '2', true, false]
console.log(anyList);
// [ 1, '2', true, false ]
unknown
unknown表示未知類型的值，實際上是一個類型安全的any
unknown類型的變量，不能直接賦值給其他變量，只能賦值給any類型
let u: unknown
u = 10
u = true
u = 'any'
let a
a = u
Void
void 表示空，是 undefined 的子類型，表示沒有類型，一般用于表示沒有返回值的函數。
// 表示方法沒有返回任何類型
function say(): void {
console.log('沒有返回值')
}
say()
// 沒有返回值
undefined、null 是never數據類型的子類型
· 共同點：只有一個值，值為類型本身(為其它值報錯)。
· undefined：表示聲明但未賦值的變量值(找不到值)
· null：表示聲明了變量并已賦值，值為null(能找到，值就是null)
var num: number
console.log(num) // 會報錯(在賦值前使用了變量“num”)
var num: undefined
console.log(num) // 不會報錯
定義沒有賦值就是undefined
var num: number | undefined
console.log(num) // 不會報錯
let u: undefined = undefined
let n: null = null
console.log(u, n)
// undefined null
let u: undefined
console.log(u)
// undefined
never
never代表不存在的值的類型，常用作拋出異常或無限循環的函數返回類型
never類型是ts中的底部類型，所有類型都是never類型的父類，never類型的值可以賦給任意類型的變量
function nev(): never{
while(true) {
console.log('死循環')
}
}
function nev(): never{
throw new Error('錯誤')
}
Object
Object：表示任意的js對象
let a: object
a = {};
a = function() {
}
// {} 用來指定對象中可以包含的屬性
// 語法:{ 屬性名: 屬性值, 屬性名: 屬性值, 屬性名: 屬性值, ... }
// 在屬性的后邊加上?，表示屬性是可選的
let b: { name: string, age?: number}
b = { name: 'name'}
let c: { name: string, [info: string]: any }
c = { name: '1345', age: 10, sex: 12 }
類型別名
簡化類型的使用
type type = 1 | 2 | 3 | 4 | 5
let k: type
let l: type
k = 1
聯合類型
表示取值可以為多種類型中的一種
let 變量名: 變量類型1 | 變量類型2 | 變量類型3 = 值;
