[javascript] 타입스크립트가 뭘까요??? (Typescript 시작하기)

자바스크립트의 변수?

자바스크립트의 변수 선언방법은 다른 언어들과 차이가 많다. 이에 어떤 문제점이 있고, 어떻게 타입스크립트가 나오게 되었는지 알아보자.

▶️ var, let, const ?

let variable1 = 10;
var variable2 = true;
const variable3 = "Hello";

이렇게 3개의 예약어를 변수 앞에 붙여 선언할 수 있는데, 이들은 각각 차이가 있으나, 여기서는 이들의 관계보단 이 예약어로 변수를 선언했을때 나타나는 공통적인 특징에 대해서 알아보자.

아무튼 다른 언어를 배워봤다면 여기서 약간 이상함을 느낄 것이다.

아니 왜 변수형을 지정하지 않지?

바로 그거다. 자바스크립트에서는 변수를 선언할 때 변수의 타입(type)을 붙이지 않는다!!

▶️ 암시적 형변환

암시적 형변환이란, 자바스크립트엔진이 코드의 문맥에 따라 변수의 형을 암시적으로 자동변환하는 것을 의미한다.

위 코드에서 variable1에는 정수 10 이 들어갔으니 자바스크립트 엔진은

" variable1 에는 정수값 10 이 들어갔으니, int(정수)형이겠군 "


이런식으로 인식한다는 것이다.

따라서 variable2, variable3 에는 각각 boolean, string 형이 부여된다는 것이다. 물론 암시적 형변환이 자바스크립트에만 있는것은 아니다. 하지만 암시적 형변환을 기본적인 변수 선언 방법으로 사용한다는 점에서 문제가 발생한다는 것이다.

근데 이러면 좋은거 아니에요? 편하잖아요.

물론 그렇게 생각할 수도 있다. 사실 암시적 형변환은 자바스크립트가 굉장히 유연하게 동작하도록 도와주기도 하고, 타입에 관대하게 변하게 해준다.

그리고 사실 이건 코드를 짤 때 꽤나 편하니까. 그건 맞다.

하지만 때론 이런 기능이 우리가 의도하지 않은 대로 동작할 수도 있다.

▶️ 암시적 형변환의 오류

우리가 정수형만 넣고 싶은 변수가 있을 수 있다. 아래 코드의 variable1 변수에는 정수만 넣어야 한다고 가정하자.

let variable1 = 2;
variable1 = true; //에러 안남
variable1 = "no Error"; //에러 안남

하지만 variable1 에는 문자를 넣어도, 뭘 넣어도 에러가 안난다. 오히려 넣은 값으로 타입이 바뀌기까지 한다.

이건 좀... 아니긴 하네요

이렇게 되면 안된다는 것이다!!! 이것이 암시적 형변환의 가장 큰 문제점이다!!!

여기까지 왔다면, 한번 지정한 타입을 변경하지 않고, 만약 다른 값을 넣었을 경우에는 에러가 나게 하고 싶어질 것이다.

그래서 나온것이 뭐다??

대답.

타입스크립트 !

ㅇㅋ. ㄱㄱ

타입스크립트

빌드업도 많았고 글도 길었다. 이제 타입스크립트에 대해서 본격적으로 들어가보자.

▶️ 왜 등장했을까

앞에서 말했다시피 타입스크립트가 등장한 이유는 다 알고 있을거라 믿겠다. 일단 타입스크립트의 기본부터 들어가보자.

▶️ 타입스크립트의 기본

타입스크립트는 기본적으로 자바스크립트의 모든 문법을 거의 그대로 가져다 사용한다. 타입스크립트를 독립된 언어라기보단 자바스크립트의 에러를 미연에 방지해주는 장치와 같다고 생각하는 시선도 있다.

어쨌든, 타입스크립트는 변수의 형을 지정해주는것 부터 시작된다. 변수의 형은 대표적으로 아래와 같이 지정할 수 있다.

let variable1: string = "type: string";

이렇게 변수를 선언하게 되면,

"앞으로 variable1 에는 string 문자열만 들어올거에요".

라고 컴파일러에게 말해주는것과 같다. 만약 variable1 에 string 형이 아닌 다른 값을 넣게 된다면, TypeError 라는 에러가 로그에 시전된다.

타입스크립트는 ReactJs, NextJs, NestJs 등 자바스크립트 기반 라이브러리에서 많이 사용된다. 이 글에서는 많이 알고, 많이 사용하는 ReactJs 라이브러리를 대상으로 예제코드를 작성하겠다.

▶️ 타입스크립트 프로젝트 생성

자, 그럼 이제 실제 파일에서 타입스크립트를 사용할 차례이다. 타입스크립트를 사용하려면 타입스크립트만의 전용 확장자 .ts 를 사용해야 한다.

어떻게 이런 파일로 변환하느냐. 이건 콘솔에 tsc 명령어를 입력해 해결할 수 있다. 만약 app.js 파일을 타입스크립트 파일로 변환하고 싶다면,

콘솔에 tsc app.js 하고 쳐보자. 파일의 확장자가 변환되고 그 파일에선 타입스크립트를 사용할 수 있게 된다!

이렇게 타입스크립트 프로젝트를 만들었다면, 이제부터 타입스크립트로 코딩을 시작해보자.