타입스크립트는 Microsoft에서 만들어졌습니다. 바닐라 자바스크립트 Superset(상위 호환)으로 생각하면 편합니다.
C#과 Java같은 c계열 언어들에서 사용하는 강한 타입 시스템은 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류를 보다 빠르게 잡아낼 수 있습니다.
반대로 자바스크립트는 타입 시스템이 없는 동적 타입 언어입니다. 자바스크립트 변수는 문자열, 숫자, 불리언, 등 여러 타입의 값을 가질 수 있습니다. 이를 약한 타입언어라고 하며 비교적 유연하게 개발할 수 있는 환경을 만듭니다. 하지만 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가지고 있습니다.
크로스 플랫폼 지원: 자바스크립트가 실행되는 모든 플랫폼에서 사용할 수 있습니다.
객체 지향 언어 : 클래스, 인터페이스, 모듈 등의 기능을 제공하고 순수 객체 지향 코드를 사용할 수 있습니다.
정적 타입 : 정적 타입을 사용하기 때문에 코드를 입력할 때 오류를 해결할 수 있습니다.
DOM 제어 : 자바스크립트와 같이 DOM을 제어해 추가, 삭제할 수 있습니다.
Es6 기능 지원
자바스크립트는 .js
확장자를 가진 파일로 작성하는 것 처럼 타입스크립트는 .ts
확장자를 가진 파일로 작성합니다. .ts
파일에서 작성 후 자바스크립트 파일로 컴파일하여 사용하게 됩니다.
tsc 명령을 사용하기 위해서 타입스크립트를 전역 설치할 수 있습니다.
npm install -g typescript
tsc --version
tsc ./src/index.ts
단일, 프로젝트에서만 사용하길 희망한다면
npm install -D typescript
npx tsc --version
npx tsc ./src/index.ts
tsconfig.json 파일을 만듭니다.
{
"compilerOptions": {
"strict": true,
"target": "ES6",
"lib": ["ES2015", "DOM"],
"module": "CommonJS"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
터미널 창에서 입력
tsc --watch
타입스크립트는 공식 페이지에서 Repl를 제공하고 있습니다.
별도의 설정 없이 브라우저에서 바로 typescript가 어떻게 컴파일 되는지 확인할 수 있습니다.
https://www.typescriptlang.org/play/index.html
파일과 디렉토리만으로 쉽게 타입스크립트 프로젝트를 쉽게 구성할 수 있습니다.
가벼운 프로젝트를 테스트하기 좋습니다.
로컬 환경에서 빠르게 테스트하고 싶다면 Parcel 번들러를 사용하는게 좋습니다.
터미널에서 다음과 같이 입력
mkdir typescript-test
cd typescript-test
npm init -y
npm install -D typescript parcel-bundler
tsconfig.json
파일을 생성하고 원하는 옵션을 추가합니다.
예시
{
"compileOptions": {
"strict": true
},
"exclude": [
"node_modules"
]
},
TS Node는 NodeJS환경에서 테스트할 수 있습니다.
mkdir typescript-test
cd typescript-test
npm init -y
npm install -D typescript @types/node ts-node
tsconfig.json
예시
{
"compileOptions":{
"strict": true,
"module": "CommonJS"
},
"exclude": [
"node_modules"
]
}
터미널에서 확인
npx ts-node main.js
타입스크립트 공식문서 : https://www.typescriptlang.org/
HEROPY Tech : https://heropy.blog/2020/01/27/typescript/