TypeScript

2강 — 제네릭과 React

2024 DTC

슬라이드 보는 법

→ / Space다음으로
←이전으로
↓ / ↑같은 주제 안에서 단계 이동
O전체 슬라이드 한눈에 보기
F전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

1강 복습

interface객체 모양
A | B유니온. typeof로 좁힌다
any쓰지 않는다

오늘은 이걸 React에 붙입니다

오늘 끝나면 할 수 있는 것

  • 타입을 인자처럼 받는다 — 제네릭
  • 있는 타입을 변형해서 쓴다
  • React 컴포넌트에 타입을 붙인다
  • 서버에서 받은 데이터를 안전하게 다룬다

오늘 배울 것

  • 7. 제네릭
  • 8. 유틸리티 타입
  • 9. React와 TypeScript
  • 10. 외부 데이터 다루기
  • 11. tsconfig
  • 12. 기존 프로젝트에 붙이기

7. 제네릭

타입을 나중에 정하려면

7. 제네릭 문제

            
              function first(arr: number[]) {
                return arr[0];
              }

              // 문자열 배열에도 쓰려면?
              function firstString(arr: string[]) { ... }
타입마다 함수를 새로 만들게 된다

타입만 다르고 내용이 같으면 어떻게 할까요?

7. 제네릭

            
              function first<T>(arr: T[]): T {
                return arr[0];
              }

              first([1, 2, 3]);
              first(["a", "b"]);
first([1, 2, 3])number
first(["a", "b"])string

7. 제네릭 interface에도

            
              interface Box<T> {
                value: T;
              }

              const a: Box<number> = { value: 1 };
              const b: Box<string> = { value: "hi" };
Box<number>value: number
Box<string>value: string

7. 정리

  • 이미 많이 쓰고 있었다 — Array<T>, Promise<T>
  • useState<T> 도 제네릭이다

8. 유틸리티 타입

있는 타입을 변형해서 쓰려면

8. 유틸리티 타입 문제

            
              interface User {
                id: number;
                name: string;
                email: string;
              }
수정 폼에서는 일부만 받고 싶다
목록에서는 id와 name만 쓴다

8. 유틸리티 타입 자주 쓰는 것

            
              Partial<User>    // 전부 선택
              Pick<User, "id" | "name">
              Omit<User, "email">
              Required<User>
Partial다 없어도 됨
Pick고른 것만
Omit뺀 나머지
Required다 필수

8. 유틸리티 타입 Partial

            
              function update(id: number, data: Partial<User>) {
                // name만 바꿔도 되고 email만 바꿔도 된다
              }

              update(1, { name: "새 이름" });
{ name }통과
{ }통과

8. 유틸리티 타입 Record

            
              type Scores = Record<string, number>;

              const s: Scores = { 국어: 90, 수학: 85 };
키string
값number

9. React와 TypeScript

컴포넌트에 타입을 붙이려면

9. React와 TS props

            Profile.tsx
            
              interface Props {
                name: string;
                age?: number;
              }

              function Profile({ name, age }: Props) {
                return <h1>{name}</h1>;
              }
<Profile /> Property 'name' is missing in type '{}' but required in type 'Props'.

9. React와 TS useState

            
              const [count, setCount] = useState(0);

              const [user, setUser] =
                useState<User | null>(null);
useState(0)number 추론
useState<User | null>직접 지정

9. React와 TS 이벤트

            
              type E = React.ChangeEvent<HTMLInputElement>;

              function onChange(e: E) {
                setText(e.target.value);
              }
이벤트 타입은 길다
에디터 자동완성을 쓸 것

9. React와 TS children

            
              type Props = { children: React.ReactNode };

              function Card({ children }: Props) {
                return <div>{children}</div>;
              }
childrenReact.ReactNode

10. 외부 데이터 다루기

서버에서 받은 값을 쓰려면

10. 외부 데이터 문제

            
              const res = await fetch(url);
              const data = await res.json();
dataany

res.json()의 타입은 뭘까요?

10. 외부 데이터 타입 붙이기

            
              interface Post {
                id: number;
                title: string;
              }

              const data: Post[] = await res.json();
dataPost[]

10. 정리

  • 타입을 붙여도 실제 값은 검사하지 않는다
  • 서버 응답이 바뀌면 런타임에 터진다
  • 중요한 곳은 zod 같은 도구로 값까지 검사한다

11. tsconfig

검사 강도를 정하려면

11. tsconfig

            tsconfig.json
            
              {
                "compilerOptions": {
                  "strict": true,
                  "target": "ES2020"
                }
              }
strict엄격 검사 묶음
target변환할 JS 버전

11. 정리

  • strict: true 로 시작한다
  • 나중에 켜면 오류가 수백 개 쏟아진다
  • Vite로 만들면 이미 켜져 있다

12. 기존 프로젝트에 붙이기

JS로 만든 것을 옮기려면

12. 옮기는 순서

  1. TypeScript 설치, tsconfig.json 추가
  2. 파일 하나씩 .js → .ts
  3. 오류 나는 곳에 타입 붙이기
  4. 급하면 // @ts-expect-error 로 잠시 미루기
  5. 마지막에 strict 켜기

12. 정리

  • 전부 한 번에 바꾸지 않는다
  • 새로 쓰는 파일부터 .ts 로
  • 타입이 안 잡히면 unknown 으로 두고 넘어간다

정리

TypeScript 2강 전체

한눈에

1강기본 타입, 함수, interface, 유니온
제네릭타입을 인자처럼 받는다
Partial Pick Omit있는 타입을 변형
Reactprops는 interface, useState<T>
외부 데이터타입은 약속일 뿐 검사가 아니다
strict처음부터 켜둔다

실습

직접 해봅시다

실습 과제

  1. React 2강의 할 일 목록을 .tsx 로 옮기기
  2. interface Todo 를 만들고 props에 붙이기
  3. API 응답에 타입 붙이기
  4. any 가 하나도 없게 만들기

더 볼 것

끝

수고하셨습니다