타입스크립트란
자바스크립트의 확장판으로
자바스크립트의 기본 문법 + 타입 관련 기능을 추가한 언어
자바스크립트
노드 js
- 자바스크립트의 구동기로 어느 환경에서든 코드를 실행 할 수 있게 해줌
- 웹, 모바일, 데스크탭 앱 등
자바스크립트의 한계점
- 유연한 문법 체계로 간단한 코드를 작성하기 좋음
타입시스템이란
실행안되게 막는게 좋다! 만약 코드가 매우 복잡하다면?
정적타입 시스템 (에디터 상에서 오류 바로 알려줌)
코드 실행전 잘 못 사용시 오류 발생
하지만 정적타입 시스템의 단점이 존재한다.
타입스크립트의 한계점 극복
- 타입을 추론함
점진적 타입 시스템 점진적으로 타입이 정의된 타입은 미리 정의하고 아니면 타입스크립트가 알아서 추론함
타입스크립트가 다른언어와의 차이점
타입스크립트의 동작 원리
컴파일 : 컴퓨터가 이해할 수 있는 기계어 형태로 변환
그리고 이렇게 코드를 컴파일하는 녀석을 특별히 컴파일러 라고 부릅니다. 컴파일 하는 친구 라는 뜻이죠?
자바스크립트 언어를 컴파일러를 통해 컴파일 하면 바이트 코드로 변환된다. 바이트 코드로 변환하기 전 AST(추상 문법 트리)라는 특별한 형태로 먼저 변환한다.
AST는 추상 문법 트리라는 뜻이다.
- 코드 공백, 주석, 탭 등 코드 실행에 관계없는 요소들을 전부 제거하고 트리 형태의 자료구조에 코드를 쪼개서 저장해놓은 형태
이렇게 코드를 AST로 변환하고 나면 이제 마지막으로 컴파일러가 AST를 바이트코드로 변환하고 컴파일이 종료됩니다.
타입스크립트의 동작 과정
타입스크립트 실행
Node.js 패키지 초기화
npm init
@types/node 설치
@types/node : Node.js 내장 기능들의 타입 정보를 담고있는 패키지
- 설치해야 하는 이유
코드를 실행하기 전에 타입을 올바르게 사용했는지 검사하는 '타입 검사' 과정을 통해 오류를 발생시켜 안전한 개발을 하기 위함npm i @types/node
설치 후 , node_modules/@types 폴더가 설치됨
타입스크립트 컴파일러 설치
타입스크립트 컴파일러(TSC)는 npm의 typeScript 패키지에 동봉되어 있음
sudo npm i -g typescript
타입스크립트를 컴파일 하기 위해서는 타입스크립트 패키지를 전역에 설치해 주어야 한다.
- TSC 버전 확인
tsc -v
타입스크립트 실행
src/index.ts 파일 생성
console.log('Hello TypeScript');
const a: number = 1;- 타입스크립트 컴파일
tsc src/index.ts
컴파일 완료시 src/index.js 파일 생성됨
console.log('Hello TypeScript');
const a: number = 1;node src/index.js
Hello TypeScript
ts-node로 실행하기
sudo npm i -g ts-node
ts-node -v
v10.9.1
ts-node src/index.ts
타입스크립트 컴파일러 옵션
컴파일러 옵션
컴파일 결과 생성되는 자바스크립트의 코드 버전은 어떻게 할 것인지 등의 컴파일의 아주 세부적인 사항들
다른 언어에 비해 컴파일러 옵션을 아주 자유롭게 개발자가 프로젝트 성격에 따라 쉽게 설정할 수 있음
컴파일러 옵션 자동 생성
패키지 루트 폴더 아래 tsconfig.json 파일 설정, Node.js 패키지 단위로 설정
- 자동 생성 도구 이용, 아래 tsc 명령어 사용시 tsconfig.json 파일 생성됨
tsc --init
컴파일러 옵션 설정하기
include 옵션
include 옵션 : tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션
{
"include": ["src"]
}이렇게 설정하면 tsc 명령어만 입력해도 src 폴더 아래의 모든 타입스크립트 파일이 동시에 컴파일 됨
target 옵션
자바스크립트 코드의 버전 설정
{
"compilerOptions": {
"target": "ES5"
},
"include": ["src"]
}tsc를 이용해 컴파일 하면 타입스크립트 코드가 ES5버전의 자바스크립트 코드로 변환됨
const func = () => console.log("Hello");tsc를 이용해 컴파일 하고 결과를 확인하면 다음과 같이 화살표 함수가 함수 표현식으로 변환된 걸 확인할 수 있음
const func = function(){
console.log("Hello");
}화살표 함수 같은 ES6의 문법이 ES5의 문법으로 변환된 것
출처
한 입 크기로 잘라먹는 타입스크립트, 이재환
