TS LAB
    TS 4.4 · 4부. 실무 준비

    다음 단계

    React · Node 로 이어지는 길과 더 볼 것을 정리합니다.

    예상 학습 시간 12분 난이도 중급
    개념 설명

    여기까지 배운 것

    타입을 적는 법, 없을 수 있는 값을 다루는 법, 형태에 이름을 붙이고 다시 쓰는 법, 그리고 타입을 나중에 정하는 법을 보았습니다. 실무에서 쓰는 TypeScript 의 대부분이 이 안에 있습니다.

    이 단원의 코드 상자에는 실행 단추가 없습니다. 무엇을 더 볼지 살피는 자리입니다.

    상세 사용법

    다음에 만날 것들

    무엇어디서 만나나
    조건부 타입T extends U ? X : Y. 라이브러리 타입을 읽을 때 보입니다
    매핑된 타입{ [K in keyof T]: … }. Partial 이 이것으로 만들어져 있습니다(3.4)
    템플릿 리터럴 타입`on${Capitalize<T>}` 처럼 글자를 조합해 타입을 만듭니다
    데코레이터클래스에 표시를 붙입니다. Angular · NestJS 에서 씁니다
    satisfies타입을 지키는지 확인하되 좁혀진 타입은 그대로 두는 연산자입니다

    지금 다 알 필요는 없습니다. 앞의 둘은 대개 읽을 줄만 알면 됩니다 — 직접 만드는 일은 라이브러리를 만들 때나 생깁니다.

    상세 사용법

    React 로 간다면

    Counter.tsx 
    interface Props {
	label: string;
	step?: number;
}

function Counter({ label, step = 1 }: Props) {
	// useState 가 제네릭입니다. 넣은 값을 보고 number 로 정해집니다.
	const [count, setCount] = useState(0);

	return <button onClick={() => setCount(count + step)}>
		{label}: {count}
	</button>;
}

    새로 배울 것이 생각보다 적습니다. Props 는 2.3 의 객체 타입, step? 는 2.2 의 선택 매개 변수, useState 는 3.3 의 제네릭, 구조 분해는 JS 3.7 입니다.

    파일 확장자가 .tsx 인 것만 기억하면 됩니다.

    상세 사용법

    Node 로 간다면

    터미널 
    # Node 의 타입을 받습니다. 없으면 process 나 fs 를 사용할 수 없습니다.
npm i -D @types/node

# Node 22 부터는 타입을 지우고 그대로 실행할 수 있습니다.
node main.ts

    타입을 지우고 실행하는 것과 검사하는 것은 다릅니다. 지우고 실행하는 쪽은 빠르지만 타입이 맞는지 보지 않습니다. 검사는 여전히 tsc --noEmit 이 합니다(4.1).

    상세 사용법

    어디서 더 볼까

    이름무엇
    공식 문서typescriptlang.org/docs — 핸드북이 잘 되어 있습니다
    Playgroundtypescriptlang.org/play — 바뀐 JavaScript 를 나란히 보여 줍니다
    타입 챌린지타입만으로 푸는 문제 모음입니다. 조건부·매핑된 타입을 익히는 데 좋습니다
    라이브러리의 .d.ts가장 좋은 교재입니다. 4.3 처럼 정의로 따라 들어가 읽어 보세요
    흔한 실수

    오래 가는 습관

    타입을 먼저 어렵게 만드는 것

    가장 단순한 타입부터 적습니다. 조건부 타입이나 제네릭을 처음부터 꺼내면 읽는 사람도 고치는 사람도 힘들어집니다. 필요해질 때 올립니다.

    any 와 as 로 오류를 지우는 것

    오류가 사라졌다고 문제가 사라진 것이 아닙니다. 둘 다 검사를 끄는 것이고, 그 자리는 실행할 때 터집니다. 정말 필요하면 왜 그런지 주석을 남깁니다.

    타입이 있으니 확인하지 않아도 된다고 여기는 것

    타입은 실행되지 않습니다. 서버 응답과 사용자 입력은 여전히 실행 중에 확인해야 합니다(4.2의 타입 가드).

    요약

    이 트랙의 정리

    • TypeScript 는 실행하기 전에 값의 종류를 확인합니다.
    • 없을 수 있는 값을 타입에 적고, 확인해야 사용하게 합니다.
    • 형태에 이름을 붙여 다시 쓰고, 있는 타입을 고쳐 새것을 만듭니다.
    • 제네릭으로 검사를 유지한 채 여러 타입에 씁니다.
    • 타입은 검사에만 쓰이고 실행되는 코드에는 남지 않습니다.

    JS 커리큘럼 으로 돌아가거나, 치트시트 와 용어사전 에서 찾아볼 수 있습니다.