🔁 타입이 바뀌면 return도 바꿔야죠 : 유니언 타입 확장에 대응하는 안전한 처리법 앞선 포스트에서 타입을 함수 매개변수로 재사용하는 법을 소개했다. 그런데 이렇게 타입만 바꿔준다고 과연 충분할까? 🧩 문제 상황 아래는 타입이다. direction이 혹은 일 때, 색상을 다르게 보여주기 위해 조건문으로 처리하고 있다. 지금은 문제가 없어 보이지만, 나중에 direction 값이 “neutral”처럼 하나 더 추가되면 어떨까? 이 경우 함수는 여전히 “up”과 그렇지 않은 케이스만 처리하기 때문에, neutral과 down은 같은 결과를 낼 것이고, neutral 타입 추가의 의미가 없을 것이다. 🛠️ 해결 방법: Switch문 적용하기 이런 식으로 switch 문을 만들어두면 나중에 direction에 새로운 타입이 추가되어도 기존 코드의 큰 변경 없이 새로운 타입에 대한 return문만 고쳐주면 된다. (OCP원칙 ..?) ✅ 장점 타입 확장에 안전하게 대응 예외 케이스를…

🔁 TypeScript에서 타입을 재사용하는 법 : 객체 타입의 특정 프로퍼티 타입 가져오기 졸업 프로젝트를 하던 중, 이미 정의해둔 타입에서 특정 속성만 재사용하고 싶어 방법을 고민하다가 알게 되었다. 🧩 문제 상황 아래는 MarketIndex 라는 타입이다. kospi/kosdaq 지수 렌더링을 위해 정의해둔 타입이다. 그리고 차트를 렌더링 하려는데, direction에 따라 색상을 바꾸고 싶었다. 상승(”up”)일 땐 빨간색, 하락(”down”)일 땐 파란색으로 .. direction 값을 받아서 색상을 리턴하는 함수를 정의하는데 매개변수 타입 정의 중 고민이 들었다. 단순히 “up”|”down” 타입으로 지정할 수도 있겠지만 먼 훗날 MarketIndex 타입이 변경된다면(예를들면 direction: boolean) 이라거나 … 함수들의 값을 모두 변경해야할 것 같아 유지보수성이 좋지 않을 것 같았다. 그래서 direction 속성을 색상 변경 함수의 매개변수 타입으로 재사…

📌 Non null 단언이 무엇일까? 타입스크립트는 Null이나 undefined 값을 엄격하게 다루기 때문에, 어떤 값이 null이 아님을 확신 하지 않으면 오류를 발생시킬 수 있다. 개발자는 해당 값이 null이 아니라는 걸 잘 알지만 ts 컴파일러에서 null일 수도 있다고 생각하고 경고를 발생시키는 것이다. 예를 들면, 이런 식으로 author의 길이를 알아내는 코드를 작성할 때, author는 있을 수도 있고 없을 수도 있기 때문에 js의 옵셔널 체이닝을 사용할 수 있다. 여기서 ts 컴파일러는 author 값이 null이 될 수도 있다고 판단하기 때문에 에러를 발생시키는데, 이럴 때 non null 단언 연산자 ! 를 이용할 수 있다. 이런 식으로 ? 대신 ! 연산자를 사용하면 컴파일러에게 ‘author는 null이 아니고 값이 들어있어!’ 라고 말해주는 역할을 하게 되고, 오류가 더 이상 발생하지 않게 된다. 📝 프로젝트에서 했던 비슷한 경험 지난 겨울 타입스크립트를 …

📌 인덱스 시그니처가 무엇일까? 타입스크립트에서 객체 타입을 선언할 때, 객체의 키와 값의 타입을 동적으로 정의할 수 있게 해주는 문법이다. 어떤 객체가 많은 속성을 가질 수 있는데, 속성들이 동일한 타입의 값을 가져야할 때 유용하게 사용할 수 있다. 예를 들어, 국가 이름 : 코드 형식을 가지는 CountryCode 객체를 만들어야 할 때 수많은 나라의 타입을 하나하나 선언하기는 어렵고 낭비일 수 있다. 예시) 국가 이름과 코드는 항상 string 이기 때문에, key - value 형식으로 지정해둘 수 있다. 이런 식으로 타입을 간단하게 선언해두고 실제 객체에서 동적으로 값을 추가할 수 있다! 🚨 유의할 점 다른 프로퍼티를 추가할 때는 기존 인덱스 시그니처에서 설정한 타입과 호환되게끔 해야한다. 만약 으로 설정해두었다면 추가 프로퍼티도 string 값을 가지도록 해야한다. 📌 인덱스 시그니처가 무엇일까? 🚨 유의할 점