0521
타입스크립트의 정의와 왜 사용해야하는지, 그리고 타입스크립트를 사용하기 위한 기초 세팅을 다루는 글입니다.
1. 타입스크립트란?
자바스크립트의 '슈퍼셋(superset)' 언어
타입스크립트는 js를 기반으로 하되, 보다 더 확장된 프로그래밍 언어입니다.
따라서 타입스크립트의 그 뿌리에는 여전히 자바스크립트가 있다는 것입니다.
자바스크립트의 문법을 대부분 사용하며 거기에 몇 가지 기능이 추가된 버전입니다.
1.1. 타입스크립트, 왜 필요해?
타입스크립트는 자바스크립트의 주요 문법보다 확장된 문법을 갖습니다.
자바스크립트는 동적 타입 언어이고 타입스크립트는 정적 타입 언어입니다.
- 동적타입언어: 런타임시 변수의 타입이 결정되는 언어입니다.
코드를 실행할 때 알아서 변수 타입을 판단해 연산해주기 때문에 타입을 명시할 필요가 없습니다.
- 정적타입언어: 컴파일시 변수 타입이 결정되는 언어입니다.
컴파일 시 자료형이 맞지 않으면 컴파일 에러가 나기 때문에 작성자가 직접 타입을 명시해주어야 합니다.
좀 더 자세히 알아봅시다.
function add(a,b) {
return a + b;
}
const result = add(2,5);
console.log(result);자바스크립트 언어로 쓰여진 코드이며 실행할 경우 정수 타입의 7이 출력됩니다.
그렇다면 아래의 코드는 어떨까요?
function add(a,b) {
return a + b;
}
const result = add('2','5');
console.log(result);문자열값이 들어가도 출력값은 문자열인 25로 나오게 되며 문제없이 실행됩니다.
즉, 자바스크립트에서는
ab의 매개변수의 타입이 숫자라는 것을 누구도 알려주지 않습니다.
이 때 타입 스크립트가 필요해집니다!
function add(a: number,b: number) {
return a + b;
}
const result = add('2','5');
console.log(result);위의 코드는 a와 b에 number라는 타입을 명시한 타입스크립트 코드입니다.
a와 b의 타입이 숫자라는 것을 안 타입스크립트는 파라미터값을 문자열로 건네준 const result = add('2','5');에서 오류를 발생시키게 됩니다.
이렇게 타입스크립트를 사용하면 코드를 작성할 때 바로 오류를 발견할 수 있습니다.
2. 타입스크립트 사용환경 구축
타입스크립트의 여러 자료형들에 대해 알아보기 전 타입스크립트 실습을 할 수 있는 환경을 구축해보겠습니다.
2.1. 타입스크립트 설치
node.js가 설치되어 있다는 가정 하에 진행하겠습니다.
만약 node.js가 설치되어 있지 않는다면 node.js를 먼저 설치하고 오시길 바랍니다.
타입스크립트를 사용할 프로젝트 안의 터미널에서 아래의 명령어를 작성하면 typescript가 설치됩니다.
npm install typescript시스템 전체에서 사용할 수 있도록 설치하고 싶다면 아래의 명령어를 작성합니다.
npm install -g typescript하지만 보통은 특정 프로젝트 안에 설치하는 것으로도 충분합니다.
npm init -y빈 package.json파일을 생성하는 명령어입니다.
종속 라이브러리를 설치하는 데에 필요합니다.
2.2. 타입스크립트가 컴파일되는 과정
타입스크립트는 어떤 과정을 통해 컴파일이 될까요?
타입스크립트는 자바스크립트의 오프셋으로 자바스크립트의 문법에 타입 표기 구문이 추가된 것입니다.
여기서 중요한 것은 타입스크립트의 코드가 브라우저에서 실행되지 않는다는 점입니다.
따라서 타입스크립트를 자바스크립트 형태로 컴파일해야합니다.
타입스크립트가 컴파일이 되는 과정을 나열해봅시다.
- 컴파일이 진행되는 동안 타입스크립트에 있는 타입 표기가 모두 삭제됩니다.
- 자바스크립트는 타입 표기를 이해하지 못하기 때문입니다.
- 타입스크립트에서 컴파일을 진행하며 코드작성창에 표시된 오류 알림 외의 추가적인 오류까지 알려줍니다.
- 컴파일 단계에서는 코드를 작성하며 미처 발견하지 못했던 문제점들을 찾아 알려줍니다.
- 이렇게 컴파일된 코드는 자바스크립트로 브라우저에서 실행이 될 것입니다.
2.3. 명령어로 타입스크립트 컴파일 시작하기
만약 타입스크립트 구성 파일을 프로젝트 폴더에 추가하여 타입스크립트에게 컴파일할 파일을 알려주었다면 아래의 명령어를 입력하여 타입스크립트를 컴파일할 수 있습니다.
npx tsc2.3.1. 오류가 발생해요!
하지만 이 글에 명시된 명령어만 작성한 여러분들은 위의 명령어를 입력하면 에러가 날 것입니다.
구성파일이 없기 때문이죠.
구성파일이 없어도 컴파일할 파일을 지정해서 실행을 할 수 있습니다.
npx tsc 파일명.ts만약 코드에 오류가 있다면 컴파일 오류가 뜰 것이고 문제가 없다면 아무런 로그도 뜨지 않을 것입니다.
이렇게 성공하면 실행한파일명.js 파일이 생성될텐데 기본적으로 오류가 발생했다하더라도 컴파일은 완료되며 자바스크립트 파일도 제공합니다.
2.3.2. 생성된 js 파일
생성된 자바스크립트 파일은 실행한 타입스크립트 파일을 기본으로 합니다.
- 즉, 타입이 제거된 버전으로 작성이 된다는 것입니다.
- 또한
const가var로 변합니다.
컴파일한 타입스크립트 파일에 오류가 없다면 생성된 자바스크립트 파일을 index.html같은 html파일에 옮겨 브라우저에서 사용해봅시다.
저장 후 페이지를 로드하면 자바스크립트 파일이 잘 실행되는 것을 볼 수 있습니다!
