TypeScript(타입스크립트) 설치하기

이번에는 TypeScript를 설치해보려고 한다.

---

사전에 준비해두어야 하는 것:

1. NPM (Node Package Manager)

그렇다. NPM만 있으면 TypeScript를 설치할 수 있다.

---

명령 프롬프트 또는 터미널을 열고 아래 명령어를 입력하면 설치가 끝난다.

< 현재 디렉토리(for 프로젝트)에 설치하는 경우 >
npm install typescript

< 전역(Global) 설치하는 경우 >
npm install -g typescript

 

타입스크립트 패키지가 설치되었고, 4.3.5 버전이 설치되었음을 알 수 있다.

 

그 후 아래 명령어를 통해 다시 설치가 정상적으로 되었는지 확인해보자!

tsc --version

 

잘 나온다!

 

참고로 tsc는 TypeScript Compiler의 약자라고 생각하면 된다.

TypeScript는 JavaScript와 달리 Compile을 해야하고, 컴파일에 성공하면 JavaScript(*.js) 파일을 출력한다.

---

샘플 TypeScript 코드를 사용하여 컴파일을 연습해보자.

 

아래의 코드를 작성한다.

interface User {
	name: string;
	age: number;
	site: object;
}

const user: User = {
	name: "포도빛",
	age: "20", // 오류가 발생해야 함!
	site: {
		blog: "https://phodobit.kr",
		github: "https://github.com/smartse0k",
	}
}

console.log(user);

 

그 후 code.ts 라는 파일명으로 저장한 다음, 아래의 명령어로 컴파일을 해보자.

tsc code.ts

 

그렇다면 오류가 발생할 것이다.

 

한 개의 오류를 찾았다고 나타난다.

 

user 객체는 User 인터페이스 속성을 따라야 하는데 인터페이스에서는 age가 number이길 바라지만 객체에서는 age에 string 값을 대입하였기 때문이다.

 

이것이 바로 "Type"을 중요시하는 TypeScript의 매력이다.

 

이제 오류를 수정하고, 다시 컴파일을 해보자!

// 이 코드를
age: "20",

// 이렇게 바꾸면 오류가 없을 것이다.
age: 20,

 

아무 메시지가 없다면 아무 문제 없이 컴파일 된 것이다.

 

그리고 컴파일의 결과로 나타난 JavaScript 파일(code.js)을 열어본다면....!!

var user = {
    name: "포도빛",
    age: 20,
    site: {
        blog: "https://phodobit.kr",
        github: "https://github.com/smartse0k"
    }
};
console.log(user);

 

이렇게 TypeScript 문법은 빠지고 순수 JavaScript 코드로 나타난다!

컴파일만 해보려는 예시 코드를 작성하다보니 큰 차이가 없다.

 

끝~!

---

나중에 알아보아야 할 것:

1. 컴파일 오류가 발생하였는데도 js 파일이 잘 출력되었다!

---

참고 자료:

1. TypeScript Download Official Site ( https://www.typescriptlang.org/download )
2. TypeScript Tutorial Official Site ( https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html )