前言

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

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

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

//原始類型 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// 對象 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 永遠不會有返回值的類型 let error = () => {throw new Error('error') }let endless = () => {while(true){} }

枚舉

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

為什么使用枚舉？

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

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ù)字的含義

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

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

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 = '抱歉，失敗了' }

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

enum Answer {N,Y = 'yes' } enum Char {// 常量成員a,b = Char.a,c = 1 + 2,// 計算成員// computed不會在編譯階段計算，會被保留到執(zhí)行階段，在這后面定義的枚舉成員必須有初始值才不會報錯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

接口

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

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

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

對象類型接口

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)

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

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

ts不會報錯，因為TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。就是說，如果一只鳥，看起來像鴨子，游起來像鴨子，叫起來像鴨子，那這只鳥就可以被認為是鴨子。
我們只要傳入的對象滿足接口的必要條件，就是被允許的，即使傳入了多余的字段，也可以通過類型檢查。但也有一個例外，如果我們直接傳入對象字面量，ts就會對額外的字段進行檢查：

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

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

像之前那樣，用一個變量存儲起來

使用類型斷言

render({data: [{id: 1,name: 'A',sex: 'male'},{id: 2,name: 'B'}] } as Result) // 也可以這樣,兩者等價，但推薦上面那種，因為下面這種在react中可能導致歧義 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ù)字索引簽名的返回值一定要是字符串索引簽名返回值的子類型，因為會進行類型轉換，number轉換為string，這樣可以保持類型的兼容 } // => 所以數(shù)字索引如果返回數(shù)字，字符串索引返回就需要更大范圍 interface Names2 {[x: string]: any;[z: number]: number }

函數(shù)類型接口

接口能夠描述JavaScript中對象擁有的各種各樣的外形。 除了描述帶有屬性的普通對象外，接口也可以描述函數(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還是要在實戰(zhàn)中多多使用才能融會貫通，目前只是熟悉，大致了解ts的寫法與基本用法，慢慢來。

總結

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

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