현것 | 개발로그

Readonly 유틸리티 타입 또한 타입스크립트 유저들이 많이들 사용하는 타입이다. 오늘은 이 타입 구현 도전이다. 먼저 아래 주소를 통해 한 번 도전하는 것을 권한다. https://tsch.js.org/4/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 문제 분석 type MyReadonly2 타입을 구현하면된다. K는 T의 프로퍼티 중에서 readonly로 만들 프로퍼티들의 집합이다. cases에 나오는 것처럼..

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 타입 혹은 ..

2장 타입스크립트의 타입 시스템 아이템 15 | 동적 데이터에 인덱스 시그니처 사용하기 3줄 요약 1. 가능하다면 인덱스 시그니처 사용을 피하자. 2. keys를 알고 있다면 Record 타입 혹은 매핑된 타입 사용을 고려해보자. 3. 외부에서 받아오는 것과 같이 keys가 변동될 수 있다면 인덱스 시그니처 사용을 고려해보자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 이번 아이템의 제목은 동적 데이터에 인덱스 시그니처 사용하기이지만 주제는 동적 데이터가 아니라면 되도록 인덱스 시그니처 사용하지 말자에 가깝습니다. 다들 알고 계시지만 인덱스 시그니처는 아래와 같이 생겼습니다. // 인덱스 시그니처 타입 type IndexSignatureType = { [property: st..

2장 타입스크립트의 타입 시스템 아이템 14 | 타입 연산과 제너릭 사용으로 반복 줄이기 3줄 요약 1. 타입의 불필요한 중복을 없애고 재활용하는 것이 중요하다. (DRY 원칙) 2. 타입연산자들 확인하고 많이 써보는 연습을 하자. 3. 타입스크립트 공식 홈페이지에 나오는 유틸리티 타입들을 직접 만들어보는 연습을 하자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 이번 아이템에서의 주제는 타입의 재활용입니다. 타입스크립트에서 코드 재활용만큼 중요한 것이 타입 재활용입니다. 가장 간단한 방법은 타입 선언을 통해 중복을 제거하는 방법입니다. 또 간단한 방법은 기존의 타입에서 타입 연산자를 활용하여 타입을 확장시키는 것입니다. 불필요한 타입의 중복을 제거하기 위해서 타입을 확장하였습..

2장 타입스크립트의 타입 시스템 아이템 13 | 타입과 인터페이스의 차이점 알기 3줄 요약 1. 대부분의 경우에는 타입과 인터페이스는 차이점이 없다. 2. 복잡한 타입을 다룰 때는 type을 사용하는 것이 좋다. 3. 인터페이스의 선언 병합을 통해 속성을 확장시킬 수 있다. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 타입스크립트에서 타입을 정의하는 방법은 두 가지가 있습니다. 첫 번째는 type을 이용하는 것이고, 두 번째는 interface를 이용하는 것입니다. 타입스크립트를 처음 공부해서 사용할 때 언제 타입을 사용해야 하는지 언제 인터페이스를 써야 하는지 몰라서 고민에 빠질 때가 있습니다. 대다수의 경우에는 타입을 사용해도 되고, 인터페이스를 사용해도 됩니다. 이번 아이..

2장 타입스크립트의 타입 시스템 아이템 12 | 함수 표현식에 타입 적용하기 3줄 요약 1. 타입스크립트에서는 타입 재활용이라는 관점에서 함수 선언문보다 함수 표현식이 장점을 가진다. 2. 함수 선언문과 함수 표현식의 차이점을 이해하라. (함수 호이스팅 등) 3. ... 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다. 자바스크립트에서 함수를 만들 때에는 크게 두 가지 방식이 있습니다. 함수 선언문과 함수 표현식입니다. 타입스크립트에서는 함수 표현식을 사용하는 것을 권장합니다. 함수 표현식을 사용하면 함수의 매개변수와 반환값를 한번에 함수 타입으로 선언할 수 있기 때문입니다. 반면에, 함수 선언문을 사용하면 함수의 매개변수와 반환값의 타입을 따로 선언해야합니다. 반면에 함수 표현식을..