TypeScript基礎入門 - 接口 - 只讀屬性

轉載地址

TypeScript基礎入門 - 接口 - 只讀屬性

項目實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.0.8

爲了保證後面的學習演示須要安裝下ts-node，這樣後面的每一個操做都能直接運行看到輸出的結果。

npm install -D ts-node

後面本身在練習的時候能夠這樣使用

npx ts-node src/learn_basic_types.ts

npx ts-node 腳本路徑

接口

TypeScript的核心原則之一是對值所具備的結構進行類型檢查。 它有時被稱作「鴨式辨型法」或「結構性子類型化」。 在TypeScript裏，接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

只讀屬性

一些對象屬性只能在對象剛剛建立的時候修改其值。 你能夠在屬性名前用 readonly來指定只讀屬性:

interface Point {
    readonly x: number;
    readonly y: number;
}

你能夠經過賦值一個對象字面量來構造一個Point。 賦值後， x和y不再能被改變了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

運行後獲得以下結果

⨯ Unable to compile TypeScript:
src/interface_3.ts(7,4): error TS2540: Cannot assign to 'x' because it is a constant or a read-only property.

TypeScript具備ReadonlyArray<T>類型，它與Array<T>類似，只是把全部可變方法去掉了，所以能夠確保數組建立後不再能被修改：

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

運行後獲得的結果以下

⨯ Unable to compile TypeScript:
src/interface_3.ts(11,1): error TS2542: Index signature in type 'ReadonlyArray<number>' only permits reading.
src/interface_3.ts(12,4): error TS2339: Property 'push' does not exist on type 'ReadonlyArray<number>'.
src/interface_3.ts(13,4): error TS2540: Cannot assign to 'length' because it is a constant or a read-only property.
src/interface_3.ts(14,1): error TS2322: Type 'ReadonlyArray<number>' is not assignable to type 'number[]'.
  Property 'push' is missing in type 'ReadonlyArray<number>'.

上面代碼的最後一行，能夠看到就算把整個ReadonlyArray賦值到一個普通數組也是不能夠的。 可是你能夠用類型斷言重寫：

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
a = ro as number[];
console.log(a);

運行後獲得的結果以下

[ 1, 2, 3, 4 ]

readonly vs const

最簡單判斷該用readonly仍是const的方法是看要把它作爲變量使用仍是作爲一個屬性。 作爲變量使用的話用 const，若作爲屬性則使用readonly。

本實例結束實踐項目地址

https://github.com/durban89/typescript_demo.git
tag: 1.0.9