前言
TypeScript給傳統(tǒng)的JavaScript加了一層類型檢查的外衣,在TypeScript中稱為類型檢查器紊撕。JavaScript中數(shù)據(jù)類型主要分為原始類型和引用類型拧揽,TypeScript在提供了和JavaScript相同的數(shù)據(jù)類型的同時(shí)嫌套,基于應(yīng)用場(chǎng)景的復(fù)雜性座每,TypeScript中增加了
void
狮惜、never
高诺、unkonwn
等JavaScript中沒有的數(shù)據(jù)類型。
number類型
// 整數(shù)
let decimal: number = 6;
// 十六進(jìn)制
let hex: number = 0xf00d;
// 二進(jìn)制
let binary: number = 0b1010;
// 八進(jìn)制
let octal: number = 0o744;
// 大整數(shù)
// let big: bigint = 100n;
console.log(typeof decimal); // number
console.log(typeof hex); // number
console.log(typeof binary) // number
console.log(typeof octal); // number
string類型
// 定義簡單的字符串類型
let color: string = '馬松松'
// 也可以使用模版字符串
let fullName: string = '馬松松'
let sentence: string = `my name is ${fullName}`
console.log(sentence);
// my name is 馬松松
Array類型
//第一種 使用變量后面加[]表示這是一個(gè)數(shù)組類型的變量
const list: number[] = [1,2,3];
//第二種 使用泛型數(shù)組:Array:<elemType>
const sets: Array<number> = [1,2,3];
Tuple類型
元組類型:數(shù)組中的元素可以是多種類型碾篡,并且數(shù)組長度固定
// 數(shù)組中只有兩個(gè)元素 第一個(gè)元素必須是string類型虱而,第二個(gè)元素必須是number類型
const turpleArray: [string,number] = ['馬松松',18];
??注意:
1.當(dāng)你錯(cuò)誤使用對(duì)應(yīng)類型的API時(shí),TypesScript會(huì)給你一個(gè)錯(cuò)誤提示
turpleArray[1].slice()
// Property 'slice' does not exist on type 'number'
第二個(gè)元素是number類型
开泽,沒有slice
方法牡拇。
2.當(dāng)你訪問超過數(shù)組范圍的元素,會(huì)引發(fā)錯(cuò)誤
console.log(turpleArray[5].toString());
// Object is possibly 'undefined'
數(shù)組沒有索引為5的元素。
enum類型
給數(shù)據(jù)集合更友好的名稱惠呼,便于維護(hù)
直接使用enum
關(guān)鍵字進(jìn)行定義
enum Color {
red,
blue,
lightBlue
}
let c:Color = Color.red;
可以手動(dòng)設(shè)置枚舉類型中值的索引從哪個(gè)數(shù)字開始导俘,默認(rèn)是從0開始。
enum anoterColor {
red = 1,
blue,
lightBlue
}
let a:string = anoterColor[1];
console.log(a);
//red
unknown類型
let unKnownEle: unknown;
// 下面兩種做法都是合法的
unKnownEle = 4;
console.log(typeof unKnownEle);
// number
unKnownEle = "馬松松"
console.log(typeof unKnownEle);
// string
any
為了兼容沒有使用TypeScript的一些庫和應(yīng)用場(chǎng)景剔蹋,可以使用any退出類型檢查
et anyEle:any;
// 下面兩種賦值都是合理的
anyEle = 5;
console.log(typeof anyEle); // number
anyEle = "馬松松";
console.log(typeof anyEle); // string
可以用在函數(shù)的返回值:
function anyReturnEle(key: any): any {
return key;
}
console.log(anyReturnEle(1314)); // 1314
console.log(anyReturnEle("馬松松")); // 馬松松
??注意:
1.使用unknown
會(huì)報(bào)錯(cuò)
let strictlyTyped: unknown = 1314;
console.log(strictlyTyped.toFixed());
//Property 'toFixed' does not exist on type 'unknown'
雖然這里strictlyTyped
確實(shí)是一個(gè)number
類型旅薄,并且確實(shí)有toFixed
方法,但是unknow會(huì)檢查類型泣崩,unkonwn沒有toFixed方法少梁。
2.any類型不會(huì)報(bào)錯(cuò)
let looseTyped: any = 1314;
console.log(looseTyped.toFixed());
// 1314
所以說any類型是關(guān)閉了類型檢查。
3.any類型具有傳播性
o.name = '馬松松';
console.log(typeof o.name);
// string
o.name = 87;
console.log(typeof o.name);
// number
當(dāng)我們給o
定義了any類型矫付, 它的屬性也是any類型猎莲。
void
不是任何一種類型,比較常用于函數(shù)的返回值
用在函數(shù)的返回值
function returnNothing():void {
// 不用返回任何值
}
這樣表示函數(shù)沒有返回值技即。
void類型只能被賦值為null或者undefined
let voidType: void = undefined;
console.log(voidType);
// undefined
voidType = null;
console.log(voidType);
// null
命名其他的類型的值 將會(huì)報(bào)錯(cuò)
voidType = '';
// Type 'string' is not assignable to type 'void'
never
表示一個(gè)函數(shù)總是會(huì)拋出一個(gè)錯(cuò)誤或者永遠(yuǎn)返回著洼,此時(shí)就會(huì)返回never類型
用在拋出錯(cuò)誤的函數(shù)
function error():never {
throw new Error("這里需要拋出錯(cuò)誤")
}
或者是一個(gè)循環(huán)執(zhí)行判斷的語句
function loop(): never {
while(true) {
// do something
}
}
Object
你可以類似于這樣使用 屬性不能多也不能少 且類型要匹配
let obj:{name: string,age: number};
obj = {
name:'馬松松',
age: 18
}
assertions
類型斷言:當(dāng)你明確了變量是某種類型,可以直接斷言該變量是什么類型
類型斷言有兩種方式,這兩種方式是等效的:
1.使用as
let someValue:unknown = "馬松松";
let someValueL = (someValue as string).length;
console.log(someValueL);
// 3
2.使用<>
let aValue:unknown = '馬松松';
let aValueL = (<string>aValue).length;
console.log(aValueL);
// 3
總結(jié):
類型的定義還是蠻簡單的而叼,幾乎沒有給前端開發(fā)者增加學(xué)習(xí)成本身笤,同時(shí)通過學(xué)習(xí)TypeScript可以理解很多其他語言的一些優(yōu)秀的特性。個(gè)人覺得葵陵,TypeScript寫起來還是挺香的液荸。
這篇是TypeScript學(xué)習(xí)的第一篇筆記,后面會(huì)根據(jù)官網(wǎng)的目錄脱篙,每一個(gè)section都會(huì)整理一篇筆記娇钱,有需要的小伙伴也可以跟著我的筆記一起學(xué)習(xí)一下。