[TypeScript/타입스크립트] Typescript란??

TypeScript란??

• 마이크로소프트에서 구현한 Javascript의 슈퍼셋 프로그래밍 언어. 쉽게 말해서 Javascript에 Type 문법을 추가한 것이다.
• 확장자로는 .ts를 사용

 

왜 Typescript를 사용하는가??

1. 타입 검사

Javascript는 Dynamic Typing이 가능하다. 그게 무슨 말이냐면 다음과 같은 연산이 가능하다는 것이다.

5 - '3'
// 결과값 : 2

숫자 - 문자열 연산인데 Javascript가 알아서 숫자 - 숫자 연산으로 바꿔서 계산해준다는 것이다. 편해보일지 몰라도 프로젝트 사이즈가 커진다면 이런 유연성을 제공하는 기능은 독이 된다. Typescript는 바로 이런 점을 잡아준다. 타입을 엄격하게 검사하여 수정하라고 알려준다.

2. 에러메세지

Typescript의 에러메세지는 상세해서 사용자가 에러를 수정하기 쉽다.

3. Javascript와의 호환성

Typescript는 Javascript와 100% 호환된다. 그러므로 Javascript를 사용할 수 있는 곳이라면 프론트엔드든 백엔드든 어디든 사용이 가능하다.

 

Javascript vs Typescript

	JavaScript	Typescript
언어 타입	동적타입 언어 (런타임 시 자료형 결정)	정적타입 언어 (컴파일 시 자료형 결정)
언어 타입 2	인터프리터 언어 (컴파일 없이 실행)	컴파일 언어 (기계어로 변환하는 컴파일 후 실행)
독립적 사용 여부	독립적으로 사용 가능	자바스크립트에 의존적 (.ts -> .js 파일로 변환 후 실행됨)
특징	유연성	더 나은 구조, 간결함, 일관성, 재사용성
확장자	.js	.ts
더 적합한 프로젝트	작고 간단한 프로젝트	복잡한 프로젝트

 

Typescript 설치하기

1. nodejs 설치 (최신버전으로)
2. VSCode 터미널에서 타입스크립트 설치

npm install -g typescript

3. ts 파일 생성
4. tsconfig.json 파일 생성
   ts->js 컴파일 시 옵션을 설정

{ 
	"compilerOptions": { 
    		"target": "ES5", 
    		"module": "CommonJS" 
    } 
}

3. ts 파일 내용 작성하기
4. 브라우저는 ts 파일을 못 읽고 js 파일만 읽을 수 있다. 터미널에 tsc -w 입력해두면 ts 파일이 js 파일로 자동변환된다.

[참고]

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트[TypeScript] | 인사이트리포트 | 삼성SDS

[Typescript] 타입스크립트를 "사용해야 하는" 이유 (+ 온라인에서 연습하기)