Как использовать «как константу» в TypeScript (константные утверждения)

Когда мы должны его использовать?

Привет, меня зовут Пандху, я инженер-программист. Добро пожаловать в мой блог. Сегодня мы узнаем об константном утверждении.

Давайте углубимся в это.

const newArray = [1,2,3,4,5] as const
const newString = 'hello' as const
const newNumber = 1 as const

Вы можете предположить, что эти переменные неизменяемы. Это означает, что вы не можете изменить их в следующих строках. Некоторые из ваших мыслей верны, но могут быть неполными. Почему? Позвольте мне рассказать вам об этом.

Что такое «как константа»?

Это называется const assertion. Утверждение Const было выпущено в TypeScript v3.4 и выше. Согласно официальному сайту,

В TypeScript 3.4 представлена ​​новая конструкция для литеральных значений, называемая const утверждениями. Его синтаксис представляет собой утверждение типа с const вместо имени типа (например, 123 as const). Когда мы создаем новые литеральные выражения с const утверждениями, мы можем сигнализировать языку, что

никакие литеральные типы в этом выражении не должны расширяться (например, нельзя переходить от "hello" к string)

литералы объектов получают readonly свойств

литералы массива становятся readonly кортежами

Честно говоря, я был сбит с толку тем, что именно было объяснено в документации, но я попытался найти другие ссылки, чтобы понять это. И после того, как я получил много ссылок, я попытался переписать код в соответствии со своим пониманием. Так вот оно.

Нет расширения типа для литеральных типов

let a = 'some words'

Если вы видите мой снимок экрана выше, я получаю объяснение, что a — строковый тип. Что, если мы отредактируем его как const?

const a = 'some words'

А что, если мы переназначим их обоих?

1. // let
let a = 'some words'
a = 'new word' // OK
2. // let with const assertions
let a = 'some words' as const
a = 'new word' // let a: "some words" - Type '"new word"' is not assignable to type '"some words"'.
3. // const (directly)
const a = 'some words'
a = 'new word' // const a: any - Cannot assign to 'a' because it is a constant.

Если вы видите там, когда мы переназначаем значение с помощью let, a будет ОК. С другой стороны, если мы переназначим с let внутри const assertions, a не примет и получит ошибку. Также, когда вы переназначаете с const напрямую (не с утверждениями const). Но вам нужны более конкретные объяснения для случаев 2 и 3.

В случае 2 мы получили let a: «несколько слов». В случае 3 const a: any. Почему мы получаем другую ошибку?

Потому что, когда мы используем const assertion, значение было только одним входом. Простой. Например,

let a = "some words" // will be have "string"

Но если вы используете утверждения const,

let a = "some words" as const // to the point, will explain that a just value "some words"

В приведенном выше случае a просто имеет одно значение и является конкретным абсолютно, «некоторые слова», а не какие-либо. Вы не можете переназначить другое значение, и оно доступно только для чтения.

Литералы объектов получают свойства только для чтения

Но что, если мы используем его для литералов объектов? Это работает? Давай попробуем.

Когда мы используем let или const в литералах объекта, мы по-прежнему сможем изменить значение в нем. Например,

1. // With let
let data = {
  firstName: 'Pandhu',
  lastName: 'Wibowo'
}
data.firstName = 'Wibowo'
console.log(data)
// {   "firstName": "Wibowo",   "lastName": "Wibowo" }
2. // With const
const data = {
  firstName: 'Pandhu',
  lastName: 'Wibowo'
}
data.firstName = 'Wibowo'
console.log(data)
// {   "firstName": "Wibowo",   "lastName": "Wibowo" }

Вы по-прежнему сможете изменить его, и это работает. Потому что он не доступен только для чтения и просто сообщает нам, есть ли у данных два свойства со строковым типом для каждого свойства.

const data: {
    firstName: string;
    lastName: string;
}

Таким образом, мы можем добавить «как константу» аналогичным образом, когда используем литеральные типы.

const data = {
  firstName: 'Pandhu',
  lastName: 'Wibowo'
} as const
data.firstName = 'Wibowo'
console.log(data) // Cannot assign to 'firstName' because it is a read-only property.

Литералы массива становятся read-only кортежами

Мы также можем использовать его для литералов массива.

const payload = {
    fullName: 'Pandhu Wibowo',
    characteristics: ["man", 25, "husband"]
}
// Description for the object
const payload: {
    fullName: string;
    characteristics: (string | number)[];
}

Мы хотим изменить его, чтобы он стал таким:

const payload = {
    fullName: 'Pandhu Wibowo',
    characteristics: ["man", 25, "husband"]
} as const
// Description for the object
const payload: {
    readonly fullName: "Pandhu Wibowo";
    readonly characteristics: readonly ["man", 25, "husband"];
}

Если мы изменим, мы получим ошибку, и сообщение будет выглядеть так:

const payload = {
    fullName: 'Pandhu Wibowo',
    characteristics: ["man", 25, "husband"]
} as const
payload.characteristics.push('rich')
Property 'push' does not exist on type 'readonly ["man", 25, "husband"]'.

Тревога!

Если вы, ребята, оказались из Индонезии и хотите поддержать меня, чтобы я писал больше и больше, надеюсь, вы можете немного пожертвовать из своего кошелька. Вы можете поделиться своим подарком в некоторых отношениях, спасибо.

Саверия

https://saweria.co/pandhuwibowo

Трактеер

https://trakteer.id/goodpeopletogivemoney

Читать больше моих статей

Ссылка

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.