타입스크립트를 사용하는 이유와 설치 방법

타입스크립트를 사용하는 이유와 설치 방법

타입스크립트란

타입스크립트는 자바스크립트를 기반으로 하되 보다 더 확장된 프로그래밍 언어인 superset 언어이다.

자바스크립트의 기본적인 문법들과 if 문, for 반복문, 객체 사용법 등을 그대로 사용한다.

타입스크립트는 자바스크립트 문법에 몇 가지 기능을 추가한 것이고 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다.

가장 중요한 건 정적 타입(statically Typed)의 특징을 갖는다는 것이고 ‘타입스크립트’라는 이름도 여기에서 유래했다.

정적 타입 기능이 추가된 이유는 자바스크립트가 원래 동적 타입(dynamically typed) 언어이기 때문이다.

function add(a, b) {
	return a + b;
}

const result = add(1, 2);

console.log(result);

페이지를 로드하고 개발자 도구를 열어보면 ‘3’이라는 숫자를 볼 수 있다.

자바스크립트에는 자료형(Type)이 있고 자바스크립트도 타입의 개념을 알고 있다.

여기서 제가 전달한 두 개의 값은 숫자(number)형이고 자바스크립트도 이를 자체적으로 알고 있다.

다만 자바스크립트가 동적 타입 언어이기 때문에 함수 선언 시점에는 자료형을 특정 짓지 않고 두 개의 매개 변수를 받는다는 것만 알고 있다.

function add(a, b) {
	return a + b;
}

const result = add('1,' '2');

console.log(result);

하지만 이 코드는 문자열을 사용해도 동작한다.

페이지를 로드하면, 이번에는 ‘12’가 나타난다.

이 경우에는 매개 변수로 두 개의 문자열을 받았기 때문에 더하기(+) 연산자가 두 매개 변수를 더하는 연산을 수행하는 대신 문자열을 연결하는 동작을 수행한다.

대규모 프로젝트라면 소스 파일도 아주 많을 거고 많은 사람들이 동일한 코드 베이스에서 작업할 거기 때문에 함수나 객체를 의도치 않은 방식으로 사용하는 일이 발생하게 될 것이다.

이럴 때 타입 표기(Type Annotation)를 추가하는 타입스크립트가 도움이 된다.

이를 통해 비슷한 종류의 오류와 의도치 않은 방식의 함수 사용을 코드를 실행하지 않고도 잡아낼 수 있다.

런타임에 오류의 원인을 찾을 필요 없이 코드를 작성할 때 바로 오류가 표시때문에 더 나은 코드를 작성하는 데 도움이 될 것이다.

타입스크립트 설치 방법

먼저 타입스크릅트의 공식 사이트인 typescriptlang.org에서 타입스크립트를 설치한다.

npm install typescript

이 명령어를 실행하면 특정 프로젝트에 한해서 타입스크립트가 설치된다.

npm install -g typescript

시스템 전체에서 사용할 수 있도록 설치하고 싶다면 g 옵션을 넣어 ‘npm install -g typescript’를 실행한다.

설치가 완료되면 타입스크립트 컴파일러를 사용할 수 있는데, 이것은 아주 중요한 기능이다.

타입스크립트 코드가 브라우저에서 실행되지 않고 브라우저에서 타입스크립트 코드를 실행하려고 해도 실행되지않는다.

그래서 타입스크립트를 자바스크립트 형태로 컴파일해야 하고 컴파일이 진행되는 동안 타입 표기는 모두 삭제된다.

컴파일을 진행하면서 코드 작성창에 표시된 오류 알림 외에 추가적 오류들을 찾아 알려줄 것이다.

npx tsc

컴파일러를 사용하려면 ‘npx tsc’ 명령어를 실행해야 하고 그냥 실행하면 실행되지 않는데 타입스크립트 구성 파일을 프로젝트 폴더에 추가해 타입스크립트에게 컴파일할 파일을 알려줘야 하기 때문이다.

npx tsc file-name.ts

컴파일할 파일을 직접 지정하여 실행할 수도 있다.

오류가 있다면 컴파일 과정에서 발견 할 것이고 컴파일 단계에 오류가 있더라도 컴파일은 완료되며 자바스크립트 파일도 제공한다.