Typescript _ as const

as const

: TypeScript 3.4 버전에서 도입된 const assertion 기능
→ TypeScript에서 값의 리터럴 타입을 유지하고, 읽기 전용 속성(immutable)을 부여하는 역할

const assertions? 원래 상수가 아닌 것을 상수로 선언해주는 기능
→ TypeScript에 변수가 변경되지 않을 것, 불변할 것이며 가능한 엄격한 유형을 제공해야 함을 알려줌

왜 사용하는 걸까?

• 타입 안정성 강화
  리터럴 타입을 유지하여 예상치 못한 타입 확장을 방지함
  타입 시스테임이 값 자체를 정확히 이해하도록 도와줌

• 코드 의도 명확화
  특정 값이 수정되지 않을 것임을 명시하여 코드의 의도를 더욱 명확하게 드러냄

• Immutable 데이터 모델링
  readonly 속성을 통해 데이터 구조를 수정 불가능하게 만들어 안정성을 높임
  상태 관리 라이브러리에서 불변성을 유지하거나 API 응답 데이터를 다룰 때 유용함

이를 통해 코드의 안전성을 높이고, 의도치 않은 값 변경을 방지할 수 있음
값 자체를 리터럴 타입으로 고정하고, 데이터가 수정되지 않도록 제한할 수 있음

주요 기능 & 장점

1. 리터럴 타입 유지
   TypeScript가 값을 넓은 타입이 아닌 정확한 값 자체로 타입을 추론함

2. 읽기 전용 속성 부여
   객체나 배열의 모든 속성이 자동으로 읽기 전용(readonly)으로 설정됨

3. 타입 안정성 강화
   실수로 잘못된 값을 넣는 것 방지
   ex. 특정 객체의 프로퍼티 값이 고정된 문자열 집합이어야 할 때 유용함

4. Enum 대체
   as const는 enum 대신 사용되기도 함
   enum 보다 가독성이 좋고, 컴파일 후 코드에 남지 않아 성능에 영향을 미치지 않음

---

문자열 & 숫자

문자열과 숫자에 as const 를 추가하면 타입이 특정 값으로 좁아짐

let foo = 'foo';
// foo: string

let foo = 'foo' as const;
// foo: 'foo'
  

let foo = 5;
// foo: number

let foo = 5 as const;
// foo: 5

// const를 이용해 변수 선언
let foo = 7;
// foo: number

const foo = 7;
// foo: 7

→ 문자열과 숫자의 경우는 const 를 사용해 변수를 정의하면 동일한 결과가 나오기 때문에 덜 유용함

but, 런타임 안전성이라는 이점을 가지고 있음

변수로 값을 정의하지 않고, 단순히 문자열 리터럴을 사용하고 싶은 경우 → as const 가 유용하게 사용됨

as const 리터럴 값과 함께만 사용할 수 있음

객체

객체의 경우 as const 는 모든 속성을 읽기 전용으로 변경하고 값을 좁힘

const myObject = {
	foo: 'bar',
	baz: 7,
};
/* 
	foo: string;  
	baz: number;
*/

const myObject = {
	foo: 'bar',
	baz: 7,
} as const;
/* 
	readonly foo: 'bar';  
	readonly baz: 7;
*/

const myObject = {
	foo: 'bar',
	baz: 7,
} as const;

myObject.baz = 5;
// Cannot assign to 'baz' because it is a read-only property

→ 속성 값을 변경할 수 없음

const me = {
	name: 'Yejin',
	hobbies: ['coding', 'cooking'],
} as const;

me.hobbies = ['gaming'];
// Cannot assign to 'hobbies' because it is a read-only property.
me.hobbies.pop();
// Property 'pop' does not exist on type 'readonly ["coding", "cooking", "gaming"]'.

→ 객체 또는 배열을 변형(mutate)시키는 메서드도 사용할 수 없음

배열

배열의 경우 as const 는 읽기 전용 값의 튜플로 변경함

튜플? 순서가 지정된 값의 배열 (객체처럼 변수들을 그룹화하는데 유용하지만 조금 더 간단함)

const goodLanguage = ['typescript', 'javascript'];
// goodLanguage: string[]

const goodLanguage = ['typescript', 'javascript'] as const;
// goodLanguage: readonly ['typescript', 'javascript']

→ as const 는 배열의 순서와 항목 수를 보존하기 때문에 튜플을 생성하고 다루는 데 특히 유용함

const vs as const

const 로 변수를 선언하는 것과 변수 끝에 as const 를 추가하는 것은 다름

const 변수를 선언하면 해당 변수가 참조하는 대상이 변경되지 않을 것임을 typescript에게 알릴 수 있음

javascript에서 문자열과 숫자는 불변이므로 어느 쪽 변수를 선언하든 typescript에게 두 기술 간 차이는 없음

→ const는 javascript 기능, as const는 typescript 기능