摘要:基本數(shù)據(jù)類型包括數(shù)值字符串布爾值以及新增的。數(shù)值類型中的二進制表示法或者開頭中的八進制表示法或者開頭字符串類型普通字符串模板字符串模板字符串布爾值和類型在中使用和來定義這兩個數(shù)據(jù)類型。
一、基本數(shù)據(jù)類型
Javascript 的類型分為兩種:原始數(shù)據(jù)類型和對象類型,TypeScript 支持與JavaScript幾乎相同的數(shù)據(jù)類型,此外還提供了枚舉、元組等實用的類型。基本數(shù)據(jù)類型包括:數(shù)值、字符串、布爾值、null、undefine、void 以及 ES6 新增的 symbol。
1、數(shù)值類型let decNum : number = 12 let drNum : number = NaN let infinityNum : number = Infinity // ES6 中的二進制表示法(0b 或者 0B 開頭) let binaryLiteral: number = 0b1010; // ES6 中的八進制表示法(0o 或者 0O 開頭) let octalLiteral: number = 0o744;2、字符串類型
// 普通字符串 let myName : string = "song jun bo" // 模板字符串 let sentence : string = `This is my name${myName}`
es6 模板字符串
3、布爾值let isDone: boolean = false;4、null 和 undefined 類型
在 Typescript 中 使用 null 和 undefined 來定義這兩個數(shù)據(jù)類型。
let n : null = null let un : undefined = undefined5、void 空類型
空類型顧名思義表示沒有任何類型,常見于函數(shù)中,當(dāng)函數(shù)不需要返回值時可以指定返回值為空類型。
function warnUser(): void { // 一些邏輯代碼,不需要返回值 }6、symbol類型
定義一個symbol 類型變量
let sym : symbol
調(diào)用Symbol 構(gòu)造函數(shù),創(chuàng)建變量
let sy1 : symbol = Symbol() let sy2 : symbol = Symbol() console.log(sy1 === sy1) // false
構(gòu)造函數(shù)可傳入如參數(shù),symbol 是不可變且唯一的,即使Symbol 構(gòu)造函數(shù)傳入的key值一樣
let sy3 : symbol = Symbol("same") let sy4 : symbol = Symbol("same") console.log(sy3 === sy4) // false
symbol 可以和字符串一樣作為對象的 key,由于symbol 唯一,因此,作為對象屬性的key可避免對象屬性覆蓋問題
let symKey = Symbol(); let obj = { [symKey]: "value" }; console.log(obj[sym]); // "value"
更多symbol 用法點這里查看
二、Typescript中的任意類型有時候,在編程階段,我們并不知道或者并不想為一個變量指定一個類型,因為有可能這個這個變量來自第三方庫,或者來自用戶輸入。這個時候可以使用any 任意類型,任意類型變量可避開typescript 類型檢查器的檢查。
下面的例子定義了任意類型的變量myFavoriteNumber,這個變量既可以被賦值為string 類型的值也可以被賦值為 number類型的值。
let myFavoriteNumber: any = "seven"; myFavoriteNumber = 7;
值得注意的是,任意值的屬性和方法,在任意值上訪問任何屬性和方法都是可以的。比如定義任意類型變量 anything,并調(diào)用setName 方法,雖然anyThing 上沒有setName 函數(shù),但ts類型檢查的時候不會報錯,運行階段才會報錯,這個側(cè)面說明靜態(tài)類型語言的好處,將報錯扼殺在搖籃之內(nèi)。
let anyThing : any = "string" anyThing.setName("name")
另外一點需要特別注意,聲明一個any 類型的變量之后,對它的任何操作,返回的內(nèi)容的類型都是任意值,如果聲明變量的時候未指定其類型,會被默認(rèn)推斷為任意類型,如:
let someThing; someThing = "string" someThing = 100
等同于
let someThing:any someThing = "string" someThing = 1000三、Typescript中的元組
元組類似數(shù)組,只不過元組可以指定元組中各個元素的類型,并且各元素的類型不必相同,如:
let tuple : [String,Number] = ["tupleName",123]
和數(shù)組一樣,元組可用角標(biāo)取值,如:
console.log(tuple[0]) // tupleName console.log(tuple[1]) // 123
同樣的,元組可以通過角標(biāo)為元組變量賦值
tuple[0] = "tupleName2" tuple[1] = 456
注意,當(dāng)賦值給越界的元組時,它的類型會被限制為元組中每個類型的聯(lián)合類型
tuple[2] = "www.baidu.com" // 可行,因為該元組的聯(lián)合類型為 string | number tuple[2] = false //報錯,因為該元組的聯(lián)合類型為 string | number
注意:當(dāng)直接為元組變量初始化或者賦值時,需提供元組類型中所有指定的項
let tuple2 : [String,Number] tuple2 = ["tuple2"] //會報錯 tuple2[0] = "tuple2" // 會報錯 let tuple2 : [String,Number] = ["tuple2",124]四、Typescript中的類型推斷
如果定義的變量沒有為他明確指明一個類型,Typescript 會依照類型推論的規(guī)則推斷出一個類型。
let myType = "string" //這里實際上等價于 let myType : string = "string" myType = 44 // 報錯,因為此時,myType 變量被推斷為 string 類型,不能再被賦值為number類型
注意:如果聲明一個變量的時候沒有明確指定類型且沒有賦值,那么不管之后有沒有賦值都會被推斷為任意類型而完全不會被類型檢查。
let myType // 此時相當(dāng)于 let myType:any myType = "myType" myType = 100五、Typescript中的聯(lián)合類型
聯(lián)合的類型的作用是可以為變量定義多個類型,多種類型之間用 “ | ” 分格
let myTypeUnion : string | number myTypeUnion = "string" myTypeUnion = 100 myTypeUnion = false // 報錯,因為 聯(lián)合類型中并沒有 boolean 類型
注意:Typescript 不確定聯(lián)合類型的變量究竟是哪個類型的時候 ,只能訪問此聯(lián)合類型所有類型共有的屬性和方法
function getMyTypeUnion(myParam:string|number){ // return myName.length // 報錯,因為length不是 string 類型和number 類型共有的屬性 return myParam.toString() //正常,因為 toString() 是共有的函數(shù), }
另外一個例子,結(jié)合接口概念:
interface Bird { fly(); layEggs(); } interface Fish { swim(); layEggs(); } function getSmallPet(): Fish | Bird { let fish = { swim(){ }, layEggs(){ } } return fish } let pet = getSmallPet(); pet.layEggs(); // 正常,因為 layEggs 方法是接口 Fish 和 Bird 共有的 pet.swim(); // 報錯,因為swim方法不是 接口 Fish 和 Bird 共有的六、Typescript中的類型斷言
類型斷言允許自己斷定某個變量的類型。
語法:
<類型>值
或者
值 as 類型
第四點聯(lián)合類型說到,聯(lián)合類型只能訪問共有的屬性和方法,引用非共有的屬性或者方法類型檢查機制是不允許的,當(dāng)然你可以像在 Javascript 中那樣通過 if else 判斷來區(qū)分不同類型然后調(diào)各自類型的屬性和方法,如:
function getMyTypeUnionAsert(myParam:string|number){ // return myName.length // 報錯因為,length不是 string 類型和number 類型共有的屬性 // return myParam.toString() //不報錯,因為 toString() 是共有的函數(shù), if( typeof(myParam)=="string" ){ return myParam.length } if( typeof(myParam)=="number" ){ return myParam.toFixed(2) } } let resultAsert = getMyTypeUnionAsert("string") // resultAsert 值為 6 let resultAsert2 = getMyTypeUnionAsert(100.1234) // resultAsert2 值為 100.12
但有時候你十分確定傳入函數(shù)的變量的類型就是 string 或者 number,因此你并不想寫 if else 來判斷變量類型,這個時候可以使用類型斷言,如:
function getMyTypeUnionAsertYes(myParam:string|number){ let newP =七、Typescript中的類型別名myParam return newP.length } // 或者 function getMyTypeUnionAsertYes(myParam:string|number){ let newP = (myParam as string).length return (myParam as number).toFixed() }
類型別名就是為類型取另外一個名字,使用 type 關(guān)鍵字來標(biāo)示。
類型別名常見于聯(lián)合類型,因為,聯(lián)合類型有點長,你懂的,比如下面這個聯(lián)合類型
let unonType :string | number | boolean | object | (() => string)
類型別名這樣定義:
type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === "string") { return n; } else { return n(); } }
類型別名有時候可接口看起來有點像,比如:
這樣定義了一個叫 aliasObj 類型別名
type aliasObj = { name:string, age:number, getName:(age:number)=>{} }
這樣定義了一個叫 interObj 接口
interface interObj { name:string, age:number, getName:(age:number)=>{} }
類型別名和接口同樣都可以使用泛型(泛型后面的文章會詳細(xì)講解),如:
type tree= { value:T, key:T, other:number | string } interface car { wheel:T, speed:T, }
當(dāng)然,類型別名和接口有區(qū)別,接口可以被 extends 和 implements ,類型別名不行
interface bus extends car八、Typescript中的枚舉類型{ } // 這樣會報錯: type otherTree extends tree{ }
枚舉類型用來將取值限定在一定的范圍之內(nèi),比如一周七天限定周一到周日分別用0至6的數(shù)字表示
1、枚舉中若未明確賦值,枚舉默認(rèn)從0遞增
可通過點語法或者鍵值對的方式取值
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days["Sun"] === 0); // true console.log(Days["Mon"] === 1); // true console.log(Days.Tue === 2); // true console.log(Days.Fri === 6); // true
2、明確賦值時,從賦值位置遞增
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat}; console.log(Days.Sun) // 7 console.log(Days.Mon) // 1 console.log(Days.Sat) // 6
一個使用枚舉的例子,通過枚舉的屬性來訪問枚舉成員,和枚舉的名字來訪問枚舉類型
enum Response { No = 0, Yes = 1, } function respond(recipient: string, message: Response): void { // ... } respond("Princess Caroline", Response.Yes)
3、字符串枚舉
需要注意,在一個字符串枚舉中,每個成員都必須用字符串字面量,或另外一個字符串枚舉成員進行初始化。
enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", }
4、手動賦值的枚舉項也可以為小數(shù)或負(fù)數(shù),此時后續(xù)未手動賦值的項的遞增步長仍為 1
enum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat}; console.log(Days["Sun"] === 7); // true console.log(Days["Mon"] === 1.5); // true console.log(Days["Tue"] === 2.5); // true console.log(Days["Sat"] === 6.5); // true
5、枚舉的計算所得項
枚舉值可由計算所得
enum Color {Red, Green=1+2, Blue = "blue".length};
6、常量枚舉
常量枚舉 用 const 標(biāo)示
const enum Directions { Up, Down, Left, Right } let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];九、Typescript中的數(shù)組類型
數(shù)組類型的定義方式有多種方式
1、最簡單的一種,類型+放括號,如:
let numArr : number[] = [1,2,3] // numArr 數(shù)組內(nèi)不能放其他類型的數(shù)據(jù),比如字符串或者布爾值 let objArr : Object[] = [ {}, function(){}, (p:string)=>{} ] // any 類型數(shù)組 let anyArr : any[] = [ 1,"string", function(){}, false ]
2、使用數(shù)組泛型定義數(shù)組類型
let nArr : ArraynArr = [1,100,58] let aArr :Array
3、用接口來描述數(shù)組
interface NumberArray { [index: number]: number; } let fibonacci: NumberArray = [1, 1, 2, 3, 5];
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/108087.html
摘要:調(diào)用者容易迷惑,當(dāng)傳入函數(shù)的參數(shù)類型為時返回值的類型究竟是還是。前面兩個是函數(shù)聲明,最后一個是函數(shù)實現(xiàn),有參數(shù)類型和返回值類型隨意搭配的意思。 Typescript 中的函數(shù) Javascrip 中函數(shù)是一等公民一、Javascript 中的兩種常見的定義函數(shù)的方式1、函數(shù)聲明 function myFunc(x,y){ return x+y } 2、函數(shù)表達(dá)式 let add...
摘要:接口前端程序員很難理解的點也是一門面向?qū)ο蟮恼Z言,但是中它是基于原型實現(xiàn)的,中使用了類,這樣會更清晰的體會到面向?qū)ο筮@一說法,但是實際在中的面向?qū)ο蟾油暾@些語言一樣,通過接口和類去完整的面向?qū)ο缶幊獭? 從入門到放棄的java 初中時自學(xué)過JAVA,學(xué)了大概一個多月吧, 學(xué)了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當(dāng)時是學(xué)javaScrip...
摘要:接口前端程序員很難理解的點也是一門面向?qū)ο蟮恼Z言,但是中它是基于原型實現(xiàn)的,中使用了類,這樣會更清晰的體會到面向?qū)ο筮@一說法,但是實際在中的面向?qū)ο蟾油暾@些語言一樣,通過接口和類去完整的面向?qū)ο缶幊獭? 從入門到放棄的java 初中時自學(xué)過JAVA,學(xué)了大概一個多月吧, 學(xué)了一個多月,看視頻這些,后面放棄了編程。 依稀記得,那段日子極度苦逼,我想如果當(dāng)時是學(xué)javaScrip...
摘要:斯坦福宣布使用作為計算機課程的首選語言近日,某位有年教學(xué)經(jīng)驗的斯坦福教授決定放棄,而使用作為計算機入門課程的教學(xué)語言。斯坦福官方站點將它們新的課程描述為是最流行的構(gòu)建交互式的開發(fā)語言,本課程會用講解中的實例。 前端每周清單第 11 期:Angular 4.1支持TypeScript 2.3,Vue 2.3優(yōu)化服務(wù)端渲染,優(yōu)秀React界面框架合集 為InfoQ中文站特供稿件,首發(fā)地址為...
閱讀 2118·2021-11-24 10:28
閱讀 1143·2021-10-12 10:12
閱讀 3350·2021-09-22 15:21
閱讀 691·2021-08-30 09:44
閱讀 1907·2021-07-23 11:20
閱讀 1155·2019-08-30 15:56
閱讀 1767·2019-08-30 15:44
閱讀 1490·2019-08-30 13:55