TypeScript 파일(.ts)은 브라우저에서 동작하지 않으므로 TypeScript 컴파일러를 이용해 자바스크립트 파일로 변환해야 합니다. 이를 컴파일 또는 트랜스파일링이라 합니다.
이렇게 타입스크립트 코드를 자바스크립트로 코드로 변환할 때 필요한 도구가 타입스크립트 컴파일러
컴파일 개념
사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정
ex) 소스코드 → 바이너리 코드으로 변환
트랜스 파일러(Transplier)란?
한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것
TypeScript 컴파일러 설치 및 사용법
Node.js를 설치하면 npm도 같이 설치됩니다.
다음과 같이 터미널(윈도우의 경우 커맨드창)에서 npm을 사용하여 TypeScript를 전역에 설치합니다.
타입스크립트 컴파일러는 자바스크립트의 패키지 매니저인 npm을 이용하면 터미널 상에서 손쉽게 설치할 수 있습니다.
$ npm install -g typescript
TypeScript 컴파일러(tsc)는 TypeScript 파일(.ts)을 자바스크립트 파일로 트랜스파일링합니다.
트랜스파일링을 실행해보기 위해 아래와 같은 파일을 작성
// person.ts
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
sayHello() {
return "Hello, " + this.name;
}
}
const person = new Person('Lee');
console.log(person.sayHello());
typeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있습니다.
타입스크립트의 컴파일러는 단순히 타입스트립트 코드를 자바스크립트로 변환해줄 뿐만 아니라 정적 타입 검사를 통해서 코드가 실행될 때 발생할 수 있는 문제를 사전에 알려줍니다.
tsc person -t ES2015// person.js
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return "Hello, " + this.name;
}
}
const person = new Person('Lee');
console.log(person.sayHello());
let a =1004;
a = "Zard";
//a에 숫자를 받았으나 문자를 받아버림. javascript는 이를 분간해내지 못함이럴 경우 a에 숫자를 받았으나 문자를 받아버리게 되는데 javascript는 이를 분간해내지 못합니다.
fuction myF(num:number, st:string){
~~~~~~~
}
myF("1004","Zard") XXXXXXXXXXXXXXXXXXX 이를 보완한 것이 Typescript
TypeScript 확장자: .ts
a.ts => 컴파일 ==> a.js
보통 개발은 타입스크립트로 개발
쓰는건 자바스크립트로 사용합니다.
tsc -init
-w
tsconfig.json이란?
tsconfig.json 디렉토리에 파일이 있다는 것은 디렉토리가 TypeScript 프로젝트의 루트임을 나타냅니다.
이 tsconfig.json파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.
tsc -w : 자동으로 컴파일을 해줌
<과거>
string : foo = 'hello' 자료형이 먼저 나옴
<현대>
let foo: string = 'hello'; 요즘에는 변수 다음 자료형이 나옴 변/자/값
결론: typescript를 활용하여 개발하는 것은 매우 유익하며 많은 에러를 막습니다.