INTRO

자바스크립트에는 변수에 타입이 없다는 이유로 좋게 보면 자율성이 높은 언어이고,

다른 시선으로 본다면 효율성이 떨어지는 언어로 보일 수 있다.

이 단점을 타입스크립트가 보완해주는 역할을 한다.

타입스크립트의 등장은 자바스크립트를 달나라 우주 너머로 보내 버리는 발판이 되었다.

이에 자바스크립트 생태계는 점점 순수 자바스크립트에서 타입스크립트의 사용을 권장(?)하는 추세이다.

MAIN

먼저, 자바스크립트에서의 변수를 선언하는 방법을 살펴보자.

var str = 'hello';

자바스크립트에서는 다음과 같이 변수 선언 키워드 + 변수명 = 값의 형태로 이루어져 있다.

위 예시의 경우에서 값을 문자열 형태로 넣어 주었지만 str이라는 변수에는 어떤 타입의 값이 들어가도 문제가 되지 않는다.

다음으로 타입스크립트에서의 변수를 선언하는 방법을 살펴보겠다.

var str: string = 'hello';

자바스크립트와 달리 타입스크립트에서는 변수 선언 키워드 + 변수명 : 타입 = 값의 형태로 이루어져 있다.

자바스크립트에서는 str이라는 변수에 어떤 타입이 들어가도 문제가 되지 않았지만, 타입스크립트에서는 string 타입, 즉 문자열 타입 이외의 값이 들어오게 되면 오류가 발생한다.

문자열 타입말고 다른 타입들의 변수 선언 방법도 이와 유사하다.

• 숫자 타입

var num: number = 10;

응용

배열과 객체의 타입 선언은 조금 어려울 수 있다.

먼저, 배열 타입의 변수 선언 방법을 살펴 보겠다.

var arr: Array<number> = [1, 2, 3];

배열 타입의 선언은 먼저 해당 변수가 Array 타입이라는 것을 명시해주고 배열 안의 요소들의 타입도 정의를 해주는 모습을 볼 수 있다. <number>라는 것은 배열 안의 요소들의 타입이 숫자 타입이라는 것을 나타낸다.

배열 요소의 타입이 문자 형태인 경우에도 이와 마찬가지로 명시해주면 된다.

var player: Array<string> = ['SON', 'MESSI', 'KDB', 'SUJI'];

만약, 정의해준 요소의 타입과 다른 타입이 배열에 들어가게 된다면 오류가 발생하니 주의하자.

다음으로 객체의 타입 정의를 살펴보겠다.

// TS 객체
let obj: object = {};

let sonny: object = {
  name: 'SON',
  age: 28
}

let messi: {name: string, age: number} = {
  name: 'MESSI',
  age: 33
}

객체에서의 타입 정의는 배열과 크게 다르지 않다.

배열과 마찬가지로 객체 안의 속성의 value 타입이 정의한 타입과 다른 경우에 오류가 발생한다.

튜플

타입스크립트에는 튜플이라는 개념이 존재한다.

이는 배열의 특정 인덱스의 타입을 정의할 때 사용한다.

var address: [string, number] = ['gangnam', 'pangyo'];
var address: [string, number] = ['gangnam', 10];

address 라는 배열 타입 변수의 요소를 0번 인덱스는 string 타입으로 1번 인덱스는 number 타입으로 정의 해주었다.

첫번째 경우에는 1번 인덱스의 요소가 number 타입이 아니기 때문에 오류가 발생하지만

두번째 경우에는 정의한 타입대로 각 요소가 선언되었기 때문에 정상적으로 작동한다.

지금까지 타입스크립트의 기본적인 타입에 대해서 알아보았는데

앞으로는 변화해 가는 자바스크립트의 생태계의 흐름에 맞춰서 타입스크립트에 대한 글도 꾸준히 업데이트 하자!