[TypeScript] 타입스크립트 시작하기

Typescript 설치

TypeScript설치및 환경설정

Typescript 컴파일

아래 명령어를 통해 Typescript를 컴파일하고 javascript 형태의 결과를 얻을 수 있다.

tsc [File].ts

Javascript 실행

작성 한 javascript 파일을 실행하고 결과를 확인할 수 있는 방법은 대표적으로 두 가지가 있다.

하나는 브라우저에서 해당 JS파일을 실행하는 방법과 서버에서 node를 이용하여 실행하는 방법이 있는데 나는 Linux 환경에서 공부를 하고 있으니 node를 이용하여 결과를 확인해 보겠다.

node를 이용하여 결과를 확인하는 명령어는 아래와 같다.

node [File].js

---

Typescript의 특징

컴파일 단계에서 오류를 발견할 수 있다.

javascript는 컴파일 단계 없이 브라우저에서 바로 실행되기 때문에 실행 전까지 코드의 오류를 발견할 수 없는데 Typescript는 컴파일 과정을 통해 문법상의 오류를 발견할 수 있다.

변수의 타입을 미리 정할 수 있다.

javascript의 변수는 모두 any 타입을 갖고 어떤 데이터든 변수에 담을 수 있지만, Typescript에서는 변수에 타입을 지정하고 해당 타입에 맞는 데이터만 담을 수 있다.

var name : string;
var age : number;
var isStudent : boolean;

name = "Kent";
age = 23;
isStudent = "YES!!"; // boolean 타입 변수에 string을 입력하여 오류가 발생한다.

함수의 인자를 선택 값으로 받을 수 있다.

기존 javascript에서 함수의 인자를 선택 값으로 받기 위해서는 아래와 같은 형태로 사용했다.

function Hello(name, age, gender="") {
    // code
}

하지만 Typescript에서는 Optional 인자에 대한 처리가 가능하며 Optional로 받는 인자의 이름 뒤에 ? 를 붙이면 된다.

/*
@params name    string    (required)
@params age     number    (required)
@params gender  any       (optional)
*/
function Hello(name:string, age:number, gender?) {
    // code
    if (gender !== undefined) {
    	// gender가 인자로 주어 진 경우
    }
}

함수의 반환 타입을 정할 수 있다.

함수의 반환 타입을 결정할 때는 인자 뒤에 :type 을 입력하면 된다. 입력하지 않으면 기본으로 any 타입으로 결정된다. 만약 반환 타입을 number로 지정하고 아무것도 반환하지 않으면 오류가 발생한다.

/*
@params name    string    (required)
@params age     number    (required)
@params gender  any       (optional)
@return void
*/
function Hello(name:string, age:number, gender?):void {
    // code
}

끝으로

대충 훑어본 타입스크립트는 자바스크립트와 비교했을 때 장점이 굉장히 많은 것 같다. 타입스크립트 공부를 하며, 자바스크립트와 비교되는 부분을 정리하고 앞으로의 프로젝트에는 자바스크립트 대신 타입스크립트를 사용해 보아야겠다.