前言

ts有多火大家也知道，慚愧的是，我現(xiàn)在還對(duì)它不熟悉，今天就開始學(xué)習(xí)一下吧。

typescript的數(shù)據(jù)類型

相比于ES6的數(shù)據(jù)類型來說，typescript擁有了新的幾種數(shù)據(jù)類型，它們分別是void、any、never、元組、枚舉以及其它的一些高級(jí)類型。
在typescript中，我們定義一個(gè)變量時(shí)，需要指定它的類型(當(dāng)然不指定的話ts也會(huì)進(jìn)行類型推斷)，它的寫法如下：

//原始類型 let bool:boolean = true let num:number = 123 let str:string = 'abc'// 數(shù)組 let arr1: number[] = [1, 2, 3] let arr2: Array<number | string> = [1, 2, 3, '2']// 元組 可以為元組添加數(shù)據(jù)，但無法訪問 let tuple: [number, string] = [0, '1'] // (2) // (tuple) // tuple(2)// 函數(shù) let add = (x: number, y:number): number => x + y let compute: (x: number, y: number) => number compute = (a, b) => a + b// 對(duì)象 let obj: {x: number, y: number} = {x: 1, y: 2} obj.x = 3// symbol let s1: symbol = Symbol() let s2 = Symbol() (s1 === s2)// undefined, null let un: undefined = undefined let nu: null = null// void 沒有返回值 let noReturn = () => {}// any let x// never 永遠(yuǎn)不會(huì)有返回值的類型 let error = () => {throw new Error('error') }let endless = () => {while(true){} }

枚舉

一組有名字的常量的集合。
你可以把它當(dāng)成一個(gè)通訊錄，在撥打電話的時(shí)候只需要記住人名就可以了，而不需要去記得它的電話號(hào)碼，而且電話號(hào)碼是經(jīng)常變化的，而人名基本不會(huì)發(fā)生變化。

為什么使用枚舉？

我們可以使用枚舉定義一些帶名字的常量，也可以清晰地表達(dá)意圖或創(chuàng)建一組有區(qū)別的用例。
如下例子，我們寫了一個(gè)對(duì)角色進(jìn)行判斷的方法：

function initByRole (role){if(role === 1 || role === 2){// do sth}else if(role === 3 || role === 4){// do sth}else if(role === 5){// do sth}else {// do sth} }

但是它是存在問題的：

可讀性差：如果沒有文檔，我們很難記住這些數(shù)字的含義

可維護(hù)性差： 硬編碼，牽一發(fā)而動(dòng)全身

如果我們使用枚舉呢？我們可以這樣寫：

const enum RoleEnum{Reporter = 1,Developer,Maintainer,Owner,Guest }function initByRole(role: RoleEnum) {if (role === RoleEnum.Reporter || role === RoleEnum.Developer) {// do sth} else if (role === RoleEnum.Maintainer || role === RoleEnum.Owner) {// do sth} else if (role === ) {// do sth} else {// do sth} }

枚舉有哪些？

enum Role {Reporter,Developer,Maintainer,Owner,Guest } enum Message {Success = '恭喜你，成功了',Fail = '抱歉，失敗了' }

• 異構(gòu)枚舉(不推薦)
  從技術(shù)的角度來說，枚舉可以混合字符串和數(shù)字成員：

enum Answer {N,Y = 'yes' } enum Char {// 常量成員a,b = Char.a,c = 1 + 2,// 計(jì)算成員// computed不會(huì)在編譯階段計(jì)算，會(huì)被保留到執(zhí)行階段，在這后面定義的枚舉成員必須有初始值才不會(huì)報(bào)錯(cuò)d = (),e = '123'.length } const enum Month {Jan,Feb,Mar }let month = [Month.Jan, Month.Feb, Month.Mar] //var month = [0 /* Jan */, 1 /* Feb */, 2 /* Mar */]; enum E { a, b} enum F { a = 0, b = 1} enum G { a = 'apple', b = 'banana' }//枚舉作為了類型 let e: E = 3 let f: F = 3//枚舉成員作為了類型 let e1: E.a let e2: E.b let e3: E.alet g1: G let g2: G.a

接口

這個(gè)接口可不是我們平時(shí)寫業(yè)務(wù)代碼時(shí)請(qǐng)求后臺(tái)數(shù)據(jù)的那個(gè)接口啊，那這個(gè)接口是什么呢？

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法。

簡(jiǎn)單的說呢，就是它定義了一些屬性、函數(shù)、可索引和類的所需要遵守的規(guī)范，然后自己就相當(dāng)于變成了一種類型，去對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查。

對(duì)象類型接口

interface List {id: number;name: string; }interface Result {data: List[] }function render(result: Result){((value) => {(value.id, value.name)}) }let result = {data: [{id: 1,name: 'A'},{id: 2,name: 'B'}] }render(result)

這是一個(gè)打印數(shù)組對(duì)象id和name的方法，沒毛病，如果我們此時(shí)修改一下result的結(jié)構(gòu)，增加一個(gè)變量:

let result = {data: [{id: 1,name: 'A',sex: 'male'},{id: 2,name: 'B'}] }

ts不會(huì)報(bào)錯(cuò)，因?yàn)門ypeScript的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查。 它有時(shí)被稱做“鴨式辨型法”或“結(jié)構(gòu)性子類型化”。就是說，如果一只鳥，看起來像鴨子，游起來像鴨子，叫起來像鴨子，那這只鳥就可以被認(rèn)為是鴨子。
我們只要傳入的對(duì)象滿足接口的必要條件，就是被允許的，即使傳入了多余的字段，也可以通過類型檢查。但也有一個(gè)例外，如果我們直接傳入對(duì)象字面量，ts就會(huì)對(duì)額外的字段進(jìn)行檢查：

//有警告 render({data: [{id: 1,name: 'A',sex: 'male'},{id: 2,name: 'B'}] })

想繞過這種檢查的話，有三種方法：

像之前那樣，用一個(gè)變量存儲(chǔ)起來

使用類型斷言

render({data: [{id: 1,name: 'A',sex: 'male'},{id: 2,name: 'B'}] } as Result) // 也可以這樣,兩者等價(jià)，但推薦上面那種，因?yàn)橄旅孢@種在react中可能導(dǎo)致歧義 render(<Result>{data: [{id: 1,name: 'A',sex: 'male'},{id: 2,name: 'B'}] })

字符串索引簽名

interface List {readonly id: number;name: string;[x: string]: any }

可索引類型接口

// 用任意的數(shù)字去索引StringArray,得到的都是string interface StringArray {[index: number]: string } let char: StringArray = ['A', 'B'] interface Names {[x: string]: string;// y: number 不能再聲明number類型成員[z: number]: string //數(shù)字索引簽名的返回值一定要是字符串索引簽名返回值的子類型，因?yàn)闀?huì)進(jìn)行類型轉(zhuǎn)換，number轉(zhuǎn)換為string，這樣可以保持類型的兼容 } // => 所以數(shù)字索引如果返回?cái)?shù)字，字符串索引返回就需要更大范圍 interface Names2 {[x: string]: any;[z: number]: number }

函數(shù)類型接口

接口能夠描述JavaScript中對(duì)象擁有的各種各樣的外形。 除了描述帶有屬性的普通對(duì)象外，接口也可以描述函數(shù)類型。

interface Lib {(): void;version: string;doSomething(): void; }function getLib() {let lib: Lib = (() => { }) as Liblib.version = ''lib.doSomething = () => { }return lib }let lib1 = getLib() lib1() ()

ts還是要在實(shí)戰(zhàn)中多多使用才能融會(huì)貫通，目前只是熟悉，大致了解ts的寫法與基本用法，慢慢來。

總結(jié)

以上是生活随笔為你收集整理的effective typescript_初学typescript（一） - 来亦何哀的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。