readonly¶
Система типов TypeScript позволяет помечать отдельные элементы интерфейса доступными только для чтения
. Это позволяет вам работать в функциональном стиле (в котором неожиданные мутации это плохо):
function foo(config: {
readonly bar: number;
readonly bas: number;
}) {
// ..
}
let config = { bar: 123, bas: 123 };
foo(config);
// Вы можете быть уверены, что `config` не изменился 🌹
Вы также можете использовать readonly
в определениях interface
и type
, например:
type Foo = {
readonly bar: number;
readonly bas: number;
};
// Инициализация в порядке
let foo: Foo = { bar: 123, bas: 456 };
// Мутация нет
foo.bar = 456; // Ошибка: Выражение присваивания не может осуществлено
// для константы или свойства, доступного только для чтения
Вы даже можете объявить свойство класса как readonly
. Вы можете инициализировать их в момент объявления или в конструкторе, как показано ниже:
class Foo {
readonly bar = 1; // OK
readonly baz: string;
constructor() {
this.baz = 'hello'; // OK
}
}
Тип Readonly¶
Существует тип Readonly
, который принимает тип T
и помечает все его элементы как readonly
. Вот демонстрация использования этого на практике:
type Foo = {
bar: number;
bas: number;
};
type FooReadonly = Readonly<Foo>;
let foo: Foo = { bar: 123, bas: 456 };
let fooReadonly: FooReadonly = { bar: 123, bas: 456 };
foo.bar = 456; // Okay
fooReadonly.bar = 456; // ОШИБКА: bar только для чтения
Различные варианты использования¶
ReactJS¶
ReactJS - это библиотека, которая любит иммутабельность, вы можете пометить ваши Props
и State
как неизменяемые, например:
interface Props {
readonly foo: number;
}
interface State {
readonly bar: number;
}
export class Something extends React.Component<
Props,
State
> {
someMethod() {
// Вы можете быть уверены, что никто не сможет сделать следующее
this.props.foo = 123; // ОШИБКА: (props неизменяемые)
this.state.baz = 456; // ОШИБКА: (следует использовать this.setState)
}
}
Однако вам не нужно это делать, поскольку определения типов для React уже помечают их как readonly
(внутренняя оболочка универсального типа соответствует типу Readonly
, упомянутому выше). Поэтому, достаточно:
export class Something extends React.Component<
{ foo: number },
{ baz: number }
> {
// Вы можете быть уверены, что никто не сможет сделать следующее
someMethod() {
this.props.foo = 123; // ОШИБКА: (props неизменяемые)
this.state.baz = 456; // ОШИБКА: (следует использовать this.setState)
}
}
Обратно-совместимая иммутабельность¶
Вы даже можете пометить сигнатуры индекса только для чтения:
/**
* Объявление
*/
interface Foo {
readonly [x: number]: number;
}
/**
* Использование
*/
let foo: Foo = { 0: 123, 2: 345 };
console.log(foo[0]); // Okay (чтение)
foo[0] = 456; // Ошибка (изменение): Readonly
Это замечательно, если вы хотите использовать нативные массивы JavaScript в иммутабельном виде. На самом деле TypeScript поставляется с интерфейсом ReadonlyArray<T>
, позволяющим вам сделать именно это:
let foo: ReadonlyArray<number> = [1, 2, 3];
console.log(foo[0]); // Okay
foo.push(4); // Ошибка: не возможен в ReadonlyArray, поскольку он изменяет
// массив
foo = foo.concat([4]); // Okay: создать копию
Автоматический логический вывод¶
В некоторых случаях компилятор может автоматически делать предположение, что определенный элемент доступен только для чтения, например, внутри класса, если у вас есть свойство, у которого есть только геттер, но нет сеттера, оно предполагается только для чтения, например:
class Person {
firstName: string = 'John';
lastName: string = 'Doe';
get fullName() {
return this.firstName + this.lastName;
}
}
const person = new Person();
console.log(person.fullName); // John Doe
person.fullName = 'Dear Reader'; // Ошибка! fullName только для чтения
Отличие от const
¶
const
- для ссылки на переменную
- переменная не может быть переназначена ни на что другое
readonly
это
- для свойства
- свойство может быть изменено из-за ссылочности
Пример, объясняющий 1:
const foo = 123; // ссылка на переменную
var bar: {
readonly bar: number; // для свойства
};
Пример, объясняющий 2:
let foo: {
readonly bar: number;
} = {
bar: 123,
};
function iMutateFoo(foo: { bar: number }) {
foo.bar = 456;
}
iMutateFoo(foo); // Параметр функции - foo ссылается на переменную foo
console.log(foo.bar); // 456!
По сути, readonly
гарантирует, что свойство не может быть изменено мной, но если вы дадите его кому-то, кто не даёт такой гарантии (кому разрешено по причинам совместимости типов), они могут его изменить. Но если сам iMutateFoo
сказал, что они не изменяют foo.bar
, компилятор правильно пометит его как ошибку, как показано ниже:
interface Foo {
readonly bar: number;
}
let foo: Foo = {
bar: 123,
};
function iTakeFoo(foo: Foo) {
foo.bar = 456; // Ошибка! bar только для чтения
}
iTakeFoo(foo); // Параметр функции - foo ссылается на переменную foo