Instantly share code, notes, and snippets.

@hhyyg hhyyg/readonly.ts
Created Feb 2, 2019

Embed
What would you like to do?
TypeScript readonly
// Properties
interface Foo {
readonly bar: number;
readonly bas: number;
}
const foo: Foo = { bar: 1, bas: 2 };
foo.bar = 11; // Error: [ts] Cannot assign to 'name' because it is a read-only property. [2540]
//
(foo as { bar: number }).bar = 999;
(foo as any).bar = 999;
//
class Person {
constructor(readonly name: string) {
}
write() {
this.name = 'new name'; // Error: [ts] Cannot assign to 'name' because it is a read-only property. [2540]
}
}
//
const value: { readonly name: string } = { name: 'name' };
value.name = 'new name'; // Error: [ts] Cannot assign to 'name' because it is a read-only property. [2540]
// Read-only index signatures
const dic: { readonly [key: number]: number } = {
0: 100,
1: 101,
2: 102,
};
dic[103] = 103;// Error Index signature in type '{ readonly [key: number]: number; }' only permits reading.
//
// Readonly<T>
interface Category {
name: string;
[key: number]: number;
}
let category1: Readonly<Category> = { name: 'category1' };
category1 = { name: 'new cateogry name' }; // ok
category1.name = 'new name'; // Error: [ts] Cannot assign to 'name' because it is a read-only property. [2540]
category1[100] = 100; // Error: [ts] Index signature in type 'Readonly<Category>' only permits reading. [2542]
type ReadonlyCategory = { +readonly [P in keyof Category]: Category[P] };
const category2: ReadonlyCategory = category1;
category2.name = 'new name'; // Error: [ts] Cannot assign to 'name' because it is a read-only property. [2540]
category2[100] = 100; // Error: [ts] Index signature in type 'Readonly<Category>' only permits reading. [2542]
type MutableCategory = { -readonly [P in keyof ReadonlyCategory]: ReadonlyCategory[P] };
const category3: MutableCategory = category2;
category3.name = 'new name';// ok
category3[100] = 100;// ok
const state1: Readonly<{ name: string }> = { name: 'name' };
state1.name = 'new name';// Error: Cannot assign to 'name' because it is a read-only property.
function read<T extends Category>(value: Readonly<T>) {
value.name = 'new name';// Error: Cannot assign to 'name' because it is a read-only property.
}
// ReadonlyArray<T>
const numbers = [1, 2, 3];
numbers.push(4);
const numbers2: ReadonlyArray<number> = numbers;
numbers2.push(5);// Error: [ts] Property 'push' does not exist on type 'ReadonlyArray<number>'. [2339]
numbers2[0] = 4;// Error: [ts] Index signature in type 'ReadonlyArray<number>' only permits reading. [2542]
// ReadonlyMap<T>
const map = new Map<string, string>();
map.set("key1", "value1");
const readonlyMap: ReadonlyMap<string, string> = map;
readonlyMap.set("key1", "value1");// Error: [ts] Property 'set' does not exist on type 'ReadonlyMap<string, string>'.
// ReadonlySet<T>
const set = new Set<string>();
set.add('value');
const readonlySet: ReadonlySet<string> = set;
readonlySet.add('value;');// Error: [ts] Property 'add' does not exist on type 'ReadonlySet<string>'.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment