쉽게 시작하는 타입스크립트(쉽게 시작하는 시리즈)

타입스크립트의 개념부터 프로젝트 실습까지
입문자에게 가장 필요한 기본 지식을 설명한다!

처음에는 타입스크립트를 배우기 위한 개발 환경을 설정하고, 자바스크립트 코드를 타입스크립트로 바꿔보면서 타입스크립트의 기초를 배운다. 그리고 변수에 타입을 직접 정의해 보면서 기본 타입 9가지를 맛본 후, 실무에서 타입스크립트를 더 잘 사용하기 위해 인터페이스, 연산자, 타입 별칭, 이넘, 클래스, 제네릭 등의 문법을 배운다. 마지막으로, 실무에서 에러를 방지하고 타입스크립트를 더 깊이 이해하기 위해 타입 추론, 타입 가드, 타입 호환, 타입 모듈, 유틸리티 타입, 맵드 타입 등을 심도 있게 배운다. 이처럼 타입스크립트의 개념과 사용법을 배우면서 전체적인 흐름을 잡아보자. 돌아가거나 헤맬 일 없이 이 책 한 권이면 충분할 것이다.

1장 타입스크립트 소개와 배경
1.1 타입스크립트란?
1.2 왜 타입스크립트를 배워야 할까요?
__1.2.1 에러의 사전 방지
__1.2.2 코드 가이드 및 자동 완성
1.3 타입스크립트를 시작하기 어려운 두 가지 이유
__1.3.1 적지 않은 학습 비용
__1.3.2 운영 중인 서비스 적용에 대한 부담감
1.4 타입스크립트의 현실적인 대안 JSDoc
1.5 정리

2장 타입스크립트 시작하기
2.1 타입스크립트 학습을 위한 개발 환경 설정
__2.1.1 크롬 브라우저 설치
__2.1.2 Node.js와 NPM 설치
__2.1.3 비주얼 스튜디오 코드 설치
__2.1.4 비주얼 스튜디오 코드 테마와 플러그인 설치
2.2 타입스크립트 프로젝트 시작
__2.2.1 프로젝트 폴더 및 타입스크립트 파일 생성하기
__2.2.2 NPM 설정 파일 및 타입스크립트 설치하기
__2.2.3 타입스크립트 컴파일 명령어 실행하기
__2.2.4 컴파일된 파일의 실행 결과 확인하기
2.3 정리

3장 타입스크립트 기초: 변수와 함수의 타입 정의
3.1 변수에 타입을 정의하는 방법
3.2 기본 타입
__3.2.1 문자열 타입: string
__3.2.2 숫자 타입: number
__3.2.3 진위 타입: boolean
__3.2.4 객체 타입: object
__3.2.5 배열 타입: Array
__3.2.6 튜플 타입: tuple
__3.2.7 any
__3.2.8 %00;과 undefined
3.3 함수에 타입을 정의하는 방법
__3.3.1 함수란?
__3.3.2 함수의 타입 정의: 파라미터와 반환값
3.4 타입스크립트 함수의 인자 특징
3.5 옵셔널 파라미터
3.6 정리

4장 첫 번째 프로젝트: 할 일 관리 앱
4.1 프로젝트 내려받기 및 라이브러리 설치
4.2 프로젝트 폴더 구조
__4.2.1 node_modules 폴더
__4.2.2 src 폴더
__4.2.3 .eslintrc.js 파일
__4.2.4 package.json 파일
__4.2.5 package-lock.json 파일
__4.2.6 tsconfig.json 파일
4.3 프로젝트 로직
4.4 프로젝트 실습
4.5 프로젝트 실습 풀이
__4.5.1 함수의 반환 타입 정의
__4.5.2 할 일 목록 변수인 todoItems 타입 정의
__4.5.3 함수 파라미터 타입 구체화
__4.5.4 addTwoTodoItems( ) 함수 구현
__4.5.5 반복되는 타입 코드 줄이기
4.6 정리

5장 인터페이스
5.1 인터페이스란?
5.2 인터페이스를 이용한 객체 타입 정의
5.3 인터페이스를 이용한 함수 타입 정의
__5.3.1 함수 파라미터 타입 정의
__5.3.2 함수 반환 타입 정의
5.4 인터페이스의 옵션 속성
5.5 인터페이스 상속
__5.5.1 인터페이스의 상속이란?
__5.5.2 인터페이스를 상속할 때 참고 사항
5.6 인터페이스를 이용한 인덱싱 타입 정의
__5.6.1 배열 인덱싱 타입 정의
__5.6.2 객체 인덱싱 타입 정의
__5.6.3 인덱스 시그니처란?
__5.6.4 인덱스 시그니처는 언제 쓸까?
5.7 정리

6장 연산자를 사용한 타입 정의
6.1 유니언 타입
6.2 유니언 타입의 장점
6.3 유니언 타입을 사용할 때 주의할 점
6.4 인터섹션 타입
6.5 정리

7장 타입 별칭
7.1 타입 별칭이란?
7.2 타입 별칭과 인터페이스의 차이점
__7.2.1 코드 에디터에서 표기 방식 차이
__7.2.2 사용할 수 있는 타입의 차이
__7.2.3 타입 확장 관점에서 차이
7.3 타입 별칭은 언제 쓰는 것이 좋을까?
__7.3.1 타입 별칭으로만 정의할 수 있는 타입들
__7.3.2 백엔드와의 인터페이스 정의
7.4 정리

8장 이넘
8.1 이넘이란?
8.2 숫자형 이넘
8.3 문자형 이넘
8.4 알아 두면 좋은 이넘의 특징
__8.4.1 혼합 이넘
__8.4.2 다양한 이넘 속성 값 정의 방식
__8.4.3 const 이넘
8.5 정리

9장 클래스
9.1 클래스란?
9.2 클래스 기본 문법
9.3 클래스의 상속
9.4 타입스크립트의 클래스
9.5 클래스 접근 제어자
__9.5.1 클래스 접근 제어자의 필요성
__9.5.2 클래스 접근 제어자: public, private, protected
__9.5.3 클래스 접근 제어자로 정수기 문제 해결하기
__9.5.4 클래스 접근 제어자를 사용할 때 주의해야 할 점
9.6 정리

10장 제네릭
10.1 제네릭이란?
10.2 제네릭 기본 문법
10.3 왜 제네릭을 사용할까?
__10.3.1 중복되는 타입 코드의 문제점
__10.3.2 any를 쓰면 되지 않을까?
__10.3.3 제네릭으로 해결되는 문제점
10.4 인터페이스에 제네릭 사용하기
10.5 제네릭의 타입 제약
__10.5.1 extends를 사용한 타입 제약
__10.5.2 타입 제약의 특징
__10.5.3 keyof를 사용한 타입 제약
10.6 제네릭을 처음 사용할 때 주의해야 할 사고방식
10.7 정리

11장 두 번째 프로젝트: 전화번호부 앱
11.1 프로젝트 환경 구성
11.2 프로젝트 폴더 구조
__11.2.1 node_modules 폴더
__11.2.2 src 폴더
__11.2.3 .eslintrc.js
__11.2.4 package.json, package-lock.json 파일
__11.2.5 tsconfig.json 파일
11.3 프로젝트 로직
__11.3.1 인터페이스 코드
__11.3.2 api 함수
__11.3.3 전화번호부 클래스
11.4 프로젝트 실습
__11.4.1 타입스크립트 설정 파일의 noImplicitAny 속성 값 변경
__11.4.2 타입스크립트 설정 파일의 strict 속성 값 변경
11.5 프로젝트 실습 풀이: 첫 번째
__11.5.1 클래스 속성 타입 정의
__11.5.2 함수 파라미터 타입 정의
__11.5.3 API 함수 반환 타입 정의
11.6 프로젝트 실습 풀이: 두 번째
__11.6.1 함수 반환 타입 정의
__11.6.2 함수 파라미터에 이넘 타입 적용
11.7 정리

12장 타입 추론
12.1 타입 추론이란?
12.2 변수의 타입 추론 과정
12.3 함수의 타입 추론: 반환 타입
12.4 함수의 타입 추론: 파라미터 타입
12.5 인터페이스와 제네릭의 추론 방식
12.6 복잡한 구조에서 타입 추론 방식
12.7 정리

13장 타입 단언
13.1 타입 단언이란?
13.2 타입 단언 문법
__13.2.1 타입 단언의 대상
__13.2.2 타입 단언 중첩
__13.2.3 타입 단언을 사용할 때 주의할 점
13.3 %00; 아님 보장 연산자: !
13.4 정리

14장 타입 가드
14.1 타입 가드란?
14.2 왜 타입 가드가 필요할까?
__14.2.1 타입 단언으로 타입 에러 해결하기
__14.2.2 타입 단언으로 해결했을 때 문제점
__14.2.3 타입 가드로 문제점 해결하기
14.3 타입 가드 문법
__14.3.1 typeof 연산자
__14.3.2 instanceof 연산자
__14.3.3 in 연산자
14.4 타입 가드 함수
__14.4.1 타입 가드 함수 예시
__14.4.2 복잡한 경우의 타입 가드 예시
14.5 구별된 유니언 타입
14.6 switch 문과 연산자
__14.6.1 switch 문
__14.6.2 논리ㆍ비교 연산자
14.7 정리

15장 타입 호환
15.1 타입 호환이란?
15.2 다른 언어와 차이점
__15.2.1 구조적 타이핑
15.3 객체 타입의 호환
15.4 함수 타입의 호환
15.5 이넘 타입의 호환
__15.5.1 숫자형 이넘과 호환되는 number 타입
__15.5.2 이넘 타입 간 호환 여부
15.6 제네릭 타입의 호환
15.7 정리

16장 타입 모듈
16.1 모듈이란?
16.2 자바스크립트 모듈
__16.2.1 자바스크립트의 태생적 한계
__16.2.2 자바스크립트 모듈화를 위한 시도들
16.3 자바스크립트 모듈화 문법
__16.3.1 import와 export
__16.3.2 export default 문법
__16.3.3 import as 문법
__16.3.4 import * 문법
__16.3.5 export 위치
16.4 타입스크립트 모듈
16.5 타입스크립트 모듈 유효 범위
16.6 타입스크립트 모듈화 문법
__16.6.1 import type 문법
__16.6.2 import inline type 문법
__16.6.3 import와 import type 중 어떤 문법을 써야 할까?
16.7 모듈화 전략: Barrel
16.8 정리

17장 유틸리티 타입
17.1 유틸리티 타입이란?
17.2 Pick 유틸리티 타입
__17.2.1 Pick 타입 예시
__17.2.2 Pick 타입 문법
17.3 Omit 유틸리티 타입
__17.3.1 Omit 타입 문법
__17.3.2 Omit 타입 예시
__17.3.3 Omit 타입과 Pick 타입 비교
17.4 Partial 유틸리티 타입
__17.4.1 Partial 타입 문법
__17.4.2 Partial 타입 예시
17.5 Exclude 유틸리티 타입
__17.5.1 Exclude 타입 문법
__17.5.2 Exclude 타입 예시
17.6 Record 유틸리티 타입
__17.6.1 Record 타입 첫 번째 예시
__17.6.2 Record 타입 두 번째 예시
__17.6.3 Record 타입 문법
17.7 그 외의 유틸리티 타입
17.8 정리

18장 맵드 타입
18.1 맵드 타입 첫 번째 예시: in
18.2 map( ) API로 이해하는 맵드 타입
18.3 맵드 타입 두 번째 예시: keyof
18.4 맵드 타입을 사용할 때 주의할 점
18.5 매핑 수정자
18.6 맵드 타입으로 직접 유틸리티 타입 만들기
18.7 정리

19장 실전 프로젝트 환경 구성
19.1 타입스크립트 설정 파일
19.2 타입스크립트 설정 파일 생성
19.3 타입스크립트 설정 파일의 루트 옵션
__19.3.1 files
__19.3.2 include
__19.3.3 exclude
__19.3.4 extends
19.4 타입스크립트 설정 파일의 컴파일러 옵션
__19.4.1 target
__19.4.2 lib
__19.4.3 strict
__19.4.4 noImplicitAny
__19.4.5 strictNullChecks
__19.4.6 allowJs
__19.4.7 sourceMap
__19.4.8 jsx
__19.4.9 baseUrl
__19.4.10 paths
__19.4.11 removeComments
19.5 타입스크립트 설정 파일과 빌드 도구
__19.5.1 웹팩이란?
__19.5.2 웹팩에 타입스크립트 설정하기
19.6 타입 선언 파일
__19.6.1 타입 선언 파일 사용 방법
__19.6.2 타입 선언 파일을 언제 사용해야 하는가?
19.7 외부 라이브러리의 타입 선언과 활용
__19.7.1 외부 라이브러리를 사용하는 방법
__19.7.2 외부 라이브러리의 타입 선언 파일: Definitely Typed
__19.7.3 외부 라이브러리에 내장된 타입 선언 파일
__19.7.4 외부 라이브러리에 타입 선언 파일이 지원되지 않는 경우
19.8 정리

장기효 10년 동안 개발을 해왔고, 개발에서 얻는 즐거움을 지식 공유와 강의로 승화시키는 개발자다. 네이버, 삼성, LG 등 국내 주요 IT 기업 실무자들의 프런트엔드 개발 선생님이며, 온/오프라인 수강생 숫자가 35,000명에 이른다. 평일에는 회사에서 서비스를 개발하고, 주말에는 인프런 멘토링과 유튜브 개발 상담소로 대학생과 실무자에게 도움이 되는 콘텐츠를 나누고 있다. 저서로는 『Do it Vue.js 입문』과 『나는 네이버 프런트엔드 개발자입니다』(공동 집필)가 있다.

블로그 https://joshua1988.github.io/
유튜브 https://www.youtube.com/@captainpangyo