本文目錄：
- 1.TS中常見(jiàn)的數(shù)據(jù)類(lèi)型
- 1.1.數(shù)字類(lèi)型
- 1.2.字符串
- 1.3.布爾類(lèi)型
- 1.4.Null和Undefined
- 1.5.void類(lèi)型
- 1.6.enum枚舉類(lèi)型
- 1.7.數(shù)組
- 1.8.元組
- 1.9.Any類(lèi)型
- 1.10.Object 類(lèi)型
- 2.高級(jí)類(lèi)型相關(guān)
- 2.1.聯(lián)合類(lèi)型
- 2.2.類(lèi)型推論
- 2.3.類(lèi)型斷言
- 2.4.類(lèi)型別名
- 2.5.字符串字面量類(lèi)型
1.TS中常見(jiàn)的數(shù)據(jù)類(lèi)型
- JS里面有七種數(shù)據(jù)類(lèi)型。Number，String，Boolean, Null, Undefined, Symbol, Object
- TS中的常用的數(shù)據(jù)類(lèi)型有 （內(nèi)置類(lèi)型）Number, String, Boolean, Null, Undefined， Void, enum，Array，Any，Object，元組， 接口等
1.1.數(shù)字類(lèi)型
1.ts里面的數(shù)字類(lèi)型表示 雙精度64位浮點(diǎn)值。它可以用來(lái)表示整數(shù)和分?jǐn)?shù)。
2.支持二進(jìn)制(0b1010)、八進(jìn)制(0o744)、十進(jìn)制、十六進(jìn)制(0xf00d)
- let decimal: number = 6; //十進(jìn)制，無(wú)前綴
- let hex: number = 0xf00d; //十六進(jìn)制，十六進(jìn)制
- let binary: number = 0b1010; //二進(jìn)制
- let octal: number = 0o744; //八進(jìn)制0o開(kāi)頭
1.2.字符串
1.使用雙引號(hào)（ "）或單引號(hào)（'）表示字符串； 但是我們使用了prettier，會(huì)自動(dòng)的將js里面的字符串轉(zhuǎn)換為單引號(hào)，因?yàn)閑slint規(guī)范的是單引號(hào)
2.還可以使用模板字符串， 兩個(gè)反引號(hào)，中間使用${xxx} 嵌入表達(dá)式
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`;
1.3.布爾類(lèi)型
1.布爾類(lèi)型是boolean，只有兩個(gè)值true/false
2.使用new Boolean() 返回的不是一個(gè)布爾值，而是一個(gè)Boolean對(duì)象
let isDone: boolean = true;
let bool1: boolean = new Boolean(); //代碼會(huì)報(bào)錯(cuò)
1.4.Null和Undefined
1.在typescript中，null和undefined是所有類(lèi)型的子類(lèi)型；也就是說(shuō) undefined 類(lèi)型的變量，可以賦值給 任意類(lèi)型的變量
let num1: number = undefined
let num2:number = null
上面代碼都不會(huì)報(bào)錯(cuò)
2.undefined表示未定義的值，一個(gè)變量最原始的狀態(tài)，例如聲明了變量沒(méi)有賦值
3.null是空值的意思，表示一個(gè)對(duì)象被人為的重置為空對(duì)象。內(nèi)存里的表示就是棧中的變量沒(méi)有指向堆中的內(nèi)存對(duì)象。一般的如果要釋放某個(gè)對(duì)象就將它的值設(shè)置為null
console.log(null == undefined) //true
console.log(null ===undefined) //false
1.5.void類(lèi)型
1.JavaScript 沒(méi)有空值（Void）的概念，在TypeScript 中，可以用 void 表示沒(méi)有任何返回值的函數(shù);表示沒(méi)有任何類(lèi)型
function warnUser(): void {
console.log('這就是一個(gè)警示功能的函數(shù)，沒(méi)有return')
console.log("This is my warning message");
}
1.6.enum枚舉類(lèi)型
1.枚舉類(lèi)型可以為一組數(shù)值賦予友好的名字
2.默認(rèn)從索引號(hào)0開(kāi)始， 也可以手動(dòng)賦值
通過(guò)enum關(guān)鍵字，創(chuàng)建了枚舉類(lèi)型Color，表示一組顏色
enum Color {Red, Green, Blue}
let c1: Color = Color.Greent
c1此時(shí)是1
因?yàn)閠s中的枚舉還做了反向映射
enum類(lèi)型默認(rèn)從0開(kāi)始，但是也可以手動(dòng)賦值來(lái)改變每個(gè)成員的值
enum Color {Red = 1, Green, Blue}
let c2: Color = Color.Green;
此時(shí)c2是2
enum Color {Red, Green = 6, Blue}
此時(shí)Red依然是0.Grenn被我們手動(dòng)改成了6，Blue就是7
此外枚舉前面的索引還可以是字符串，稱(chēng)為字符串枚舉
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!')
}
運(yùn)行代碼，控制臺(tái)可以打印出來(lái)go up!
1.7.數(shù)組
1.ts里面定義數(shù)組的幾種方式
數(shù)組的項(xiàng)中不允許出現(xiàn)其他的類(lèi)型； 有時(shí)候可以通過(guò)any類(lèi)型來(lái)允許出現(xiàn)任意類(lèi)型
- 第一種方式：類(lèi)型+方括號(hào)的表示法 例如 number[], 這種類(lèi)型的數(shù)組里面是不允許有除了number之外的類(lèi)型
- 第二種方式：數(shù)組泛型 Array+ <類(lèi)型> 例如 Array<number>
- 第三種方式：接口表示數(shù)組， 利用索引簽名
let list: number[] = [1, 2, 3];
lsit1 = [1,2,'3'] //這樣會(huì)報(bào)錯(cuò)
let list2: Array<number> = [1, 2, 3];
interface selfArray {
[index: number]: numer
}
let list3: selfArray = [1,2,3]
注意一下類(lèi)數(shù)組
function test() {
console.log(arguments)
}
類(lèi)數(shù)組有l(wèi)ength屬性以及也可以通過(guò)索引獲取其值
console.log(arguments.length)
console.log(arguments[0])
但是類(lèi)數(shù)組沒(méi)有數(shù)組的相關(guān)方法，比如arguments.forEach，這樣是錯(cuò)誤的。
在typescript中，也不能把類(lèi)數(shù)組賦值給數(shù)組
let arr: any[] = arguments
上面這樣寫(xiě)是錯(cuò)誤的。
1.8.元組
數(shù)組是合并了相同類(lèi)型的對(duì)象， 而元組Tuple合并了不同類(lèi)型的對(duì)象
元祖的表示和數(shù)組非常類(lèi)似，只不過(guò)它將類(lèi)型寫(xiě)在了里面 這就對(duì)每一項(xiàng)起到了限定的作用
let list:[number, string] = [1, 'a']
上面的代碼是正確的，但是當(dāng)我們寫(xiě)少一項(xiàng) 就會(huì)報(bào)錯(cuò) 同樣寫(xiě)多一項(xiàng)也會(huì)有問(wèn)題
list= [20,'molly', true]
1.9.Any類(lèi)型
1.any類(lèi)型是十分有用的，它允許你在編譯時(shí)可選擇地包含或移除類(lèi)型檢查
2.Any類(lèi)型 有時(shí)候，我們會(huì)想要為那些在編程階段還不清楚類(lèi)型的變量指定一個(gè)類(lèi)型，如用戶(hù)輸入或者ajax或者第三方庫(kù)；這種情況下，我們不希望類(lèi)型檢查器對(duì)這些值進(jìn)行檢查而是直接讓它們通過(guò)編譯階段的檢查。 那么我們可以使用 any類(lèi)型來(lái)標(biāo)記這些變量
3.使用場(chǎng)景是， 當(dāng)我們需要把公司現(xiàn)有的javascript項(xiàng)目遷移到typescript上面來(lái)的時(shí)候，就可以給變量聲明any類(lèi)型，后面再逐個(gè)的去優(yōu)化，能讓我們的老項(xiàng)目迅速切換到typescirpt
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
1.10.Object 類(lèi)型
-
Object類(lèi)型的變量只是允許你給它賦任意值 - 但是卻不能夠在它上面調(diào)用任意的方法，即便它真的有這些方法
let notSure: any = 4;
notSure.age;
notSure.toFixed();
上面的代碼可以正常運(yùn)行
let prettySure: Object = 4;
prettySure.toFixed();
但是Object不可以調(diào)用任意方法，經(jīng)過(guò)實(shí)踐，我們發(fā)現(xiàn)Object不是不可以調(diào)用任意方法，只是不能調(diào)用其原型上的任意方法。比如：
let prettySure: Object = 4;
prettySure.toFixed();
prettySure.toString();
toString方法是可以進(jìn)行調(diào)用的
2.高級(jí)類(lèi)型相關(guān)
2.1.聯(lián)合類(lèi)型
- 表示取值可以為多種類(lèi)型中的一種， 使用豎線（|）分割每個(gè)類(lèi)型
let myNumber: string | number;
myNumber = 'nine';
myNumber = 9;
console.log(myNumber);
myNumber = true;
這里允許myNumber的數(shù)據(jù)類(lèi)型是 string和number， 不能是其他類(lèi)型; 如果賦值為boolean則會(huì)報(bào)編譯錯(cuò)誤
- 聯(lián)合類(lèi)型的屬性或方法,只能訪問(wèn)它的所有類(lèi)型里共有的屬性或方法
function getParam(argc: number | string) {
console.log(argc.toFixed()); //Property ‘toFixed’ does not exist on type 'string'
console.log(argc.toString()); //這個(gè)方法就可以正常運(yùn)行
}
getParam(1);
- 補(bǔ)充 聯(lián)合類(lèi)型相當(dāng)于由類(lèi)型構(gòu)成的枚舉類(lèi)型
2.2.類(lèi)型推論
TS類(lèi)型推論的存在，讓JS的代碼可以不經(jīng)過(guò)任何改動(dòng)就可以在TS中正常運(yùn)行。
-
TypeScript里，在有些沒(méi)有明確指出類(lèi)型的地方，類(lèi)型推論會(huì)幫助提供類(lèi)型 - 發(fā)生時(shí)機(jī)：推斷發(fā)生在初始化變量和成員，設(shè)置默認(rèn)參數(shù)值和決定函數(shù)返回值時(shí)
let x = 3;
x = 'three';
變量x的類(lèi)型被推斷為數(shù)字,如果再賦值為字符串，就會(huì)報(bào)類(lèi)型錯(cuò)誤
上面的代碼等價(jià)于
x: number = 3;
x = 'AA';
如果定義的時(shí)候沒(méi)有賦值，不管之后有沒(méi)有賦值，都會(huì)被推斷成 any 類(lèi)型而完全不被類(lèi)型檢查
let x;
x = 'string';
x = 'number';
// 函數(shù)的參數(shù)和返回值使用的類(lèi)型推論， 默認(rèn)都是any類(lèi)型
function f1(a, b) {
console.log(a, b);
}
2.3.類(lèi)型斷言
- 類(lèi)型斷言可以用來(lái)手動(dòng)指定一個(gè)值的類(lèi)型
- 語(yǔ)法： <類(lèi)型>值 或者 值 as 類(lèi)型，在
jsx里面只能使用第二種 - 用來(lái)告訴編譯器你比它更了解這個(gè)類(lèi)型，并且它不應(yīng)該再發(fā)出錯(cuò)誤；相當(dāng)于告訴他不要去對(duì)這個(gè)值進(jìn)行類(lèi)型檢查
下面的代碼直接運(yùn)行的結(jié)果會(huì)報(bào)錯(cuò)
function fn(param: number | string):number {
return param.length
}
console.log(fn('hello'))
加上類(lèi)型斷言，就可以讓該處代碼跳過(guò)tsc的類(lèi)型檢查，并且成功打印出我們期待的值：5
function fn(param: number | string):number {
return (<string>param).length
}
console.log(fn('hello'))
如果在調(diào)用的時(shí)候我們傳入的不是字符串，比如說(shuō)是一個(gè)數(shù)字1呢
function fn(param: number | string):number {
return (<string>param).length
}
console.log(fn(1))
打印結(jié)果是undefined
類(lèi)型斷言的使用一定要邏輯嚴(yán)謹(jǐn)，不能亂指定，必要的時(shí)候需要加上ifelse判定，用來(lái)減少不可控因素的副作用。
訪問(wèn)聯(lián)合類(lèi)型的屬性或方法有個(gè)特點(diǎn)，只能訪問(wèn)此聯(lián)合類(lèi)型的所有公共的屬性或者方法，比如toString()方法， 但是length屬性只有字符串有，所以不行，報(bào)類(lèi)型錯(cuò)誤
function fn(x: number | string): any {
// return x.length;
if (typeof x === 'string') {
// 使用類(lèi)型斷言 告訴編譯器我知道這個(gè)是字符串類(lèi)型，不用再檢查了
// return (<string>x).length;
return (x as string).length;
} else {
return x.toString().length;
}
}
console.log(fn('hello'));
console.log(fn(123));
雙重類(lèi)型斷言：
let x:number | string;
x = 123
let y = (x as any) as string
后面的類(lèi)型必須是前面類(lèi)型的子類(lèi)型
2.4.類(lèi)型別名
這個(gè)別名僅作了解就可以了，實(shí)際工作中都會(huì)用接口interface
- 類(lèi)型別名用來(lái)給一個(gè)類(lèi)型起個(gè)新名字
- 起別名不會(huì)新建一個(gè)類(lèi)型 - 它創(chuàng)建了一個(gè)新 名字來(lái)引用那個(gè)類(lèi)型； 一般給原始類(lèi)型起別名沒(méi)什么用
- 工作里面盡量使用后面我們會(huì)學(xué)習(xí)的接口 來(lái)代替類(lèi)型別名
// 語(yǔ)法結(jié)構(gòu)是 type + 自定義變量名 然后再賦值一個(gè)已存在的類(lèi)型
type Name = string;
type NameNS = string | number;
let goodsName: Name = 'iphone';
let goodsName1: NameNS = 12;
2.5.字符串字面量類(lèi)型
這個(gè)類(lèi)型的概念有點(diǎn)像前面學(xué)的enum枚舉類(lèi)型，定義方式和類(lèi)型別名的定義方式一樣，都是用type進(jìn)行定義
- 字符串string字面量類(lèi)型 用來(lái)約束取值只能是某幾個(gè)字符串中的一個(gè)
- 字符串字面量類(lèi)型與類(lèi)型別名都是使用 type 進(jìn)行定義
- TypeScript 同樣也提供 boolean 和 number 的字面量類(lèi)型
type MoveDirection = 'up' | 'down' | 'left' | 'rigth';
function move(direction: MoveDirection) {
console.log(`向：${direction} 方向移動(dòng)`);
}
move('up'); //向up方向移動(dòng)
move('下'); //報(bào)錯(cuò)
TypeScript 同樣也提供 boolean 和 number 的字面量類(lèi)型：例如
type oneToThree = 1 | 2 | 3;
type myBool = true | false;
let myNum:oneToThree = 3;
let myboo:myBool = false;
console.log(myNum, myboo); //正常運(yùn)行
