Typescript
Typescript는 정적타입 검사자로 프로그램을 실행시키지 않으면서 코드의 오류를 검출한다. C#, Java같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가동성과 코드 품질 등을 제공할 수 있다. 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 쉽게 잡아낼 수 있다.
Javascript는 동적 프로그래밍 언어이고, 자바스크립트의 변수는 문자열, 숫자, 불리언 등 여러 타입의 값을 가질 수 있다. 유연하게 개발할 수 있는 환경을 제공하지만 런타임 환경에서 쉽게 에러가 난다.
그래서 자바스크립트에 강한 타입 시스템을 적용해 컴파일 환경에서 코드를 입력하는 동안 에러를 체크한다.
대학교 강의에서는 주로 정적인 언어(Java, C언어)를 사용해서 디버깅하기가 쉬웠다. 한 줄 한 줄 추적하면서 어디에서 에러가 났는지 찾는 것들이 그랬다. 그런데 자바스크립트는 console.log()를 사용하여 디버깅을 했었는데 타입스크립트를 사용하면 디버깅하기가 용이할 것 같다고 생각했다.
타입스크립트의 기능
- 크로스 플랫폼 지원 : 자바스크립트가 실행되는 모든 플랫폼에서 사용할 수 있다.
- 객체 지향 언어 : 클래스, 인터페이스, 모듈 등의 강력한 기능을 제공하며, 순수한 객체 지향 코드를 작성할 수 있다.
- 정적타입 : 정적 타입을 사용하기 때문에 코드를 입력하는 동안에 오류를 체크할 수 있다.(단 에디터 혹은 플러그인 필요)
- DOM 제어 : 자바스크립트와 같이 DOM을 제어해 요소를 추가하거나 삭제할 수 있다.
- 최신 ECMAScript 기능 지원 : ES6 이상의 최신 자바스크립트 문법을 손쉽게 지원
설치 및 사용법
컴파일러 설치
tsc 명령어를 사용하기 위해 컴파일러를 설치해야한다. 전역에 설치하거나 단일 프로젝트에서 설치하는 방법이 있다.
전역에 설치
npm install -g typescript tsc —version tsc ./src/index.ts //파일 경로
단일 프로젝트에서 설치
npm install -D typescript npx tsc —version npx tsc ./src/index.ts
Parcel 사용
타입스크립트를 로컬 환경에서 빠르게 테스트하려면 Parcel 번들러가 좋은 선택이다.
mkdir typescript-test // 폴더 생성
cd typescript-test //경로 이동
npm init -y // package.json 생성
npm install -D typescript parcel-bundler
tsconfig.json 파일을 생성하고 원하는 옵션 추가
{
"compilerOptions": {
"strict": true
},
"exclude": [
"node_modules"
]
}Main.ts 파일을 생성하고 원하는 타입스크립트 코드를 입력
//Main.ts
function add(a: number, b: number) {
return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3index.html 파일을 생성하고 .ts파일을 연결. Parcel 번들러가 빌드시 자동으로 타입스크립트를 컴파일한다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="main.ts"></script>
</body>
</html>마지막으로 다음과 같이 진입 파일로 index.html를 지정하고 Parcel 번들러로 빌드한다.
npx parcel index.html
TS Node 사용
TS Node를 사용해서도 타입스크립트를 테스트할 수 있다. 방법은 Parcel과 거의 동일하다.
mkdir typescript-test
Cd typescript-test
npm init -y
npm install -D typescript @types/node ts-nodetsconfig.json 파일을 생성하고 원하는 옵션 추가
{
"compilerOptions": {
"strict": true
},
"exclude": [
"node_modules"
]
}Main.ts 파일을 생성하고 원하는 타입스크립트 코드를 입력
//Main.ts
function add(a: number, b: number) {
return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3
console.log('TypeScript on NodeJS!');index.html 파일을 생성하고 .ts파일을 연결. Parcel 번들러가 빌드시 자동으로 타입스크립트를 컴파일한다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="main.ts"></script>
</body>
</html>여기서 @types/nodesms Node.js는 API를 위한 타입 선언 모듈
npx ts-node main.ts
