As const в Typescript

Привет, Хабр!

В разработке часто возникают ситуации, когда точность типов и нежелание допускать неясности в коде становятся первостепенными задачами. В таких случаях, разработчикам приходится искать инструменты, предоставляющие максимальную ясность и строгость в определении данных. Один из таких инструментов — ключевое слово as const. В данной статье мы рассмотрим, как as const может повысить уровень строгости и предсказуемости, а также рассмотрим практические примеры его использования для создания неизменяемых и точных типов.

Подробнее о “as const”

Когда вы используете as const для переменной или значения, TypeScript уточняет тип этой переменной до ее точного значения или комбинации литеральных типов. Это часто используется для создания неизменяемых значений и гарантирования того, что TypeScript будет рассматривать значения как конкретные литералы, а не расширять типы.

Пример:

Представьте, что нам нужно написать функцию для открытия входной двери в дом. Пишем функцию, которая принимает параметром ключ, и проводит с ним какие-либо операции.

const wallet = {   key: "open_door_pls" }  const openDoor = (key: "open_door_pls") => {   //... }

Но, когда мы пытаемся использовать функцию openDoor с ключом из нашего бумажника, почему-то происходит следующее:

const wallet = {   key: "open_door_pls" }  const openDoor = (key: "open_door_pls") => {   //... }  openDoor(wallet.key) // ERROR: Argument of type 'string' is not assignable to parameter of type '"open_door_pls"'

Почему же мы попали в такую ситуацию?

Всё дело в том, что wallet.key у нас никак не привязан к значению "open_door_pls”, и по сути является просто элементом с типом string, значение которого можно легко изменить на любое другое:

const wallet = {   key: "open_door_pls" }  wallet.key = "cucumber" // код отрабатывает без ошибок

Чтобы избежать такого поведения, и сделать все элементы wallet полноценными, неизменяемыми (readonly) значениями, мы можем воспользоваться конструкцией as const:

const wallet = {   key: "open_door_pls" } as const  wallet.key = "cucumber" // ERROR: Cannot assign to 'key' because it is a read-only property.

Элементы wallet привязались к своим значениям и теперь имеют флаг readonly.

Что в конечном итоге решило нашу проблему с параметром функции openDoor:

const wallet = {   key: "open_door_pls" } as const;  const openDoor = (key: "open_door_pls") => {   //... };  openDoor(wallet.key) // код отрабатывает без ошибок

Почему не Object.freeze()?

Проблема Object.freeze() заключается в том, что после заморозки объекта, readonly присваевается только элементам на верхнем уровне вложенности.

const car = Object.freeze({   name: "Porshe Cayenne",   equipment:{     engine: "MDC.AB"   } });  car.equipment.engine = "F8CV"; // без проблем изменили двигатель

При использовании as const компилятор на любом уровне вложенности укажет, что программист пытается изменить константу.

const car = {   name: "Porshe Cayenne",   equipment:{     engine: "MDC.AB"   } } as const;  car.equipment.engine = "F8CV"; // ERROR: Cannot assign to 'engine' because it is a read-only property.

Замена enum-ам?

as const превосходно подходит в качестве альтернативы enum.

О минусах enum можно подробно почитать в этой статье.

Пример перехода кода с enum на as const:

Код, с использованием enum:

enum Wallet {   KEY = "open_door_pls" };  const openDoor = (key: "open_door_pls") => {   //... };  openDoor(Wallet.KEY)

Код, переписанный на as const:

const wallet = {   key: "open_door_pls" } as const;  const openDoor = (key: "open_door_pls") =>{   //... };  openDoor(wallet.key);

Ещё одна действительно крутая особенность as const заключается в том, что использование as const позволяет быть очень гибким в обращении с ключевым объектом:

const friendsDict = {   Alfred: "101 Pine Road, Toronto, ON M5A 1A1, Canada",   Liam: "777 Sycamore Lane, Tokyo, 100-0001, Japan",   Mia: "666 Willow Street, Paris, 75001, France", } as const;  type FriendName = keyof typeof friendsDict; // "Alfred" | "Liam" | "Mia" type FriendAddress = (typeof friendsDict)[keyof typeof friendsDict]; //"101 Pine Road, Toronto, ON M5A 1A1, Canada" | "777 Sycamore Lane, Tokyo, 100-0001, Japan" | "666 Willow Street, Paris, 75001, France"

Резюмируя

Мы рассмотрели конструкцию as const в TypeScript и её роль в создании более строгих и предсказуемых типов данных. Надеюсь, что данная статья помогла вам лучше понять, как использование as const может повысить уровень безопасности и ясности вашего кода.

Таким образом, внедрение as const в ваш код может быть ключом к облегчению его поддержки в будущем и уменьшению вероятности ошибок. Пользуйтесь этим инструментом с умом, и ваш код станет более чистым, надежным и легко поддерживаемым!

До новых встреч в мире строгой типизации!

Ещё полезностей по теме

as const: the most underrated TypeScript feature

Enums considered harmful

Use ‘as const’ in TypeScript