TypeScript-定義基本類型

前言

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í)一下。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绊困,一起剝皮案震驚了整個(gè)濱河市文搂,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌秤朗,老刑警劉巖煤蹭,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異取视,居然都是意外死亡硝皂,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門作谭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來稽物,“玉大人,你說我怎么就攤上這事折欠”椿颍” “怎么了秧倾?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長傀缩。 經(jīng)常有香客問我,道長农猬,這世上最難降的妖魔是什么赡艰? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮斤葱,結(jié)果婚禮上慷垮,老公的妹妹穿的比我還像新娘。我一直安慰自己揍堕,他們只是感情好料身,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著衩茸,像睡著了一般芹血。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上楞慈,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天幔烛,我揣著相機(jī)與錄音,去河邊找鬼囊蓝。 笑死饿悬,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的聚霜。 我是一名探鬼主播狡恬,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蝎宇!你這毒婦竟也來了弟劲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤姥芥,失蹤者是張志新(化名)和其女友劉穎函卒,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體撇眯,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡报嵌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了熊榛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锚国。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡玄坦,死狀恐怖豺总,靈堂內(nèi)的尸體忽然破棺而出另玖,到底是詐尸還是另有隱情谦去,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站飘痛,受9級(jí)特大地震影響宣脉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜羊苟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一阻桅、第九天 我趴在偏房一處隱蔽的房頂上張望嫂沉。 院中可真熱鬧杏糙,春花似錦赖淤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽益缠。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間骂租,已是汗流浹背斑司。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國打工渗饮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宿刮。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓互站,卻偏偏與公主長得像,于是被迫代替她去往敵國和親僵缺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子云茸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容