TypeScript의 꽃🌷이라 할 수 있는 타입추론(Type Inference)과 Generic Type의 부분 타입추론 문제 대해 알아봅니다. 들어가기 앞서.. 여러분은 모나드라는 개념을 알고 있나요? 어떤 개념을 비로소 깨닫는 순간을 ‘Aha moment’라 부르기도 하는데, 더글라스 크록포드의 말을 인용하자면, 모나드를 이해하는 Aha moment를 겪는 순간, 다른 사람에게 모나드를 설명할 수 없게 되는 저주에 걸린다고 한다. 그런데, 모나드만 그러한가? 세상의 많은 이해와 문제들이 비슷한 상황에 놓여 있다. 간략화한 적당한 비유를 통해 설명하는 게 처음 접하는 사람들에게 쉽게 느껴지겠지만, 대부분의 경우는 결국 불필요한 오해를 가져온다. 출처 원문 만약 이 글을 읽고 부분 타입 추론 문제와 이를..

interface를 써야한다. type을 써도 괜찮다. 이에 관한 의견 차이가 약간 있었고, 이에 타입 선언 규칙을 정리했다. 그래서 무엇을 쓰는게 좋은건가? 나는 사실 Declaration Merging이 필요한 경우를 제외하곤 Type alias만을 사용하는 쪽이긴 한데 깊게 들어가서 차이를 비교해보니, interface를 적절히 사용함으로써 개념적인 정리와 이해에 대한 장점이 있었고 (프로젝트마다 다르겠지만)성능적인 이점도 있는 것을 알게 되었다. 결론은.. "객체" 에 대해서 interface를 선호하고, Inheritance 관련한 부분 이외엔 type을 사용하는 쪽으로 정리했다. 😄 이 글은 그 정리에 대한 결과이다. Primitive types 💡 Primitive types을 사용할 때 t..

TypeScript의 Type은 어떻게 나누어지는가? 1. Static 정적 유형은 "컴파일 타임" 또는 "프로그램을 실행하지 않고" 이미 알고있는 유형을 의미 user-defined type(function, tuple, array, object ...), primitive type(string, number, boolean ...) 으로 세부 분류. 2. Generic Generic은 단일 데이터 형식이 아닌 다양한 데이터 형식으로 작업할 수 있는 구성 요소를 만드는 데 사용 3. Decorators 클래스 선언, 메서드, 속성, 접근자 및 매개변수에 첨부할 수 있는 특수한 데이터 유형 let any: any let number: number = 5 let never: never = any // ❌ ..

프로그램 언어의 다형성(多形性, polymorphism; 폴리모피즘)은 그 프로그래밍 언어의 자료형 체계의 성질을 나타내는 것으로, 프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메서드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다. 출처 - 위키백과 다형성(컴퓨터 과학) 다형성(Polymorphism)은 프로그래밍 언어 이론에 깊이 뿌리를 둔 개념이며 다양한 종류가 있습니다. 이 글에서는 타입스크립트의 함수를 두 종류의 다형성으로 바라보고 생각합니다. 즉, 인수 타입에 따라 다르게 동작하는 함수(i.e. ad-hoc polymorphisms)와 다양한 수의 인수를 취하는 함수(i.e. parametric polymorphisms)입니다. Union type 만..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 지난 글(TypeGuards와 Narrowing)에서 언급했던 Opaque 타입에 대해 알아보겠습니다. 소개 우선 타입스크립트의 타입은 기본적으로 유형의 구조가 동일하다면 호환 가능합니다. 코드와 함께 살펴보겠습니다. type Username = string; type Password = string; Username 타입과 Password 타입은 모두 string이기 때문에 타입스크립트에서는 호환 가능합니다. 개발자는 다른 개념으로 각각의 타입을 생성했지만 타입스크립트는 그..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Narrowing과 type guards Narrowing은 type guards를 사용해 type을 좁혀 더 정확하게 만드는 과정입니다. type guards는 type의 범위를 좁히는 데 도움을 주는 특별한 검사 방식을 말합니다. 이해가 쉽도록 예제로 풀어보겠습니다. 여기, 천 단위 구분 기호를 추가해주는 함수가 있습니다. export function withCommas(value: number) { const formatter = new Intl.NumberFormat(..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. 2022.07.02 - [개발/type-challenges] - 타입스크립트 타입 정복: 내장 유틸리티 타입을 만들어보자 지난 글에서는 타입스크립트에 내장되어 자주 사용하게 되는 유틸리티 타입들을 직접 구현해보는 문제들을 소개해 드렸습니다. 어떠셨나요? 이 문제들은 type-challenges의 쉬움~보통 난이도에 해당하는 유형이었습니다. 지난 글에서 살펴본 기본적인 keyof, in, Indexed Access Types와 더불어 설명하지 못했던 Conditional Typ..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org keyof operator keyof operator는 객체 유형의 키의 문자열 또는 숫자 리터럴 조합을 생성합니다. type Point = { x: number; y: number }; type P = keyof Point; // 'x' | 'y' in operator JavaScript에서 in..

* 이 프로젝트는 기본적으로 TypeScript를 써 보았고, 내장된 유틸리티 타입들과 Generic 등을 알고 있는 상태에서 진행하는 것을 추천합니다. 그렇지 않다면, 공식 사이트 등을 참고해가며 학습과 병행하는 것을 추천합니다. type-challenges는 TypeScript의 공식 사이트의 playground를 통해 이루어집니다. 그리고 타입을 통해 정확하게 요구사항을 타입을 구현해 냈는지 테스트도 진행합니다. 아래는 가장 첫 문제, 몸풀기에 해당하는 hello-world 문제입니다. TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or Ja..

TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 잠재적인 버그를 피할 수 있는 장점이 있습니다. 또, 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 기술할 수 있어 코드의 가독성을 높이고, 예측 가능하게 합니다. 이는 곧 프로젝트의 유지보수성의 향상에도 도움이 될 수 있습니다. 게다가 IDE는 이를 분석해 자동완성 기능까지 제공하니 생산성의 향상에도 도움을 줍니다. TypeScript를 처음 접한다면, 타입을 선언하는 데에 어려움이 다소 존재할 수 있습니다. 컴파일 에러를 피하기 위해 any로 지정하는 경우도 종종 생깁니다. any는 앞서 말한 TypeScript의 장점을 모두 상쇄합니다. 최대한 쓰지 않으려고 하는 게 중요하겠죠. 타입을 선언하는데에 어려움이 있는 것은 타입 시스템에 ..

진행 중인 프로젝트 내 비슷한 로직을 처리하는 Modal UI가 10개가량 존재하는 것을 발견했다. 자연스럽게 컴포넌트로 추출되었을 법 한데 무엇 때문인지 각각 존재하고 있었다. // 초기 컴포넌트의 형태 type Payload = { foo: string; bar: string; baz: string; }; type WithRequestComponentProps = {}; const WithRequestComponent = ({}: WithRequestComponentProps) => { const { register, handleSubmit } = useForm(); const onSubmit: SubmitHandler = (payload) => { // 서버로의 요청 }; return ( ); };..