Type : type FilterStringProp<T> = { [K in keyof T as T[K] extendsstring ? K : never]: string }
type User = { name: string, age: number } > { name: string }
패턴 매칭 : 탬플릿 리터럴 타입
JS : const str = 'foo-bar'.replace(/foo-*/, '')
Type : type Str = 'foo-bar' ; type Bar = Str extends`foo-${infer rest}` ? rest : never// 'bar'
반복 대신 재귀
함수 선언 : 제네릭 선언
JS : functionfillArray(item, n, array = [])
Type : type FillArray<Item, N extendsnumber, Arrayextends Item[] = []>
base 조건(판단을 활용한 분기):
JS : array.length === n ? array : fillArray(item, n, [item, ...array]);
Type : Array['length'] extends N ? Array : FillArray<Item, N, [...Array, Item]>
함수 본문과 리턴문
JS : { return array.length === n ? array : fillArray(item, n, [item, ...array]) }
Type : = Array['length'] extends N ? Array : FillArray<Item, N, [...Array, Item]>;
타입은 그 자체로 강력한 기능을 가진 언어입니다.
TypeScript를 타입 주석(type annotation)이 있는 JavaScript로 생각했습니다.
그런 마음가짐으론 올바른 타입을 작성하는 것이 까다롭고 벅차다는 것을 알게 되었습니다.
TypeScript 언어는 실제로 두 개의 하위 언어로 구성되어 있다고 생각할 수 있습니다.
하나는 JavaScript이고 다른 하나는 Type 언어입니다.
JavaScript 언어의 경우 세계은 JavaScript 값으로 구성됩니다.
Type 언어의 경우 세계는 타입으로 구성됩니다.
TypeScript 코딩은 이 JS세계와 Type 세계 사이에서 끊임없이 춤추는 것입니다.
우리는 타입 세계에서 타입을 만들고 타입 주석을 사용하여 JavaScript 세계에서 타입을 "소환"합니다.
또는 컴파일러에서 암시적으로 추론하도록 합니다
반대로, JavaScript 변수/속성에서 TypeScript의 typeof 연산자를 사용하여 해당 타입을 검색할 수 있습니다.
(JavaScript가 런타임 값의 타입을 확인하기 위한 typeof 연산자가 아닙니다; typeof 는 타입 레벨, 값 레벨에서 둘 다 사용 가능합니다.)
TypeScript 코딩은 타입과 자바스크립트 세계 사이에서 끊임없이 춤추는 것입니다.
JavaScript 언어는 표현력이 뛰어나고 타입 언어도 마찬가지입니다. 사실, 타입 언어는 표현력이 매우 뛰어나 튜링 완전한 것으로 입증되었습니다. (주 : 튜링 완전하다는 말은 컴퓨터가 할수 있는 일을 전부 코딩 가능하다는 의미입니다.)
Turing 완전한 것이 좋은지 나쁜지에 대해 이야기 하는 것이 아니며,
그것이 설계에 의한 것인지 우연한 것인지도 알지 못합니다만(실제로 종종 Turing-completeness는 우연히 달성되었습니다),
타입 언어는 상당히 강력하며, 컴파일 시간에 임의의 계산을 수행할 수 있습니다.
(즉, 프로그램이 할 수 있는 모든 연산이 가능합니다.)
이처럼 TypeScript의 타입 언어를 본격적인 프로그래밍 언어로 생각하기 시작했을 때,
타입 언어가 함수형 프로그래밍 언어의 몇 가지 특성을 갖고 있다는 것을 알게 되었습니다.
반복 대신 재귀 사용
TypeScript 4.5에는 꼬리 호출에 최적화된 재귀가 있습니다
타입(데이터)은 변경할 수 없습니다.(immutable)
이를 이용해, JavaScript의 함수형 프로그래밈 기술을 활용하여 TypeScript의 타입 언어를 배워봅니다.
전역 변수 선언
JavaScript에서 세상은 JavaScript 값으로 이루어지며 var, const 및 let 키워드를 사용하여 값을 참조하는 변수를 선언합니다.
const obj = {name: 'foo'}
타입 언어에서 세상은 타입으로 이루어져 있고, 우리는 type과 interface를 키워드로 하여 타입 변수(type variables)를 선언합니다.
type Obj = {name: string}
타입 변수(type variables)의 보다 정확한 이름은 타입 동의어(type synonyms) 또는 타입 별칭(type alias)입니다. 이 게시물은 설명을 위해 JavaScript 변수가 값을 참조하는 방식과 유사하게 "타입 변수"라는 단어를 사용합니다. 완벽한 비유는 아니지만 타입 별칭은 새 타입을 만들거나 도입하지 않으며 기존 타입의 또 하나의 새 이름일 뿐입니다. 더 쉬운 이해를 위한 비유입니다.
타입과 값은 매우 관련이 있습니다.
타입은 가능한 값 집합(1,2,3...)과 값에 대해 수행할 수 있는 유효한 작업(+)을 나타냅니다.
때로는 집합이 유한합니다(예: type Name = 'foo' | 'bar')
집합이 무한인 경우도 많습니다(예: type Age = number).
TypeScript를 통해 타입과 값을 통합하고 런타임 값의 타입이 컴파일 타임 타입과 일치하도록 합니다.
로컬 변수 선언
위 문단에서 타입 언어에서 타입 변수를 생성하는 방법에 대해 이야기했습니다.
타입 변수는 기본적으로 전역 범위를 갖습니다.
타입 언어에서는 로컬 타입 변수를 생성하기 위해 infer 키워드를 사용할 수 있습니다.
type A = 'foo'; // global scope
type B = A extends infer C ? (
C extends 'foo' ? true : false// *only* inside this expression, C represents A
) : never
scoped 변수를 생성하는 이 특별한 방법은 JavaScript 개발자에게 이상하게 보일 수 있지만,
사실 순수 함수형 프로그래밍 언어에 뿌리가 있는 방식입니다.
예를 들어, Haskell에서는 let {assignments} in {expression}에서와 같이
범위 지정 할당을 수행하기 위해 in과 함께 let 키워드를 사용할 수 있습니다.
let two = 2; three = 3 in two * three
// ↑ ↑
// two 와 three 는 표현식 `two * three` 에서만 사용 가능합니다.
infer 키워드는 일부 중간 타입을 캐싱하는 데 유용합니다.
type ConvertFooToBar<G> = G extends 'foo' ? 'bar' : never
type ConvertBarToBaz<G> = G extends 'bar' ? 'baz' : never
// 타입 언어에서는 "동등성 검사"에 extends 키워드를 사용
type ConvertFooToBaz<T> = ConvertFooToBar<T> extends infer Bar ?
Bar extends 'bar' ? ConvertBarToBaz<Bar> : never
: never
// 주 : ConvertFooToBar<T> <: Bar <: 'bar'
type Baz = ConvertFooToBaz<'foo'>
// G extends 'foo' => ConvertFooToBar<T>는 'bar' => Bar는 'bar' 따라서 'bar'를 'baz'로 변환
infer가 없으면 Bar를 두 번 계산해야 합니다.
type ConvertFooToBar<G> = G extends 'foo' ? 'bar' : never
type ConvertBarToBaz<G> = G extends 'bar' ? 'baz' : never
type ConvertFooToBaz<T> = ConvertFooToBar<T> extends 'bar' ?
ConvertBarToBaz<ConvertFooToBar<T> > : never // call `ConvertFooToBar` twice
type Baz = ConvertFooToBaz<'foo'>
조건 분기와 동등성 검사
자바스크립트에서 if 문이나 조건부(삼항) ? 연산자와 함께 ===/==를 사용할 수 있습니다. 동등 검사 와 조건부 분기를 수행합니다.
type Username = 'foo'
type Matched = Username extends 'foo' ? true : false // true
extends 키워드는 다양한 역할을 합니다. 제네릭 타입 파라미터에 제약 조건을 적용할 수도 있습니다.
function getUserName<T extends {name: string}>(user: T) {
return user.name
}
제네릭 조건을 추가하여 <T extends {name: string}> 함수가 취하는 인자 객체가 항상 string 타입의 name 속성으로 설정되도록 합니다.
주 : 타입스크립트에서 인터페이스는 모양 검사만 합니다.
객체에서 인덱싱하여 속성 타입 검색
JavaScript에서는 대괄호를 사용하여 객체 속성에 액세스할 수 있습니다.
obj['prop'] 또는 점 연산자(예: obj.prop).
타입 언어에서도 대괄호를 사용하여 속성 타입을 추출할 수 있습니다.
type User = {name: string, age: number}
type Name = User['name']
객체 뿐만 아니라, 튜플 및 배열을 사용하여 타입을 인덱싱할 수도 있습니다.
type Names = string[]
type Name = Names[number]
type Tuple = [string, number]
type Age = Tuple[1]
함수
함수는 모든 JS 프로그램의 재사용 가능한 주요 "컴포넌트"입니다.
일부 입력(일부 자바스크립트 값)을 받고 출력(일부 자바스크립트 값)을 반환합니다.
타입 언어에는 제네릭이 있습니다.
제네릭은 함수가 값을 매개변수화하는 것처럼 타입을 매개변수화합니다.
따라서 제네릭은 개념적으로 JavaScript의 함수와 유사합니다.
JavaScript 예제
function fn(a, b = 'world') { return [a, b] }
const result = fn('hello') // ["hello", "world"]
타입 언어
type Fn <A extends string, B extends string = 'world'> = [A, B]
// ↑ ↑ ↑ ↑ ↑
// name parameter parameter type default value function body/return statement
type Result = Fn<'hello'> // ["hello", "world"]
사실 제네릭은 JavaScript의 함수와 결코 동일하지 않습니다. 우선 JavaScript의 함수와 달리 Generics는 타입 언어의 일급 시민이 아닙니다. 즉 함수를 인자로 넘길수 있는 JS와 달리, 제네릭을 타입 파라미터 위치에 전달할 수 없습니다.
즉, TypeScript는 타입 매개변수로 제네릭을 허용하지 않습니다. 따라서 다른 함수에 함수를 전달하는 것처럼 제네릭을 다른 제네릭에 전달할 수 없습니다.
맵과 필터 메서드
타입 언어에서 타입은 변경할 수 없습니다. (immutable)
타입의 일부를 수정하려면 기존 타입을 새 타입으로 변환해야 합니다.
타입 언어에서 데이터 구조(즉, 개체 타입)를 반복하고 변환을 균일하게 적용하는 세부 사항은 Mapped Types에 의해 추상화됩니다.
이를 사용하여 JavaScript의 맵 및 필터 배열 메서드와 개념적으로 유사한 작업을 구현할 수 있습니다.
타입 언어에서 매핑은 이 구문 [K in keyof T]를 사용하여 수행됩니다. 여기서 keyof 연산자는 속성 명 각각을 string literal로 union한 string union type을 제공합니다.
type User = {
name: string,
age: number
}
type StringifyProp<T> = {
[K in keyof T]: string
}
type UserWithStringProps = StringifyProp<User> // { name: string; age: string; }
JavaScript에서는 몇 가지 기준에 따라 객체의 속성을 걸러낼 수 있습니다. 예를 들어 문자열이 아닌 모든 속성을 필터링할 수 있습니다.
type User = {
name: string,
age: number
}
type FilterStringProp<T> = {
[K in keyof T as T[K] extends string ? K : never]: string
}
type FilteredUser = FilterStringProp<User> // { name: string }
TypeScript에는 타입을 변환하기 위한 여러 내장 utility “functions”(제네릭)가 있으므로 바퀴를 재발명할 필요가 없는 경우가 많습니다.
패턴 매칭
또한 infer 키워드를 사용하여 타입 언어에서 패턴 매칭을 수행할 수 있습니다. 예를 들어 Javascript 프로그램에서 정규식을 사용하여 문자열의 일부를 추출할 수 있습니다.
