타입스크립트란 무엇인가

 

✔️ 타입스크립트 언어가 무엇인지, 그리고 동작 원리에 대해 살펴보자

 

☑️ 타입스크립트란?

JavaScript With Syntax For Types.

JavaScript With Syntax For Types.

• 타입스크립트 ⇒ 자바스크립트 + 타입 시스템

☑️ 타입 시스템?

• 개발 과정에서 에러를 잡을 수 있게 도와준다.
  • 자바스크립트는 느슨한 언어이기 때문에 사용하기에는 편리하지만 유연한 타입핑을 가지고 가기 때문에 에러를 발견하기 힘들다.
• 타입 어노테이션을 사용하여 우리의 코드를 분석한다.
• 개발 환경에서만 동작한다.
  • 타입스크립트 코드는 컴파일 되고 나서는 자바스크립트로 변환된다 ⇒ 브라우저 / 노드 같은 런타임 환경에서 실행된다.
• 성능 최적화 관련해서는 지원하지 않는다.
  • 타입스크립트는 추가적으로 최적화를 지원하지 않는다. 철저하게 개발자들을 위한 것

타입 스크립트 동작 원리

타입스크립트 → 타입스크립트 컴파일러 → 자바스크립트 코드 → 브라우저

• 타입스크립트 코드는 바로 브라우저에서 실행이 될 수 없다.
• 컴파일러를 통해서 컴파일이 이루어진다.
• 컴파일러를 거치고 나면 자바스크립트로 변환이 된다. 즉, 타입을 지정해 준 것들이 사라진다. (트렌스파일링)
• 자바스크립트 코드가 브라우저에서 동작하게 된다.

기억할 점

• 타입스크립트 컴파일러가 타입 어노테이션을 써서 코드를 분석한다.
• 이 추가적인 구문(타입 어노테이션)은 브라우저로 가지 않는다.

예제)

TS Playground - An online editor for exploring TypeScript and JavaScript

type Callback<T> = (element: T, index: number) => void;

const forEach = (collection: T[], callback: Callback<T>) => {
	for(let i = 0; i < collection.length; i++) {
		callback(collection[i] as T, i);
	}
}

// 변환 후 자바스크립트

"use strict";
const forEach = (collection, callback) => {
    for (let i = 0; i < collection.length; i++) {
        callback(collection[i], i);
    }
};

타입스크립트 환경 설정

• 타입스크립트 컴파일러 설치하기

npm install -g typescript ts-node

(만약 맥 유저이고 EACCESS를 마주하면 앞에 sudo를 붙이기!)

 

• 디렉토리를 하나 생성하고 index.ts 타입스크립트 파일을 하나 만들기

mkdir typescript-example && cd typescript-example && touch index.ts

(직접 vscode 에서 파일을 만들어 주는게 편하다)

 

• 간단한 코드 작성

// index.ts

const a = 10;
console.log(`a : ${a}`);

 

• 타입스크립트 컴파일 && Node 실행

tsc index.ts && node index.js

 

• 한 번에 컴파일 후 실행

npx ts-node index.ts

요약

• 타입스크립트를 작성하는 것은 자바스크립트를 작성하는 것과 동일하다. 단, 추가 문서가 있을 뿐이다.
• 타입스크립트는 우리 코드가 브라우저나 노드 같은 환경에서 실행이 될 때 영향을 주지는 않는다.
• 타입스크립트는 마치 우리가 코딩할 때 옆에 앉아 있는 친구와 같은 개념으로 이해하면 좋다.