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