쉽게 시작하는 타입스크립트

믿고 보는 캡틴판교의 타입스크립트 입문서

장기효 저자 지음

길벗 2023년 06월 21일 출간 종이책 : 2023년 06월 16일 출간

작품소개

책소개

타입스크립트는 자바스크립트에 타입을 부여한 언어로, 타입 시스템을 사용하여 표현력이 우수하고, 프로그램의 대규모 확장에도 대응할 수 있으며, 안전하고 효율적인 코드를 작성하게 도와 준다. 이 책은 이러한 장점을 가진 타입스크립트를 처음 배우는 사람을 위한 책으로, 짧은 개념 설명과 작은 예제를 반복하면서 타입스크립트를 모르는 사람도 쉽게 배울 수 있게 구성했다. 어느 정도 배운 뒤에는 실습 프로젝트를 제공하여 지루할 틈 없이 모든 내용을 학습하도록 이끈다. 특히, 오랜 강의와 개발 경력을 통해 얻은 노하우 및 수많은 수강생들의 질문들을 이 책에 충분히 녹여냈다. 타입스크립트를 학습하고 싶은 모든 분에게 추천한다.

목차

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

작가의 말

타입스크립트가 세상에 나온 지 벌써 10년이 넘었습니다. 10년이 넘는 긴 시간 동안 누군가에게는 숙련된 개발자로 보일 수 있는 도구로, 취업 가산점의 수단으로, 코드 유지 보수를 쉽게 도와주는 언어로 사용되어 왔습니다. 저에게 타입스크립트 언어는 코드를 편하게 작성할 수 있게 도와 주고 개발 시간을 즐겁게 만들어 주는 수단처럼 느껴집니다.
첫 번째 저서 이후로 ‘다시 책을 쓸 수 있을까?’라는 고민을 많이 했습니다. 여러 출판사에서 제 온라인 강의와 온라인 타입스크립트 핸드북을 보고 출간을 제의해 주셨습니다. 올바른 지식과 책에 실리는 정보의 무게를 잘 알고 있기에 집필의 고통을 선뜻 다시 받아들이기가 쉽지 않았습니다. 그러다 집 근처 서점에 들러 당시 출간된 타입스크립트 서적 몇 권을 살펴보았습니다. 대다수가 번역서였고, 입문자에게 친숙한 방식으로 쉽게 설명된 책은 없었습니다. ‘아, 한국어로 잘 다듬고 쉽게 정리한 타입스크립트 책이 한 권 필요하겠구나’라는 생각을 했습니다.
그 후 2년이란 시간이 흘러 지금의 책이 완성되었습니다. 이 책에서는 ‘타입스크립트가 자바스크립트의 슈퍼셋’이라는 표현을 사용하지 않습니다. 기술적으로는 정확한 표현일지 몰라도 슈퍼셋이라는 단어에 움찔할 입문자가 많기 때문이죠. 이 책은 슈퍼셋이라는 표현 대신 ‘자바스크립트에 타입이 추가된 언어’라는 표현을 더 선호합니다. 그만큼 처음 타입스크립트를 배우는 사람 혹은 이미 사용하고 있지만 제대로 원리나 개념을 공부한 적이 없는 사람을 위해 쉽게 썼습니다.
이 책에는 단순한 토이 프로젝트부터 UI 복잡도가 매우 높은 실무 프로젝트까지 타입스크립트로 수많은 코드를 작성하면서 느낀 장점과 특징을 담았습니다. 개인적인 견해에 치우친 지식을 나열하지 않도록 타입스크립트 공식 문서의 정확한 정보, 커뮤니티의 많은 글과 코드를 검증해서 내린 결론을 담으려고 노력했습니다. 이 책에는 단순히 저 한 사람의 지식이 아니라 수년간 타입스크립트 코드를 함께 작성한 제 동료와 친구, 지인, 커뮤니티 기여자들의 생각과 지식이 담겨 있습니다. 그 지식을 제 관점으로 재해석하고 타입스크립트라는 언어가 재미있게 느껴졌으면 하는 바람에서 정리한 결과가 바로 이 책입니다.