TypeScript入門基礎(chǔ)(聯(lián)合類型诚撵、對象類型)

聯(lián)合類型
聯(lián)合類型(Union Types)表示取值可以為多種類型中的一種捧韵。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

聯(lián)合類型使用 | 分隔每個類型丝蹭。

這里的 let myFavoriteNumber: string | number 的含義是互亮,允許 myFavoriteNumber 的類型是 string 或者 number犁享,但是不能是其他類型。

當 TypeScript 不確定一個聯(lián)合類型的變量到底是哪個類型的時候豹休,我們只能訪問此聯(lián)合類型的所有類型里共有的屬性或方法:

function getString(something: string | number): string {
    return something.toString();
}

對象類型(接口)
在 TypeScript 中炊昆,我們使用接口(Interfaces)來定義對象的類型。

在面向?qū)ο笳Z言中,接口(Interfaces)是一個很重要的概念凤巨,它是對行為的抽象视乐,而具體如何行動需要由類(classes)去實現(xiàn)(implements)。
TypeScript 中的接口是一個非常靈活的概念敢茁,除了可用于對類的一部分行為進行抽象以外佑淀,也常用于對「對象的形狀(Shape)」進行描述。

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

賦值的時候卷要,變量的形狀必須和接口的形狀保持一致渣聚。定義的變量比接口少了一些屬性或者是多了一些屬性都是不允許的

有時我們希望不要完全匹配一個形狀独榴,那么可以用可選屬性(仍然不允許添加未定義的屬性)

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};
interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

這時候我們希望一個接口允許有任意的屬性僧叉,可以使用如下方式:

使用 [propName: string] 定義了任意屬性取 string 類型的值。

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let wang: Person = {
    name: "wang",
    sex:"boy"
}

需要注意的是棺榔,一旦定義了任意屬性瓶堕,那么確定屬性和可選屬性的類型都必須是它的類型的子集:

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

任意屬性的值允許是 string,但是可選屬性 age 的值卻是 number症歇,number 不是 string 的子屬性郎笆,所以報錯了。

另外忘晤,在報錯信息中可以看出宛蚓,此時 { name: 'Tom', age: 25, gender: 'male' } 的類型被推斷成了 { [x: string]: string | number; name: string; age: number; gender: string; },這是聯(lián)合類型和接口的結(jié)合设塔。

我們希望對象中的一些字段只能在創(chuàng)建的時候被賦值凄吏,那么可以用 readonly 定義只讀屬性:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中,使用 readonly 定義的屬性 id 初始化后闰蛔,又被賦值了痕钢,所以報錯了。

只讀的約束存在于第一次給對象賦值的時候序六,而不是第一次給只讀屬性賦值的時候:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

tom.id = 89757;

// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中任连,報錯信息有兩處,第一處是在對 tom 進行賦值的時候例诀,沒有給 id 賦值随抠。

第二處是在給 tom.id 賦值的時候,由于它是只讀屬性繁涂,所以報錯了拱她。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市爆土,隨后出現(xiàn)的幾起案子椭懊,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氧猬,死亡現(xiàn)場離奇詭異背犯,居然都是意外死亡,警方通過查閱死者的電腦和手機盅抚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門漠魏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人妄均,你說我怎么就攤上這事柱锹。” “怎么了丰包?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵禁熏,是天一觀的道長。 經(jīng)常有香客問我邑彪,道長瞧毙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任寄症,我火速辦了婚禮宙彪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘有巧。我一直安慰自己释漆,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布篮迎。 她就那樣靜靜地躺著男图,像睡著了一般。 火紅的嫁衣襯著肌膚如雪柑潦。 梳的紋絲不亂的頭發(fā)上享言,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音渗鬼,去河邊找鬼览露。 笑死,一個胖子當著我的面吹牛譬胎,可吹牛的內(nèi)容都是我干的差牛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼堰乔,長吁一口氣:“原來是場噩夢啊……” “哼偏化!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起镐侯,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤侦讨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體韵卤,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡骗污,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了沈条。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片需忿。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蜡歹,靈堂內(nèi)的尸體忽然破棺而出屋厘,到底是詐尸還是另有隱情,我是刑警寧澤月而,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布汗洒,位于F島的核電站,受9級特大地震影響景鼠,放射性物質(zhì)發(fā)生泄漏仲翎。R本人自食惡果不足惜痹扇,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一铛漓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鲫构,春花似錦浓恶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炕吸,卻和暖如春伐憾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背赫模。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工树肃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瀑罗。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓胸嘴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親斩祭。 傳聞我的和親對象是個殘疾皇子劣像,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

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