깃헙 레포를 보다가 객체에 `as const`를 선언하는 것 몇번 봤었다.
`as const`가 뭐지? 왜 객체에 선언할까?
한번 알아보자 🤔
📚 as const
상수가 아닌 것을 상수로 타입단언 (const assertion)한다.
이때 리터럴 타입으로 추론해준다.
리터럴 타입으로 추론되기 때문에 상수가 아닌 것에도 상수처럼 관리할 수 있다!
📚 const assertion을 활용한 상수 관리하기
const Colors = {
red: "#FF0000",
blue: "#0000FF",
green: "#008000"
}
각 컬러의 대문자를 담은 Colors 변수를 선언해줬다.
Colors 변수 내부에 추론된 값을 보면 각 속성 별로 리터럴 타입이 아닌 `primitive type(string)`으로 추론 된 걸 알 수 있다.
이유는 `const` 변수로 `Object`를 선언했지만 `Object` 내부의 값들은 언제든 바꿀 수 있기 때문이다.
이 때 `const assertion`을 활용해서 Colors를 내부의 값의 type을 `리터럴 타입`으로 변경할 수 있다.
const Colors = {
red: "#FF0000",
blue: "#0000FF",
green: "#008000",
} as const;
위의 화면처럼 colors 내부의 속성들의 타입이 리터럴 타입으로 추론된 것을 알 수 있다.
export default {
red: "RED",
blue: "BLUE",
green: "GREEN",
} as const;
이렇게 단언된 `Object`를 외부에서 import하여 사용하면 아래의 화면처럼 key들을 자동으로 추론할 수 있게 되고, 편리하게 상수를 관리할 수 있게 된다!!
반려견 관련 프로젝트에선 라우터의 PATH를 상수화해서 관리하는데 적용했다~
Reference
깃헙 레포를 보다가 객체에 as const를 선언하는 것 몇번 봤었다.
as const가 뭐지? 왜 객체에 선언할까?
한번 알아보자 🤔
📚 as const
상수가 아닌 것을 상수로 타입단언 (const assertion)한다.
이때 리터럴 타입으로 추론해준다.
리터럴 타입으로 추론되기 때문에 상수가 아닌 것에도 상수처럼 관리할 수 있다!
📚 const assertion을 활용한 상수 관리하기
const Colors = {
red: "#FF0000",
blue: "#0000FF",
green: "#008000"
}
각 컬러의 대문자를 담은 Colors 변수를 선언해줬다.
Colors 변수 내부에 추론된 값을 보면 각 속성 별로 리터럴 타입이 아닌 primitive type(string)으로 추론 된 걸 알 수 있다.
이유는 const 변수로 Object를 선언했지만 Object 내부의 값들은 언제든 바꿀 수 있기 때문이다.
이 때 const assertion을 활용해서 Colors를 내부의 값의 type을 리터럴 타입으로 변경할 수 있다.
const Colors = {
red: "#FF0000",
blue: "#0000FF",
green: "#008000",
} as const;
위의 화면처럼 colors 내부의 속성들의 타입이 리터럴 타입으로 추론된 것을 알 수 있다.
export default {
red: "RED",
blue: "BLUE",
green: "GREEN",
} as const;
이렇게 단언된 Object를 외부에서 import하여 사용하면 아래의 화면처럼 key들을 자동으로 추론할 수 있게 되고, 편리하게 상수를 관리할 수 있게 된다!!
반려견 관련 프로젝트에선 라우터의 PATH를 상수화해서 관리하는데 적용했다~
