typescript

Intro타입스크립트를 사용하다 보면 동일한 로직이지만 다른 타입을 처리해야 하는 상황을 자주 마주하게 됩니다.이럴 때 제네릭(Generics)은 타입을 마치 변수처럼 사용할 수 있게 해주는 강력한 도구입니다.제네릭이란?제네릭은 타입을 함수의 파라미터처럼 사용할 수 있게 해주는 문법입니다. 함수에 값을 전달하듯이, 제네릭을 사용하면 타입을 전달할 수 있습니다.// 제네릭 없이 작성한 함수function getFirstNumber(arr: number[]): number { return arr[0];}function getFirstString(arr: string[]): string { return arr[0];}// 제네릭을 사용한 함수function getFirst(arr: T[]): T { re..

Intro타입스크립트에서 satistfies 키워드를 사용해보신적 있으신가요? 왜 새로운 기능이 추가됐을까요? 먼저 아래 코드를 살펴보겠습니다.interface Config { mode: 'light'|'dark', retry: number}const config: Config = { mode: "dark", retry: 3,}; 문제가 없어보이네요? 이런 가정을 해보면 어떨까요.Config 타입을 만족하면서 실제 선언된 리터럴 타입이 추론됐으면 좋겠다 그러니까 config 변수 선언에서 할당된 mode:"dark", retry:3을 타입추론으로 얻고 싶습니다. 위 코드를 다시보니 선언 시점에 mode 필드가 dark라는게 정해졌는데 mode가 string으로 추론되네요. 타입이 넓어졌습니다. ..

Intro타입스크립트의 타입 시스템은 구조가 동일하면 두 타입을 서로 할당할 수 있는 구조적 타이핑을 따릅니다.하지만 구조가 같더라도 특정 값만 허용하도록 타입을 제한하고 싶다면 어떻게 해야 할까요? 예를 들어 특정 정규식을 만족하는 문자열을 구분하거나 양수와 음수를 구분하는 경우가 있을 수 있습니다. 이런 상황을 브랜드 타입(Brand Type)이라는 패턴으로 해결할 수 있습니다. 브랜딩이 왜 필요할까요?타입스크립트의 타입 시스템은 구조적으로 동일한 타입을 구분할 방법을 제공하지 않습니다.예를 들어 양수만 입력받아야 하는 함수가 있다고 가정해보겠습니다.function waitForSeconds(value:number) { return new Promise((resolve) => setTimeout(..

들어가며프로그래밍에서 객체지향 설계의 핵심은 "책임을 어떻게 나누고, 각 객체에게 얼마나 자율성을 주느냐"에 있습니다.객체의 책임이 자율적일수록 협력이 이해하기 쉬워지고 유연하게 변경할 수 있게 됩니다. 이를 피자 만들기를 예로 들어 자세히 살펴보겠습니다.1. 자율적인 책임은 협력을 단순하게 만든다피자를 주문하는 손님(클라이언트)은 피자를 직접 만드는 방법을 알 필요가 없습니다.자율적인 책임은 의도를 명확하게 표현함으로써 협력을 단순하고 이해하기 쉽게 만듭니다. 구체적인 수행 방식을 지시하는 대신 목적(WHAT)을 선언적으로 전달합니다. 세부적인 방식은 객체 내부에서 결정하므로 외부와의 협력은 단순해집니다.interface PizzaMaker { makePizza(): string;}class Chee..

공변성(Covariance)A가 B의 서브타입일 때, T는 T이면 타입 T는 공변이다.반환 타입이 공변적이라는 것은 반환 타입이 서브타입 관계를 유지하는 것을 말합니다.아래 예제에서 Cat은 Animal의 서브 타입니다. 그리고 Cat[]역시 Animal[]의 서브타입입니다. 서브 타입의 관계가 배열에서도 똑같이 유지됐음으로 공변적이라 할 수 있습니다. type IsSubtypeOf = S extends P ? true : falseclass Animal { name: string constructor(name: string) { this.name = name }}class Cat extends Animal { meow() { console.log('Meow') }}const cat ..

서론이 글은 any-considered-harmful을 번역, 정리한 글임을 밝힙니다. any를 사용하는 것은 대부분의 경우, 오용하기 쉬운 코드를 만들어 냅니다.예를 들어 아래와 같은 myFunction은 런타임 에러를 발생시킵니다.const myFunction = (input: any) => { input.someMethod();};myFunction("abc"); // This will fail at runtime!하지만 모든 케이스에서 any를 사용하면 안 되는 것은 아닙니다. 이번 글에서는 any의 사용이 유용한 경우에 대해서 알아보도록 하겠습니다.매개변수 제약 조건함수의 매개변수를 추론하는 ReturnType을 정의한다고 가정해 보겠습니다.any를 사용하지 않는다면 args의 타입은 unkn..

서론이 글은 naverD2의 아티클을 재구성한 글임을 밝힙니다.다중 중첩된 객체를 평탄화하는 유틸함수 flattenObject가 있습니다.아래 코드에서 아쉬운 점은 반환 타입이 any로 정의되어 있다는 점인데요. 오늘 포스팅의 내용은 이 flattenObject의 반환 타입을 추론하는 과정에 대한 설명입니다. 원문에서는 문제 해결의 관점에서 상향식으로 서술되어있지만 이 글에서는 기존 프로젝트에 작성된 복잡한 타입 정의를 분석하는 상황을 가정하고 하향식으로 설명해보도록 하겠습니다.function flattenObject(obj:any, result: any = {}):any { for (const key in obj) { if(typeof obj[key] === 'object' && obj[key] &&..

1. Type assertion 대신 Type Guard로 타입 좁히기as(type assertion)대신 type guard를 사용하는 것이 대부분 더 안전합니다.as(type assertion)의 경우 type 체크의 블랙박스를 만들고 운영 이슈로 이어질 수 있습니다.const dog = {} as Dog;// ❌ 런타임 에러가 나기 쉽다.dog.bark();interface Animal { type: 'dog' | 'bird'}type AnimalType = Animal['type']interface Dog extends Animal { type: 'dog'; bark: VoidFunction}interface Bird extends Animal { type: 'bird'; ..