TypeScript

1강 — 타입 기초

2024 DTC

슬라이드 보는 법

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

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

오늘 끝나면 할 수 있는 것

값에 타입을 붙인다
함수의 입력과 출력을 정한다
객체의 모양을 interface 로 적는다
여러 타입 중 하나를 표현한다
에디터가 잡아주는 오류를 읽는다

TypeScript란?

TypeScript란? JavaScript

            
              function add(a, b) {
                return a + b;
              }

              add(1, 2);
              add("1", "2");

add(1, 2)3

add("1", "2")"12"

여기서 문자열을 넣으면 어떻게 될까요?

TypeScript란? TypeScript

            
              function add(a: number, b: number) {
                return a + b;
              }

              add("1", "2");

add("1", "2"); Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScript란?

JavaScript에 타입을 더한 것

실행하기 전에 오류를 잡아준다

TypeScript란? 왜 쓰나

오류를 미리 잡는다
에디터가 자동완성을 정확히 해준다
타입이 곧 설명서가 된다
실행될 때는 그냥 JavaScript다

오늘 배울 것

1. 시작하기
2. 기본 타입
3. 함수
4. 객체와 interface
5. 유니온과 좁히기
6. any와 unknown

1. 시작하기

TypeScript를 써보려면

1. 시작하기 프로젝트

            
              npm create vite@latest my-app
              # 언어에서 TypeScript 선택

              npm install
              npm run dev

.ts / .tsx 파일을 쓸 수 있다

1. 시작하기 검사

            
              npx tsc --noEmit

src/App.tsx:5:7 - error TS2322

Type 'string' is not assignable to type 'number'.

1. 시작하기 확장자

.ts

일반 TypeScript

JSX 없음

.tsx

React 컴포넌트

JSX 있음

2. 기본 타입

값에 타입을 붙이려면

2. 기본 타입

            
              let name: string = "홍길동";
              let age: number = 20;
              let isMember: boolean = true;
              let scores: number[] = [90, 85, 100];

string문자열

number정수와 소수 모두

booleantrue / false

number[]숫자 배열

2. 기본 타입 타입 추론

            
              let name = "홍길동";
              let age = 20;
              let scores = [90, 85, 100];

namestring

agenumber

scoresnumber[]

타입을 안 쓰면 어떻게 될까요?

2. 기본 타입 추론된 뒤

            
              let age = 20;
              age = "스무살";

age = "스무살"; Type 'string' is not assignable to type 'number'.

2. 정리

변수: 타입 으로 붙인다
안 쓰면 값을 보고 알아서 정한다
변수에는 대부분 안 쓴다. 함수에는 쓴다

3. 함수

함수의 입력과 출력을 정하려면

3. 함수

            
              function add(a: number, b: number): number {
                return a + b;
              }

매개변수number, number

반환값number

3. 함수 선택 매개변수

            
              function greet(name: string, age?: number) {
                if (age) return `${name} (${age})`;
                return name;
              }

              greet("홍길동");
              greet("홍길동", 20);

greet("홍길동")"홍길동"

greet("홍길동", 20)"홍길동 (20)"

3. 함수 void

            
              function log(msg: string): void {
                console.log(msg);
              }

void돌려주는 값 없음

3. 함수 화살표 함수

            
              const add = (a: number, b: number) => a + b;

add(a: number, b: number) => number

4. 객체와 interface

객체의 모양을 적으려면

4. 객체와 interface 문제

            
              function print(
                user: { name: string; age: number }
              ) {
                console.log(user.name);
              }

쓸 때마다 반복하게 된다

4. 객체와 interface

            
              interface User {
                name: string;
                age: number;
              }

              function print(user: User) {
                console.log(user.name);
              }

이름을 붙여두고

필요할 때마다 가져다 쓴다

4. 객체와 interface 옵션

            
              interface User {
                name: string;
                age?: number;      // 없어도 됨
                readonly id: number;  // 못 바꿈
              }

name필수

age?선택

readonly id읽기 전용

4. 객체와 interface 없는 속성

            
              const user: User = {
                name: "홍길동",
                nickname: "희도",
              };

nickname: "희도", Object literal may only specify known properties, and 'nickname' does not exist in type 'User'.

없는 속성을 넣으면 어떻게 될까요?

4. 객체와 interface type과 차이

interface

객체 모양

확장이 자연스럽다

type

모든 타입

유니온도 가능

객체는 interface, 나머지는 type — 정도로 시작하면 됩니다

5. 유니온과 좁히기

여러 타입 중 하나를 표현하려면

5. 유니온 |

            
              let id: string | number;

              id = "abc";
              id = 123;
              id = true;

id = true; Type 'boolean' is not assignable to type 'string | number'.

5. 유니온 리터럴

            
              type Status = "대기" | "진행" | "완료";

              let s: Status = "진행";
              let t: Status = "취소";

let t: Status = "취소"; Type '"취소"' is not assignable to type 'Status'.

5. 좁히기 문제

            
              function print(id: string | number) {
                console.log(id.toUpperCase());
              }

id.toUpperCase() Property 'toUpperCase' does not exist on type 'string | number'.

유니온 타입에 문자열 메서드를 쓰면?

5. 좁히기 typeof

            
              function print(id: string | number) {
                if (typeof id === "string") {
                  console.log(id.toUpperCase());
                } else {
                  console.log(id + 1);
                }
              }

if 안string

else 안number

6. any와 unknown

타입을 모를 때는

6. any 위험

            
              let data: any = "문자열";

              data.아무거나();
              data.foo.bar.baz;

아무 오류도 안 난다

검사를 통째로 끈 것

any를 쓰면 어떻게 될까요?

6. unknown 안전한 쪽

            
              let data: unknown = "문자열";

              data.toUpperCase();

data.toUpperCase(); 'data' is of type 'unknown'.

6. unknown 좁히면

            
              let data: unknown = "문자열";

              if (typeof data === "string") {
                data.toUpperCase();   // 여기서는 된다
              }

if 안string

6. 정리

any — 검사를 끈다. 쓰지 않는다
unknown — 확인한 뒤에만 쓸 수 있다
급하면 any 대신 unknown

정리

오늘 배운 것

한눈에

string number boolean	기본 타입
타입 추론	안 쓰면 알아서 정해준다
(a: T) => R	함수의 입력과 출력
interface	객체 모양에 이름 붙이기
A \| B	유니온. typeof로 좁힌다
any / unknown	any는 금지, unknown을 쓴다

실습

직접 만들어봅시다

실습 과제

JS 1강 실습(배열 최댓값 등)을 .ts 로 옮기고 타입 붙이기
interface Todo 를 만들고 할 일 배열 타입 정하기
상태를 "대기" | "완료" 리터럴 유니온으로 만들기

더 볼 것

TypeScript 핸드북 (한국어)
TypeScript Playground — 설치 없이 바로

끝

2강에서는 React에 붙입니다