[TS] Type-Challenges 스터디 6주차

[Medium] 459. Flatten

View on GitHub: https://tsch.js.org/459

문제

주어진 배열을 플랫한 배열 타입으로 바꾸는 Flatten 타입을 구현하세요.

문제 설명

• 배열 타입을 플랫하게 만들어 반환하는 문제
• 배열 안의 배열까지 처리해야 됨
• 배열이 아닌 경우 에러 처리

정답

type Flatten<T extends any[]> = T extends [infer First, ...infer Rest]
  ? First extends any[]
    ? [...Flatten<First>, ...Flatten<Rest>]
    : [First, ...Flatten<Rest>]
  : [];

설명

• 제네릭 T에 extends any[]를 활용해, 배열이 아닌 경우 에러 처리
• [infer First, ...infer Rest]로 배열의 각 요소 확인
• First가 배열인 경우, [...Flatten<First>, ...Flatten<Rest>]로 재귀 호출
• First가 배열이 아닌 경우, [First, ...Flatten<Rest>]로 재귀 호출

오답노트

1차 시도

type Flatten<T> = T extends [infer First, ...infer Rest]
  ? First extends any[]
    ? [...Flatten<First>, ...Flatten<Rest>]
    : [First, ...Flatten<Rest>]
  : [];

• 에러 처리를 빼먹음
• 제네릭 T에 extends any[]를 활용해, 배열이 아닌 경우 에러 처리

[Medium] 527. AppendToObject

View on GitHub: https://tsch.js.org/527

문제

주어진 인터페이스에 새로운 필드를 추가한 object 타입을 구현하세요. 이 타입은 세 개의 인자를 받습니다.

문제 설명

• 인터페이스에 새로운 필드를 추가하는 문제
• 새로운 필드가 추가된 인터페이스는 온전한 타입이어야 함(유니온 타입 등 X)

정답

type AppendToObject<
  T extends object,
  U extends string,
  V,
  MergedObject = T & Record<U, V>,
> = { [P in keyof MergedObject]: MergedObject[P] };

설명

• MergedObject는 T와 Record<U, V>를 유니온 타입으로 합친 타입
• [P in keyof MergedObject]는 MergedObject의 모든 키를 순회, MergedObject[P]는 MergedObject의 각 키에 해당하는 값을 반환
• 이렇게 만들어진 타입 객체를 다시 인터페이스로 반환

오답노트

1차 시도

type AppendToObject<T extends object, U, V> = { [P in keyof T]: T[P] } & {
  U: V;
};
type ex1 = AppendToObject<test1, "home", boolean>;
// { key: "cat"; value: "green"; } & { U: boolean; }

• U가 주어진 타입이 아닌, string U가 key 값이 됨
• 또한 이 경우 단순히 유니온 타입을 반환
• 유니온 타입이 아닌 타입을 반환해야 함

2차 시도

type AppendToObject<T extends object, U extends string, V> = {
  [P in keyof T]: T[P];
} & Record<U, V>;
type ex1 = AppendToObject<test1, "home", boolean>;
// { key: "cat"; value: "green"; } & Record<"home", boolean>

• Record를 활용해 U를 key로 하는 객체를 생성
• 여전히 유니온 타입을 반환

[Medium] 529. Absolute

View on GitHub: https://tsch.js.org/529

문제

number, string, 혹은 bigint을 받는 Absolute 타입을 만드세요.
출력은 양수 문자열이어야 합니다.

문제 설명

• 절대값을 구해 string으로 반환하는 문제
• 음수인 경우 양수로 변환
• 양수인 경우 그대로 반환

정답

type StringFormat<T extends number | string | bigint> = `${T}`;

type Absolute<T extends number | string | bigint> =
  StringFormat<T> extends `${infer First}${infer Rest}`
    ? First extends "-"
      ? Rest
      : `${First}${Rest}`
    : never;

설명

• StringFormat<T>는 T를 문자열로 변환하는 타입
• StringFormat<T>으로 변환된 문자열을 파싱하여, 첫 번째 문자가 -인 경우 뒤에 있는 문자열을 반환
• 첫 번째 문자가 -가 아닌 경우, 그대로 반환

추가 질문

Typescript에서 bigint는 어떻게 표현하는가?

let foo: bigint = BigInt(100); // the BigInt function
let bar: bigint = 100n; // a BigInt literal

• BigInt 함수를 통해 생성된 bigint는 number의 서브타입이 아님
• 마찬가지로 number는 bigint의 서브타입이 아님

type IsBigInt<T> = T extends bigint ? true : false;

type Test1 = IsBigInt<bigint>; // true
type Test2 = IsBigInt<number>; // false

type IsNumber<T> = T extends number ? true : false;

type Test3 = IsNumber<number>; // true
type Test4 = IsNumber<bigint>; // false

• 여기서 사용된 _는 숫자 구분자임(단순히 가독성을 높이기 위함이며, bigint와 상관 없음)

Reference

• TypeScript 공식문서 - 3.2 릴리즈 노트(BigInt)

[Medium] 531. String to Union

View on GitHub: https://tsch.js.org/531

문제

문자열 인수를 입력받는 String to Union 유형을 구현하세요.
출력은 입력 문자열의 Union type이어야 합니다.

문제 설명

• 문자열 인수를 입력 받을 경우, 각 문자를 유니온 타입으로 반환하는 문제
• 문자열이 비어있는 경우 never를 반환

정답

type StringToTuple<S extends String> = S extends `${infer First}${infer Last}`
  ? [First, ...StringToTuple<Last>]
  : [];

type StringToUnion<T extends string> = StringToTuple<T>[number];

설명

• StringToTuple<S extends String>은 문자열을 튜플로 변환하는 타입(298-length-of-string 참고)
• 튜플로 변환된 타입은 [number]를 통해 유니온 타입으로 변환(10-tuple-to-union 참고)

[Medium] 599. Merge

View on GitHub: https://tsch.js.org/599

문제

두 개의 객체를 병합하는 제네릭 Merge<F, S>를 구현하세요.

문제 설명

• 두 개의 객체를 병합하는 문제
• 두 번째 객체의 키가 첫 번째 객체의 키를 덮어씀
• 단순한 인터섹션 타입이 아닌, 두 객체의 키를 모두 포함하는 타입을 반환

정답

type Merge<F, S> = {
  [P in keyof F | keyof S]: P extends keyof S
    ? S[P]
    : P extends keyof F
      ? F[P]
      : never;
};

설명

• [P in keyof F | keyof S]를 활용해 두 객체의 키를 모두 순회
• 만약 P가 keyof S에 속한다면, S[P]를 먼저 반환(덮어쓰기)
• 만약 P가 keyof S에 속하지 않고, keyof F에 속한다면, F[P]를 반환

오답노트

1차 시도

type Merge<F, S, MergedObject = F & S> = {
  [P in keyof MergedObject]: MergedObject[P];
};
type example = Merge<Foo, Bar>;
// { a: number; b: never; c: boolean; }

• MergedObject라는 F와 S의 유니온 타입을 선언해주고, 이를 순환하는 방식
• 이 경우 중복되는 키의 경우, value가 never로 처리됨

추가 질문

왜 중복되는 키의 경우, value가 never로 처리되는지?

• 인터섹션 타입의 경우, 동일한 키가 충돌할 경우에는 별도의 규칙이 적용됨
• 예를 들어, { a: number } & { a: string }의 경우, { a: number & string }로 처리됨
• 이 경우, a의 타입은 number & string이 되며, 이는 유효하지 않은 타입이므로 never로 처리됨

[Medium] 612. KebabCase

View on GitHub: https://tsch.js.org/612

문제

• camelCase나 PascalCase를 kebab-case 문자열로 수정하세요.
• FooBarBaz -> foo-bar-baz

문제 설명

• 문자열을 kebab-case로 변환하는 문제
• 문자열 내에 대문자가 있는 경우, 대문자를 소문자로 변환하고 대문자 앞에 -를 붙임
• 만약 맨 앞 글자가 대문자라면, 소문자로 변환하고 앞에 -를 붙이지 않음
• 알파벳이 아닌 경우, 그대로 반환

정답

type IsAlphabet<T extends string> =
  Lowercase<T> extends Uppercase<T> ? false : true;

type IsUpperCase<T extends string> =
  IsAlphabet<T> extends true ? (Uppercase<T> extends T ? true : false) : false;

type MakeKebabCase<S extends string> = S extends `${infer First}${infer Rest}`
  ? IsUpperCase<First> extends true
    ? `-${Lowercase<First>}${MakeKebabCase<Rest>}`
    : `${First}${MakeKebabCase<Rest>}`
  : "";

type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
  ? IsUpperCase<First> extends true
    ? `${Lowercase<First>}${MakeKebabCase<Rest>}`
    : `${First}${MakeKebabCase<Rest>}`
  : "";

설명

• IsAlphabet 타입은 문자열이 알파벳인지 확인하는 타입(만약 T가 알파벳이라면 Lowercase<T>가 Uppercase<T>의 서브타입이 될 수 없음)
• IsUpperCase 타입은 문자열이 알파벳일 경우, 대문자인지 확인하는 타입
• MakeKebabCase 타입은 First가 대문자일 경우, Lowercase<First>를 통해 소문자로 변환한 뒤 -를 붙이고 Rest를 재귀적으로 호출
• KebabCase 타입은 최초의 First가 대문자일 경우, Lowercase<First>를 통해 소문자로 변환한 뒤 -를 붙이지 않고, Rest를 MakeKebabCase 타입으로 호출

오답노트

1차 시도

type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;

type MakeKebabCase<S extends string> = S extends `${infer First}${infer Rest}`
  ? IsUpperCase<First> extends true
    ? `-${Lowercase<First>}${MakeKebabCase<Rest>}`
    : `${First}${MakeKebabCase<Rest>}`
  : "";

type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
  ? IsUpperCase<First> extends true
    ? `${Lowercase<First>}${MakeKebabCase<Rest>}`
    : `${First}${MakeKebabCase<Rest>}`
  : "";

type ex1 = KebabCase<"foo-bar">;
// "foo--bar"
type ex2 = KebabCase<"foo_bar">;
// "foo-_bar"
type ex3 = KebabCase<"Foo-Bar">;
// "foo---bar"

• 알파벳이 아닌 다른 문자열들의 경우, IsUpperCase가 무조건 true를 반환하여 -를 붙임