현것 | 개발로그

Omit 유틸리티 타입은 지난 번에 구현한 ReturnType과 마찬가지로 실제 코드에서도 많이 사용할 수 있는 유틸리티 타입이다. 오늘은 이번 문제를 풀어보려고한다. 먼저 코드를 보고 풀어보는 것이 좋을 듯하다. https://tsch.js.org/3/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 문제 분석 타입 T는 오브젝트 형태로 들어오게 되고, K는 유니온 타입으로 들어온다. 먼저 K의 형태와는 상관없이 T..

블로그에 이펙티브 타입스크립트에 관해 공부한 내용들을 정리를 하면서 반년 정도의 시간이 흘렀다. 그동안 타입스크립트 공부에 대해 조금 소홀힌 나를 반성하면서 타입스크립트 연습문제들을 풀어보면서 다시 한번 기강을 잡으려한다. 이용하려는 사이트는 아래 깃헙 페이지와 같다. GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with..

4장 타입 설계 아이템 28 | 유효한 상태만 표현하는 타입을 지향하기 3줄 요약 1. 상태 타입을 만들 때에는 유효한 타입만을 가지고 있어야 한다. 2. 상태 타입을 만들 때에는 유니온 타입을 이용한 타입을 지향하자. 3. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 이번 챕터에서는 타입 설계와 관한 아이템들을 다룹니다. 타입 설계를 명확하게함으로써 예상치 못한 버그가 숨어들 여지를 줄일 수 있습니다. 상태를 표현하는 타입을 만들 때에는 유효한 타입만을 가지고 있어야 합니다. State 타입을 예시로 들어보겠습니다. State 타입에는 a와 b 속성은 반드시 가지고 c와 d 속성은 선택적인 속성입니다. 그리고 State 타입은 3가지 상태가 있다고 가정해보겠습니다. (One ..

3장 타입 추론 아이템 27 | 함수형 기법과 라이브러리로 타입 흐름 유지하기 3줄 요약 1. 타입스크립트에서는 절차형 프로그래밍보다는 함수형 프로그래밍 방식이 더 좋다. 2. 타입스크립트의 타입을 잘 추론하기 위해 'Lodash'와 같은 라이브러리를 이용하는 것이 좋다. 3. 함수 체이닝을 이용하면 코드의 가독성 또한 좋고 타입의 흐름을 잘 유지할 수 있다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 프로그래밍을 할 때 흔히 절차형 프로그래밍 방식이 있고 함수형 프로그래밍 방식이 있습니다. 타입스크립트에서는 절차형 프로그래밍 방식보다는 함수형 프로그래밍 방식을 사용하는 것이 더 좋다고 말할 수 있습니다. 이유는 절차형 프로그래밍에서는 타입 체크를 관리해야 하지만 함수형 프로..

3장 타입 추론 아이템 26 | 타입 추론에 문맥이 어떻게 사용되는지 이해하기 3줄 요약 1. 타입스크립트는 문맥에 따라 타입 추론을 다르게 한다. 2. let / const 키워드의 타입 추론은 다르다. const 키워드 사용 시에 더 좁은 타입으로 추론한다. 3. const 키워드는 얕은 상수 선언이고 as const 키워드는 깊은 상수 선언이다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 1) 변수를 let / const 키워드를 이용하여 선언할 때 타입 추론 변수를 let 키워드를 이용하여 선언할 때와 const 키워드를 이용하여 선언할 때 타입 추론이 다릅니다. 예시를 통해 살펴보겠습니다. 먼저 let 키워드로 변수를 선언한 nameLet 변수는 string 타입으로..

3장 타입 추론 아이템 25 | 비동기 코드에는 콜백 대신 async 함수 사용하기 3줄 요약 1. 콜백보다는 프로미스가 코드를 작성하기도 타입을 추론하기 쉽다. 2. async 함수는 항상 프로미스를 반환하도록 강제한다. 3. async 함수에서 프로미스를 반환하면 또 다른 프로미스로 래핑되지 않는다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 자바스크립트 관점에서 콜백 대신 async 함수를 사용하는 것이 좋은 이유 중 하나는 코드의 가독성을 높일 수 있기 때문입니다. 타입스크립트에서도 마찬가지입니다. async 함수를 통해 더 직관적인 코드를 만들어낼 수 있고 타입 추론을 쉽게 만들어줍니다. 이번 아이템은 사실 많은 분들이 알고 있는 이야기라 몇 가지 특징점만 집고 넘어..

3장 타입 추론 아이템 24 | 일관성 있는 별칭 사용하기 3줄 요약 1. 일관성 있는 변수 식별자 사용하기. 2. 새로운 변수 별칭보다는 객체 비구조화 고려하기. 3. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 이번 아이템에서 이야기하고 하는 바는 식별자를 일관성 있게 사용하자입니다. 타입스크립트에서 이렇게 식별자를 일관성 없이 사용하는 것을 지양하는 이유는 타입 좁히기와 관련이 있습니다. Point라는 타입에 z 라는 속성이 optinoal 이라고 가정하겠습니다. 이때 별칭을 일관성 없이 사용하면 아래와 같이 에러가 발생합니다. 타입스크립트 컴파일러가 에러를 내뿜습니다. 에러의 내용은 아래와 같습니다. zPo의 타입은 여전히 undefined 타입과 number 타입의 유..

3장 타입 추론 아이템 23 | 한꺼번에 객체 생성하기 3줄 요약 1. 객체 생성할 때에는 속성을 하나씩 추가해 완성시키지 말자. 2. 객체 생성할 때에는 여러 속성을 포함해 한꺼번에 생성하자. 3. 객체를 조립할 때에는 스프레드 연산자를 이용하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 이번 아이템의 주제는 명확합니다. 객체를 생성할 때에는 객체를 먼저 만들고 해당 객체에 속성을 하나씩 추가하는 것을 지양하고 객체를 한번에 만들 자입니다. 위 방식보다는 아래 방식으로 객체를 만드는 것이 좋습니다. 객체들을 조립하여 큰 객체를 만들 때에도 여러 단계를 거치는 것은 좋지 않습니다. Object.assign 함수를 이용하여 namedPoint라는 객체에 point객체와 id객..

2장 타입스크립트의 타입 시스템 아이템 17 | 변경 관련된 오류 방지를 위해 readonly 사용하기 3줄 요약 1. 객체 property 앞에 붙는 readonly와 array, 튜플 타입 앞에 붙는 readonly의 차이를 이해하자. 2. 객체의 readonly property는 얕게(shallow) 동작한다. 3. readonly number[] 타입은 number[] 타입의 상위 집합이다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트에는 readonly라는 키워드가 있습니다. 변경 불가능을 위한 목적으로 사용되지만 두 가지 다른 쓰임새가 있습니다. 해당 사실에 주목하면서 이번 아이템을 살펴보면 좋을 것 같습니다. (1) 객체 타입 Property 앞에 붙는..

2장 타입스크립트의 타입 시스템 아이템 16 | number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기 3줄 요약 1. 자바스크립트에서는 object의 key 타입은 string 타입 혹은 symbol 타입이다. 다른 타입은 형변환된다. 2. 타입스크립트에서는 자바스크립트와의 일관성을 위해 number 타입의 key 타입을 허용한다. 3. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 자바스크립트의 배열은 object 타입입니다. 그리고 자바스크립트에서 object는 키와 값의 쌍으로 구성되어 있습니다. 자바스크립트 엔진에서는 object의 키는 string 타입 혹은 ..