TS
1주차
- JavaScript의 단점을 알아보고 typescript의 탄생 배경을 이해한다
- typescript가 개발자에게 어떤 이점을 제공하는지 파악한다
- typescript 개발 환경을 세팅한다
javascript의 약점
동적 타입 언어는 예기치 않은 버그가 나올 확률이 매우 높다
javascript의 약점: 런타임 에러
실행시간에 결정되는 변수 타입
개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다로움
약한 타입 체크
변수/상수를 구분하는 정도의 키워드만 지원
너무 물렁한 객체
마음대로 객체의 성질을 수시로 변화시킬 수 있음
TypeScript
ms 오픈소스 프로그래밍 언어
자바스크립트의 단점을 상쇄하기위해 등장
실행 시간에 결정되는 변수 타입
컴파일 시간에 변수의 타입을 체크
vs code에 입력하는 순간 에러메세지 발생
서버가 실행되기 전에도 에러를 알 수 있음
vs code에 입력하는 순간 객체에 대한 에러메세지 발생
정의되지 않은 프로퍼티를 연산하여 nan이 되는 현상을 미연에 방지
객체 지향 프로그래밍(OOP)를 할때 메리트
다양한 접근 제어자를 통해 클래스를 구성하는 프로퍼티의 캡슐화를 보장하고 함수의 호출 범위를 조정할 수 있음
외부 모듈의 타입 정보 제공
d.ts라는 선언 파일을 통해 외부 모듈 타입 정보를 제공
선언 파일을 설치해 자바스크립트 라이브러리도 타입스크립트에서 사용 가능
타입스크립트를 배우면 할 수 있는 것
타입스크립트는 개발자 취업시장에서 필수적 기술 스택
생산성 향상, 안정성 향상
윈도우 기반 ts 개발환경 구축
node.js 설치
명령프롬프트(cmd)
npm install typescript -g
tsc
2주차
- 컴파일러의 개념에 대해 공부하고 tsc를 어떻게 사용하는지 파악한다
- tsconfig.json의 필수 옵션들을 숙지한다
- 첫번째 ts프로그램 코드를 이해하고 발전시킨다
컴파일러 그리고 tsc
컴파일러의 근본적인 역할
타입검사
- ts 컴파일러는 소스코드의 정적 타입 검사 수행
- 개발자는 코드에서 타입관련 오류를 미리 발견하고 수정 가능
코드변환
- ts -> js 코드 변환
- c언어 컴파일러는 c언어 -> 기계어 코드 변환
- 컴파일러를 이해하면 변환된 코드가 어떻게 실행되는 지 예측 가능
- 디버깅에 큰 도움
컴파일러의 매력
에러메세지 해석시 도움을 받을 수 있음
- 컴파일러는 소스코드에서 문제가 발견되면 에러 메시지를 출력
- 컴파일러를 이해하면 에러 메시지를 보다 정확하게 해석하고 문제를 신속하게 해결할 수 있음
최적화
- 코드가 최적화되면 전반적인 어플리케이션 실행 시간이 빨라짐
- 컴파일러는 이런 것을 자동으로 도와줌
컴파일러란?
- 컴파일러는 프로그래밍 언어로 작성된 소스 코드 -> 다른 프로그래밍 언어로 변환하는 도구
- 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사하여 문제가 없는지 확인
- 이를 통해 개발자가 작성한 코드에 오류가 있는 경우 미리 알려주어 문제 해결 가능
컴파일러가 등장한 이유
- 기계어는 사람이 이해하기 어려움
- c언어와 같은 고수준 프로그래밍 언어가 등장
- c언어로 작성된 코드를 컴퓨터가 이해하도록 변환시켜야했음
tsc= ts 컴파일러
js는 기계어로 변환될 필요가 없다
js는 동적 언어(=인터프리터 언어)이기 때문
- node.js나 크롬->js 를 실행할 때는 v8 엔진이 코드 해석 및 실행을 하고
- firefox -> js 를 실행할 땐 spidermonkey가 코드해석 및 실행
정적언어(컴파일언어) -> 기계어 변환 필요
동적언어(인터프리터언어) -> 엔진이 코드를 한 줄씩 실행하며 동적으로 해석
tsc 명령어 사용해보기
주요 명령어
- tsc --init
- tsconfig.json 생성 - tsc index.ts
- index.ts를 컴파일- .ts : ts 파일의 확장자
- tsc src/*.ts
- src 디렉토리 안에 있는 모든 ts파일을 컴파일 - tsc index.js --declaration --emitDeclarationOnly
- @types 패키지를 위한 .d.ts 파일 생성- js로 작성된 모듈에 타입 선언을 제공할 때 유용하게 쓰임
tsconfig.json 해부하기
compilerOptions - strict : true
compilerOptions - sourceMap : true
tsconfig.json
- tsc --init 명령을 실행하면 생성되는 파일
- TypeScript 프로젝트의 설정 파일
- 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용
compilerOptions - target 옵션
- es5 로 설정하면 CommonJS 버전으로 컴파일
- es2016(=es7) 로 설정하면 ES2016 버전으로 컴파일
- 최신 브라우저는 보통 ES2016을 지원하므로 후자로 설정하는것이 좋다
- 만약 프로젝트가 생각보다 레거시한 환경에서 동작해야 된다면 es5
compilerOptions - module 옵션
- TypeScript 파일을 컴파일한 후 생성되는 JavaScript 모듈의 형식을 지정
- 모듈을 가져오고 내보내는 방식을 결정하는 옵션
- 타겟 옵션과는 서로 독립적인 관계니 프로젝트의 요구사항에 따라 옵션을 설정하면 됨
compilerOptions - outDir 옵션
- 컴파일된 js파일이 저장될 출력 디렉터리 지정
- "outDir": "dist"
compilerOptions - strict
- 엄격한 타입 검사 옵션을 모두 활성화하는 옵션
- ts 컴파일러가 보다 엄격한 타입 검사를 수행해 코드의 실수를
- 해당 옵션을 true로 설정하면 아래의 옵션들이 자동으로 true로 설정됨
strictNullChecks
strictFunctionTypes
strictBindCallApply
strictPropertyInitialization
noImplicitAny
noImplicitThis
alwaysStrict
compilerOptions - sourceMap 옵션
컴파일된 JavaScript 파일에 대한 소스 맵을 생성하는 옵션
소스 맵을 사용하면 실행 중에 에러가 발생했을 때 원래 TypeScript 소스 코드의 위치를 확인 가능
디버깅에 큰 도움이 되므로 개발환경에서는 꼭 true 설정 권장
프로덕션 환경에서는 용량이나 성능상의 이유로 sourceMap을 사용하지 않는 것이 나을 수 있음
include , exclude 옵션
tsc가 컴파일을 할 때 포함하거나 제외할 파일이나 디렉터리를 지정하는 옵션
- “include": ["src/*/"]
- src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미
- exclude": ["node_modules", "dist"]
- node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외하겠다는 의미
.d.ts 파일 알아보기
@types 라이브러리
TypeScript는 @types 라이브러리를 통해 외부 라이브러리에 대한 타입 정보를 제공
@types에 있는 디렉토리에 내부로 들어가면 .d.ts 파일의 홍수
.d.ts 파일은 TypeScript 타입 정의 파일
JavaScript 라이브러리에 대한 타입 정보를 제공
.d.ts 파일로 ts컴파일러가 알 수 있는 정보
- 외부 라이브러리의 함수 타입 정보
- 외부 라이브러리 클래스 타입 정보
- 외부 라이브러리 객체 타입 정보
.d.ts 파일로 외부 라이브러리의 타입 추론도 가능
타입추론: 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것
JavaScript 라이브러리를 TypeScript 프로젝트에서 사용해보기
npm init -y
tsc --init
"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부
ts에서 사용하고싶은 커스텀 js 라이브러리 생성
ex) test.js
/**
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a, b) { // export를 넣지 않으면 import 할 수 없는 것 아시죠?
return a + b;
}
상단 주석문 : JSDoc
: api의 시그니처(인타,리턴타입)을 설명하는 html문서 생성기
jsdoc로 js 소스코드에 타입힌트 제공 가능
// JSDoc으로 타입 힌트가 제공된 test.js의 .d.ts 파일 생성
npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types
// types/test.d.ts 파일
/**
* @param {number} a
* @param {number} b
* @returns {number}
*/
export function add(a: number, b: number): number;
