타입 스크립트 기초 및 사용해보기

설치

먼저 프로젝트를 생성하기 앞서 Node를 설치해주어야합니다. 그리고 본인이 원하는 위치에 프로젝트를 만들어주고 TypeScript를 설치해줍니다.

저는 global로 설치하였습니다.
npm install -g typescript
TypeScript 설치 문서 보기

터미널에서 tsc -v를 입력해서 버전확인이 된다면 설치 완료!

TypeScript 컴파일 하기

작업하고 있는 ts 파일을 컴파일 하기 위해서는 터미널에서 tsc (파일명).ts 명령어를 실행해주면 js로 컴파일하여 파일을 생성해줍니다. (ts파일에서 오류가 발생하더라도 컴파일은 정상적으로 이루어집니다.)

js 파일을 실행시켜보고 싶다면 터미널에서 node (파일명).js를 실행시켜주세요.

타입 사용해보기.

자바스크립트를 사용하는것과 비슷 하지만,TS는 Type Annotaion을 붙여서 타입을 지정해줄 수 있습니다.
변수 뒤에 콜론과 type을 붙여주면 됩니다.
: string
: number
: boolean

간단한 예제

.ts 확장자로 파일을 만들어줍니다. 예) (파일명).ts

let movieTitle: string = "배트맨";
movieTitle = "슈퍼맨";
movieTitle = 9; // TS 오류 발생
movieTitle.toUpperCase();

movieTitle을 string 타입으로 지정해주었기 때문에 movieTitle에 number 타입인 9를 할당해주면 TS는 에러를 발생시킵니다.

number나 boolean도 한번 작성해보시 바랍니다.

any 타입

특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다.

주의해야할 점은 타입 검사를 하지 않기 때문에 TS를 사용하는 목적이 없어질 수 있다는 것입니다.

어떠한 값이나 종류의 데이터가 어디에 저장될지 알 수 없는 경우에 대비하거나 런타임 검사를 할 때 사용할 수 있지만 그 외의 경우에는 any가 권장되지 않습니다.

암묵적 any 타입 할당

암묵적으로 any 타입이 지정되어서 타입 검사를 하지 못하는 경우가 있습니다.

예를 들어 보겠습니다.

const movies = ["아바타", "배트맨", "슈퍼맨"];
// let foundMovie: string;
let foundMovie;

for (let movie of movies) {
  if (movie === "배트맨") {
    foundMovie = "배트맨";
  }
}

// foundMovie가 암묵적으로 any가 때문에 TS가 에러를 발생시키지 않음.
foundMovie();
foundMovie = 1;
foundMovie.asdasd();

foundMovie에 string 타입인 "배트맨"을 할당 했으므로 해당 변수는 string 타입일 것이라고 생각할 수 있지만, 실제로는 any 타입이기때문에 주의가 필요합니다.

이럴때는
let foundMovie;
위와 같이단순히 변수를 설정하기보다는

let foundMovie: string;
타입지정을 통해서 TS가 타입 오류를 감지하도록 하는게 좋습니다.