개요

타입챌린지란?

후기

챌린지 후 타입스크립트 정리

타입스크립트의 목적

언어 외적 특징

역할

1. 타입추론: 내가 모든 값이나 객체에 타입 선언을 하지 않아도, 이 타입이 무엇일지 자동으로 추론해줍니다.

2. 타입정의: 내가 원하는 타입을 선언할 수 있도록 기능적으로 지원합니다.

3. 타입구성: 정의한 타입끼리 연산해 새로운 타입을 만들어낼 수 있습니다.

4. 구조적 타입 시스템: 타입추론의 방식입니다. 타입 검사를 할 때, 값의 형태를 기준으로 검사합니다. 즉, 값의 형태만 같다면 같은 타입이라고 취급합니다.

interface Point {
  x: number;
  y: number;
}
function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
// "12, 26"를 출력합니다
const point = { x: 12, y: 26 };
printPoint(point);

type A = { a: string };
type B = { b: string };

type C = A & B;

const object = { a: 'a'; b: 'b'; c: 'c'; };

function printC(o: C) {
	console.log(`${o.a} ${o.b}`);
};
printC(object);

이해

타입스크립트에서 지원하는 다양한 기능들

타입정의

이미 정의해둔 타입들

1. 원시타입: string number boolean bigint null undefined symbol (여기서 bigint 는 21억이 넘는 큰 정수를 다룰 때 사용하는 BigInt 객체와 호환됩니다.)

2. 배열 형태: string[] number[] T[] 와 같이 배열 형태로 갈 수 있습니다.

3. any: 타입 검사를 하지 않고 싶을 때 사용하는 타입입니다.

4. never: 어떤 타입도 never 를 상위 타입으로 가질 수 없습니다. 집합으로 치면 공집합이라고 생각할 수 있습니다.

5. unknown: 개인적으로 가장 헷갈리는 타입이었습니다. unkown 은 모든 타입의 상위 타입입니다. 집합으로 치면 전체집합이라고 생각할 수 있습니다. 하지만, unkown 이 전체집합이라고 해서 모든 객체가 다 포함 될 수 있다고 생각하면 안 됩니다. 오히려 반대로 전체집합이기 때문에, 특정 조건이 있다고 할 수 없습니다. 왜냐하면 무언가 특정 조건이 있다고 단정해버리면, 그렇지 않은 객체는 포함할 수 없게 되기 때문입니다. 그래서 입력으로 모든 타입의 객체를 받는 것을 의도한다면 unknown 을 사용합니다. 그리고 추후에 직접 타입을 구체화 하게 됩니다.

any 타입 사용과 유사한 에러 허용 주석

// @ts-expect-error: third-party lib type mismatch
const something: number = "hello"; // 타입 오류를 일부러 허용

인터페이스

객체지향언어의 인터페이스 vs 타입스크립트의 인터페이스

interface A {
  a: string;
}

interface B {
  b: string;
}

type AandB = A & B;

type IterateProps<T> = {[K in keyof T]: T[K]}

/**
	type Test = {
	    a: string;
	    b: string;
	}
*/
type Test = IterateProps<AandB>

타입스크립트 타입 vs 타입스크립트 인터페이스

interface A {
  a: string;
}

interface B {
  b: string;
}

/**
	재정의 가능!! 마치 아래와 같은 인터페이스 처럼 취급하게 됩니다.
	interface A {
		a: string;
		b: number;
	}
*/
interface A {
	b: number;
}

type AandB = A & B;

type IterateProps<T> = {[K in keyof T]: T[K]}

/**
	type Test = {
	    a: string;
	    b: never;
	}
*/
type Test = IterateProps<AandB>

// Here's two examples of 
// using types and interfaces
// to describe an object 

interface AnObject1 {
    value: string
}

type AnObject2 = {
    value: string
}

// Using type we can create custom names
// for existing primitives:
type SanitizedString = string
type EvenNumber = number

// This isn't feasible with interfaces
interface X extends string {}

Documentation - Everyday Types

언어의 원시 타입들.

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD%EA%B3%BC-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

타입 연산

합집합

// 합집합의 예시
type Slug = string | number;

// slug 로 들어오는 객체는 string 타입이나 number 타입 둘 다 허용하게 됩니다.
function ToString(slug: Slug) {
	if(typeof slug === 'string') {
		return slug;
	} else if(typeof slug === 'number') {
		return `${slug}`;
	}
	throw Error('잘못된 타입의 인풋이 들어왔습니다.);
};

교집합

type Slug = string | number;

// 교집합의 예시
type FilteredSlug = Slug & string;

// slug 는 원래 string 이나 number 타입 둘 다 가능했지만, 이젠 string 만 가능합니다.
function splitSlug(slug: FilteredSlug) {
	// 그래서 .split 메서드를 안전하게 사용할 수 있습니다.
	return slug.split('/');
}

// 이 함수는 .split 메서드를 호출하려고 하면 타입스크립트에 의해 에러 표시가 나게 됩니다.
function nonCertifiedSplitSlug(slug: Slug) {
	return slug.split('/');
}

interface A {
  a: string;
}

interface B {
  b: string;
}

type AandB = A & B;

type IterateProps<T> = {[K in keyof T]: T[K]}

/**
	말도안되는 착각이지만, 집합의 원소가 늘었다고 생각했음...
	집합의 원소가 늘어난 것이 아니라 집합의 조건이 늘어난 것 이므로,
	집합에 해당 될 수 있는 원소들은 줄어들게 됨...
	type Test = {
	    a: string;
	    b: string;
	}
*/
type Test = IterateProps<AandB>

인덱싱된 접근 타입

type Person = { age: number; name: string; alive: boolean };
type Age = Person["age"]; // number

조건부 타입 연산

type Stringify<T> = T extends number ? `${T}` : T;

조건부 타입 연산의 infer 키워드

type FlattenOnce<Type> = Type extends Array<infer Item> ? Item : Type;

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

분산적 조건부 타입 연산

type ToArray<Type> = Type extends any ? Type[] : never;
 
type StrArrOrNumArr = ToArray<string | number>;
// string[] | number[] 으로 됩니다. (string | number)[] 가 아니라요.

type ToArrayNonDist<Type> = [Type] extends [any] ? Type[] : never;
 
// 'StrArrOrNumArr' is no longer a union.
type StrArrOrNumArr = ToArrayNonDist<string | number>;

Documentation - Conditional Types

타입 시스템에서 if문 처럼 동작하는 타입 생성하기.

https://www.typescriptlang.org/ko/docs/handbook/2/conditional-types.html

Mapped type

type IterateProps<T> = {[K in keyof T]: T[K]}

템플릿 리터럴 타입

type Concat<A extends string, B extends string> = `${A}, ${B}`;

type FindX<Str extends string> = Str extends `${string}X${string}` ? true : false;

type FindXTest1 = FindX<'X'>; // true
type FindXTest2 = FindX<'A'>; // false
type FindXTest3 = FindX<'AX'>; // true
type FindXTest4 = FindX<'XA'>; // true
type FindXTest5 = FindX<'AXA'>; // true

타입챌린지 이후 재해석한 타입스크립트의 연산들

후기의 후기