0Pricing
TypeScript Academy · 강의

타입 생성자 정의

인터페이스 조회로 타입 생성자를 인코딩합니다.

타입 생성자 정의은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

타입 생성자 이름 지정

인코딩은 각 타입 생성자에 URI라는 고유한 문자열 식별자를 부여하는 것에서 시작합니다. URI는 생성자 자체를 전달할 수 없는 곳에서 생성자를 대신하는 태그입니다.

type ArrayURI = "Array";
type OptionURI = "Option";
// Each container gets a unique string tag

레지스트리 인터페이스

주어진 인수 A에 대해 각 URI를 해당 생성자가 만들어 내는 구체적인 타입에 매핑하는 하나의 인터페이스를 유지합니다. 이 인터페이스가 바로 레지스트리입니다. 각 키는 URI이고 각 값은 해석된 타입입니다.

interface URItoKind<A> {
  Array: Array<A>;
  Option: A | null;
}
// URItoKind<number>["Array"] is number[]

생성자 조회

레지스트리는 URI를 키로 사용하므로 생성자를 적용하는 일은 인덱스 접근이 됩니다. "배열에 숫자를 적용한 결과"를 얻으려면 레지스트리를 인덱싱하면 됩니다.

type ArrayOfNumber = URItoKind<number>["Array"]; // number[]
type OptionOfString = URItoKind<string>["Option"]; // string | null

URIS 유니온

유효한 생성자 태그의 집합은 레지스트리의 키일 뿐입니다. keyof URItoKind<unknown>은 등록된 모든 URI의 유니온을 제공하며, 이를 URIS라고 부릅니다.

type URIS = keyof URItoKind<unknown>; // "Array" | "Option"

선언 병합으로 레지스트리 확장하기

TypeScript의 강력한 기능 중 하나는 이름이 같은 인터페이스가 병합된다는 것입니다. 라이브러리는 이를 활용해 원래 정의를 수정하지 않고도 각 모듈이 자신의 컨테이너를 URItoKind에 추가하도록 합니다.

interface URItoKind<A> {
  Tree: { value: A; children: Array<A> };
}
// Now URIS also includes "Tree"

모듈식 컨테이너

병합 덕분에 한 파일에서 정의한 컨테이너가 전역에 자신을 등록합니다. 이를 가져온 누구나 제네릭 추상화에서 해당 URI를 사용할 수 있습니다. fp-ts가 옵션, 두 선택지, 작업 등을 추가하는 방식이 바로 이렇습니다.

// file a.ts
interface URItoKind<A> { Either: { left: A } | { right: A } }
// file b.ts can now reference the "Either" URI

팬텀 전달자

값 수준의 타입으로 "어떤 생성자인지"를 전달하려면 인스턴스가 속성에 URI를 담으며, 흔히 팬텀 필드를 사용합니다. 이 필드는 실제 값을 담지 않고 타입 시스템을 위해 태그만 기록합니다.

interface HasURI<F extends URIS> {
  readonly _URI: F;
}
// _URI records which constructor an instance is for

URI와 인수 결합하기

생성자를 적용하려면 URI F와 인수 타입 A라는 두 가지가 필요합니다. 조회를 사용해 이 둘을 결합하면 레지스트리를 통해 (F, A)가 구체적인 타입으로 해석됩니다.

type Apply<F extends URIS, A> = URItoKind<A>[F];

type A = Apply<"Array", number>;  // number[]
type B = Apply<"Option", string>; // string | null

생성자가 아닌 문자열을 사용하는 이유

문자열을 사용하는 이유는 TypeScript가 문자열을 리터럴 타입으로 저장하고 비교할 수 있으며, 이를 사용해 레지스트리를 인덱싱할 수도 있기 때문입니다. 생성자 Array 자체는 타입 매개변수로 저장할 수 없지만, 리터럴 "Array"는 저장한 뒤 조회할 수 있습니다.

type Tag = "Array";
type Resolved = URItoKind<boolean>[Tag]; // boolean[]

조회가 핵심인 이유

이 인덱스 접근인 URItoKind<A>[F]가 인코딩의 핵심입니다. 불가능한 타입 적용 F<A>를 합법적인 레지스트리 조회로 바꿉니다. 다음 수업에서는 이를 Kind<F, A>로 정식화합니다.

type Kind<F extends URIS, A> = URItoKind<A>[F];

type X = Kind<"Array", number>; // number[]

설정 복습

이제 구성 요소를 모두 갖추었습니다. URI를 태그로 사용하고, 태그와 인수를 구체적인 타입에 매핑하는 URItoKind 레지스트리를 두며, 태그의 유니온으로 URIS를 만들고, 선언 병합으로 이를 확장합니다. 레지스트리를 인덱싱하면 타입 적용을 시뮬레이션할 수 있습니다.

// URItoKind = registry, URIS = valid tags,
// URItoKind<A>[F] = "apply constructor F to A"

빠른 확인

레지스트리 인코딩에 대한 이해도를 확인해 보십시오.

복습

문자열을 사용해 타입 생성자를 인코딩하는 방법을 배웠습니다.

  • 각 생성자에는 고유한 URI 태그가 부여됩니다.
  • URItoKind<A>는 태그를 구체적인 타입에 매핑합니다.
  • URIS는 keyof를 통해 모든 태그의 유니온이 됩니다.
  • 선언 병합을 사용하면 모듈이 새 컨테이너를 등록할 수 있습니다.

다음: 조회를 가벼운 Kind 패턴으로 묶기

자주 묻는 질문

“타입 생성자 정의” 강의는 무료인가요?

네 — “타입 생성자 정의” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“타입 생성자 정의”에서 뭘 배우나요?

인터페이스 조회로 타입 생성자를 인코딩합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“타입 생성자 정의” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. TypeScript의 HKT 문제
  2. 타입 생성자 정의
  3. 경량 HKT 패턴
  4. 제네릭 펑터와 매퍼
← TypeScript Academy(으)로 돌아가기