타입스크립트는 자바스크립트 기반 언어이기 때문에 문법에 있어서 기본적인 사용법들은 자바스크립트를 따라갑니다.

세미콜론

들어가기 전에 타입스크립트 관련 여러 자료들을 보면서 어떤 곳은 세미콜론을 붙이고, 어떤 곳은 세미콜론을 붙이지 않아서 혼란이 있었습니다. 과연 무엇이 정식 문법일까 했지만, 결론은 붙인다가 정식입니다. 당장 공식 문서에서도 붙이는 것을 정식 문법으로 두고 있습니다. 그래서 저는 타입스크립트 카테고리의 코드에 세미콜론을 붙이려고 합니다.

js와 ts의 공통점 (변수)

우선 자바스크립트와 타입스크립트 변수의 공통점부터 소개하고 넘어가겠습니다.

타입스크립트의 기본 타입은 자바스크립트의 기본 타입을 그대로 따라갑니다. 단, 타입 사용할 일이 많은 타입스크립트 특성상 전체 소문자로 제공하고있습니다.변수 선언시 let과 const를 이용합니다. var는 ts에서는 금지고, js에서는 비권장사항이기 때문에 이 부분도 공통점이라고 할 수 있습니다.

let과 const, var를 다시 짚고 넘어가자면 let은 블록 스코프를 갖고 재정의가 가능한 변수, const는 블록 스코프를 갖고 재정의가 불가능한 변수, var는 글로벌 스코프를 갖고 재정의가 가능한 변수입니다. 자세한 내용은 자바스크립트 포스팅들을 참조해주세요.

타입 주석과 타입 추론

지금부터는 타입스크립트만의 문법을 소개해드리겠습니다.

타입 주석

첫 번째는 소개할 타입스크립트 변수 문법은 타입 주석입니다. 타입 주석은 변수에 타입을 명시하는 것을 말합니다.

let 변수명: 타입;
const 변수명: 타입;

let bool: boolean = false;
let num: number = 0;
let str: string = '';
let obj: object  = {};

주의할 점은 자바스크립트에서는 숫자형으로 사용했던 변수에 문자열, 객체 등을 넣을 수 있었지만, 타입스크립트에서는 한 번 타입을 명시한 변수에는 해당 타입의 값만 들어갈 수 있습니다.

let num: number = 0;

num = 1; //가능
num = '1'; //불가능

타입 추론

타입 추론은 선언 시 타입 주석을 생략하고 대입 연산자를 통해 대입된 값에 따라 타입을 지정하는 것을 말합니다.

let a = false;  //boolean 타입
let b = 0;  //number 타입
let c = '';  //string 타입
let d = {};  //object 타입

마찬가지로 타입 추론으로 정해진 타입도 이후 다른 값을 대입할 때 타입 추론으로 결정된 변수 타입에 해당하는 값만 넣을 수 있습니다.

let num = 0;

num = 1; //가능
num = '1'; //불가능

any 타입

any는 타입스크립트만의 타입입니다. 용도는 자바스크립트와의 원활한 호환성을 위해 사용되는 타입입니다. any 타입은 특정 타입과 상관없이 어느 종류의 값이던 저장할 수 있습니다.

let x: any = 0;

x = '';
x = {};
x = false;
x = [];

undefined

타입스크립트의 undefined는 값이면서 타입입니다. 자바스크립트의 undefined는 값이기만 했었습니다. undefined 타입은 오직 undefined 값만을 가질 수 있습니다.

let x: undefined = undefined;