본문 바로가기

🌳Frontend/typescript4

타입도 분기처리 할 수 있나요? 타입스크립트에서 조건부 타입 알아보기 타입스크립트에서는 조건에 따라 다른 로직을 실행할 수 있다. Condition ? true : false 삼항연산자를 활용한 조건부 로직 그렇다면, 타입도 조건에 따라 다르게 할당할 수 있을까? 예를들면, Condition이 true면 AType, false면 BType 처럼 말이다. 조건부 타입이 필요한 상황 타입에도 조건부 를 부여할 수 있다. 즉 , 조건부 타입이 가능하다. 현업에서 조건부 타입이 필요했던 상황과 활용방법에 대해 알아보자. 요구사항 요구사항은 버스와 지하철, 사무기관의 정보를 보여주는 화면을 개발하는 것이였다. 서버에서 내려주는 spec은 아래와 같았다. type Bus = { name: string lat: number lng: number } type Subway = { name.. 2024. 2. 16.
Typescript 에서 string union type을 type guard 하는 법 (typeof Array[number] 와 as const) string union type을 type guard 하는 법 (부제 typeof Array[number] 와 const assertion ) string으로 이루어진 union type을 타입가드하고 싶을 때를 알아보자 🧨 문제상황 color 의 타입을 담는 `string union type` 을 만들었다. type ColorKey = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' 그리고 그 color값을 저장하는 state 를 만들고, 외부에서 `val string` 을 받아오면 state에 저장하는 handler 함수까지 만들었지만.. const [color, setColor] = useState('red') const onChange = (.. 2023. 9. 17.
[Typescript/TS] 배열에서 union type 만들기 const animals = ['cat', 'dog', 'mouse'] as const // const animals: readonly ['cat', 'dog', 'mouse'] 2023. 7. 13.
[타입스크립트/Typescript] clean code 클린코드 출처 clean-code-javascript 번역본 clean-code-javascript 원본 을 읽고, 내가 리마인드 하고 싶고, 실제 현업에서 자주 리뷰했던 것들 정리 코드를 작성할 때 제일 중요한건(물론, 문제없는 테스트코드까지 빵빵한 코드를 짜는 것도 중요하지만!), 의도를 알 수 있는 이름과 로직을 짜는 것이라 생각한다. PR을 올릴때, 변수/함수 이름 짓는 것에서 코멘트를 정말정말.. 많이 받았다. (ㅠㅠ) 이해되는 것이, 나또한 리뷰시 이름부터 갸우뚱하면 바로 코멘트를 남기기 때문.. 언제나, 나의 코드를 읽을 제3자를 생각하며.. 고통스러운 이름짓기 시간을 가져야 한다. 그리고 언제나 재사용성과 가독성을 고려하자. 남을 위한 코딩처럼 보이지만, 결국은 나에게 돌아오는 것들이다. 변수 의미.. 2023. 3. 21.
728x90
반응형