타입스크립트 베이스캠프

타입스크립트 시작하기

1. 타입스크립트 시작하기

타입스크립트를 왜 사용해야 하는지에 대해서 간략하게 알아보았습니다. 이번에는 타입스크립트를 직접 작성해보며 알아보겠습니다. 위니브에서 서비스하고 있는 '위니브 타입스크립트'에서 설치없이 사용해 볼 수 있습니다.

폰트 크기는 오른쪽 상단에 각각 +와 - 버튼을 활용하여 editor와 console의 폰트 크기를 조절할 수 있습니다. Ctrl + Enter로 실행할 수 있습니다. 우측상단 토글을 사용하여 화이트모드와 다크모드를 선택할 수 있습니다.

간단한 코드가 작성이 되어있습니다. Ctrl + Enter을 눌러서 실행해보겠습니다. 실행 결과는 아래와 같습니다.

log, for, if, async 등 간단한 단축키가 설정되어 있습니다.

1.1 의도치 않은 타입 변경

타입스크립트에서는 의도치 않은 타입 변경을 방지할 수 있습니다. 플레이그라운드에서 아래와 같은 코드를 작성하고 실행해보겠습니다.

let helloString = 'Hello World!';
console.log(helloString);
 
helloString = 'Hello, World!';
console.log(helloString);

let helloString = 'Hello World!';
console.log(helloString);
 
helloString = 'Hello, World!';
console.log(helloString);

helloString이라는 변수를 하나 만들어주었고, console.log를 통해 로그를 출력해주었습니다. 개발자가 변수명을 봤을 때, 해당 변수를 문자열로 유추할 수 있을 것입니다.

자바스크립트에서는 해당 변수에 숫자든, 함수든 어떤 타입의 값이든 넣을 수 있습니다. 변수 이름에 포함되어 있는 String이라는 이름을 통해 변수의 타입이 문자열이라는 것을 예측할 수 있지만, 실제로는 문자열이 아니라 다른 값들이 들어가 있지 않을 것이라는 보장이 없습니다.

예를 들면, 아래와 같은 JavaScript 코드는 애러없이 실행됩니다.

let helloString = 'Hello World!';
console.log(helloString); //"Hello World"출력
 
helloString = 1;
console.log(helloString); // 1 출력

let helloString = 'Hello World!';
console.log(helloString); //"Hello World"출력
 
helloString = 1;
console.log(helloString); // 1 출력

반면, 타입스크립트에서는 위 코드가 어떻게 동작하는지 살펴보도록 하겠습니다.

마우스로 커서를 올려보면 아래와 같이 Type 'number' is not assignable to type 'string'라는 문구가 뜨며, helloString이 문자열임을 한번 더 알려줍니다.

타입스크립트에서 특정 타입으로 만들어진 변수에는 다른 타입을 할당하지 못하게 됩니다. 이번 예시를 보면 처음 생성될 때 문자열로 만들어진 변수 helloString은 "문자열"로 타입이 자동으로 지정됩니다. 여기까지는 자바스크립트와 같습니다. 하지만 타입스크립트에서는 이 타입이 한번 정해지면 변하지 않습니다.

이렇게 한번 타입이 정해지면 타입이 변하지 않는 형태를 정적타입 이라고 합니다. 반대로 자바스크립트에서 변수의 값을 타입과 상관 없이 할당하며, 변수의 타입이 값에 맞춰 변하는 형태를 동적타입이라고 합니다.

이로써 해당 변수를 사용하는 개발자는 예상치 못한 타입으로 변경되는 케이스를 줄일 수 있습니다. 또한 해당 변수에 대한 올바른 사용법을 알게 됩니다. 처음 살펴봤던 장점들은 이러한 정적타입 언어의 장점에서 오는 것으로 볼 수 있습니다.

1.2 타입스크립트의 타입 명시

처음 선언할 때부터 타입을 명시해주는 것이 타입스크립트의 장점 중 하나입니다. 이번에는 변수를 할당할 때부터 이 변수가 어떠한 타입인지를 명시해보겠습니다.

이렇게 타입을 명시함으로 해당 변수에 사용법을 명확하게 알 수 있습니다. 결과는 같습니다. 마우스를 오버하여 해당 변수가 어떤 타입인지 확인해보고, Run을 누르기 전 'Hello World!' 대신 숫자 1을 할당해보세요. 다시 변수에 마우스를 오버했을 때에 뜨는 메시지도 확인해보세요.

let helloString: string = 'Hello World!';
console.log(helloString);

let helloString: string = 'Hello World!';
console.log(helloString);