'🔥 타입스크립트' 카테고리의 글 목록

아이템 51 - 의존성 분리를 위해 미러 타입 사용하기

2023.05.02

이장에서의 핵심은 라이브러리를 작성중일 때, 의존이 필요한 라이브러리가 구현과 상관없이 타입만 필요하다면 모든 라이브러리를 불러오지 않고 구조적 타이핑을 활용하여 필요한 메서드와 속성만 별도로 작성하자라고 느껴졌다. Buffer 예시 Buffer 타입을 예시로 살펴보자. Buffer는 노드 개발자를 위한 것이다. Buffer 타입을 불러오기 위해 @types/node(NodeJS 타입 선언) 모듈을 설치해야 한다. 이를 설치하게 된다면 다음과 같은 개발자에게 문제가 생긴다. 1. 자바스크립트 개발자: NodeJS, @types와 무관하다. 2. 타입스크립트 개발자: NodeJS와 무관하다. 즉, 각자가 사용하지 않는 모듈이 포함되어 있기 때문에 혼란스러울 것이다. Buffer는 NodeJS 개발자에게만 ..

🔥 타입스크립트/Effective Typescript

아이템 50 - 오버로딩 타입보다는 조건부 타입을 사용하기

2023.05.02

오버로딩 타입이란? 오버로딩 타입은 아이템 3에서 다루었던 개념이다. 다시 정리하자면 다음과 같다. 우선 함수 오버로딩이란 동일한 이름에 매개변수만 다른 여러 버전의 함수를 허용하는 것이다. 하지만 타입스크립트에서는 불가능하다. 타입스크립트에 비슷한 기능을 지원하지만 이는 타입 수준에서만 동작하므로 오버로딩 타입이라고 한다. 즉, 하나의 함수에 대해 여러 개의 선언문을 작성할 수 있지만, 구현체는 오직 하나뿐이다. function add(a: number, b: number): number; // add 함수에 대한 선언문 1 function add(a: string, b: string): string; // add 함수에 대한 선언문 2 // add 함수 구현체 function add(a, b) { r..

🔥 타입스크립트/Effective Typescript

아이템 37 - 공식 명칭에는 상표 붙이기

2023.04.18

1. 구조적 타이핑의 관점에서 살펴보기 다음과 같은 코드가 있습니다. type Vector2D = { x: number; y: number; }; type Vector3D = { x: number; y: number; z: number; }; const calculateNorm = (p: Vector2D) => { return Math.sqrt(p.x * p.x + p.y * p.y); }; Vector2D와 Vector3D 타입이 있습니다. calculateNorm 함수도 있는데요. 이 함수는 Vector2D 타입의 매개변수를 받습니다. 때문에 Vector3D 타입의 매개변수를 허용하지 않아야 합니다. 하지만 구조적 타이핑 관점에서 본다면 다음의 코드는 문제가 없습니다. 이를 해결하기 위해선 어떻게 해..

🔥 타입스크립트/Effective Typescript

아이템 28 - 유효한 상태만 표현하는 타입을 지향하기

2023.04.11

1. 유효한 상태 효과적으로 타입을 설계하기 위해서, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요하다. 여기서 말하는 유효한 상태란 무엇일까? 유효의 사전적 의미를 살펴보면 다음과 같다. 효력이나 효과가 있음. 즉, 효력이나 효과가 있는 상태가 유효한 상태라고 할 수 있다. 프로그래밍 관점에서 살펴보면 어딘가에 사용될 수 있는 상태이다. 다음과 같은 상태가 있다. interface State { a: string; b: string; c?: string; d?: string; } 이와 같은 상태는 다음과 같이 여러 가지 상태를 포함한다. interface StateOne { a: string; b: string; } interface StateTwo { a: string; b: st..

🔥 타입스크립트/Effective Typescript

아이템 27 - 함수형 기법과 라이브러리로 타입 흐름 유지하기

2023.04.11

1. 타입 흐름 유지하기 타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다. 타입 흐름을 개선한다. 가독성을 높인다. 명시적인 타입 구문의 필요성을 줄인다. 몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자. 2. CSV 데이터 파싱하기 다음과 같은 CSV 데이터가 있다. 이를 파싱해보자. const csvData = `연도,제조사,모델,설명,가격 1997,..

🔥 타입스크립트/Effective Typescript

아이템 16 - number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기

2023.04.10

1. 자바스크립트에서의 배열 1-1. 배열은 Object이다. const array = [1, 2, 3]; typeof array; // Object 자바스크립트에서 배열의 타입은 Object이다. 1-2. Object은 number 타입으로 접근이 불가능하다. 자바스크립트에서의 객체는 키-값 형태를 가지고 있으며 키는 보통 string(또는 심벌) 타입만 가능하다. 때문에 아래의 예시처럼 기존에 우리가 자주 배열의 값에 접근하기 위해 사용했던 방법은 불가능하다. const array = [1, 2, 3]; array[0]; array[1]; array[2]; 하지만 number 타입의 키로도 접근하는 것에 있어 오류가 나지 않는 이유는 자바스크립트 엔진에서 자동으로 string 타입으로 형변환이 되기 ..

🔥 타입스크립트/Effective Typescript

아이템 15 - 동적 데이터에 인덱스 시그니처 사용하기

2023.04.10

1. 인덱스 시그니처란? 공식문서에는 아래와 같이 인덱스 시그니처의 사용 시점에 대해 설명하고 있다. Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 타입의 속성을 모르지만 값의 형태를 알고 있을 때, 인덱스 시그니처를 사용하여 타입을 설명할 수 있다. 2. 인덱스 시그니처의 기본 문법 type Props = { [property: string]: string }; Props 타입이 있다...

🔥 타입스크립트/Effective Typescript

아이템 7 - 타입은 값들의 집합이다.

2023.04.10

1. 타입은 할당 가능한 값들의 집합 자바스크립트에서는 변수에 다양한 값을 할당할 수 있다. 이러한 값들을 타입스크립트가 런타임 이전에 여기에 할당할 수 있는가?라는 의문을 품고 오류를 체크하기 시작한다. 오류를 통해 타입스크립트에서의 집합이라는 개념에 다가가보자. 1-1. 타입 오류1 타입스크립트가 만약 오류를 발견하면 아래와 같은 오류를 발견할 수 있다. Type 'number' is not assignable to type 'string'. 숫자 타입은 문자열에 타입에 할당을 할 수 없다는 것이다. 이 문구는 집합의 관점에서 아래처럼 해석할 수 있다. 숫자 타입은 문자열 타입의 부분 집합이 아니다.(두 타입의 관계) 1-2. 타입 오류2 또 다른 오류를 보며 집합이라는 개념을 적립해 보자. AB의 ..

티스토리툴바