[TS] 타입스크립트 설치부터 데이터 타입 명시까지

 

🌱 타입스크립트 노트 깃헙

노트: src - index.ts

 

파이널 프로젝트를 개발하면서, 유달리 에러가 여러 번 발생했던 경우가 있었다. 바로 서버에서 가져온 유저 데이터를 기반으로 To-do list를 렌더링해야할 때 자꾸 우리 애가 not a function 이라던가 cannot get 0 of undefined라던가 에러가 뜨는 것이다. 분명히 코드 상으로 보았을 때 우리 애는 not a function일리가 없고 undefined 일리가 없는데 도대체 왜 이러나 싶었는데... 두둥

 

문제의 원인은 서버에서 받는 데이터의 데이터 타입과 클라이언트 쪽에서 작성한 데이터의 데이터 타입이 서로 달라서, 내가 찾는 프로퍼티가 없다거나 인덱스가 없다거나 하던 일이 계속 발생했던 것이다. 파이널 프로젝트 이전에 했던 작은 토이 프로젝트들은 아무래도 규모도 작고 받아오는 데이터도 한정적이여서 이와 같은 이슈가 발생했던 적이 없었다. 백엔드 담당 팀원과 함께 테스팅을 해가며 에러는 금방 잡았지만, 이때 데이터 타입 지정의 필요성을 처음으로 느꼈고 타입스크립트를 꼭 배워야겠다는 생각을 하게 되었다. 그래서 코드스테이츠 수료를 한지 딱 일주일이 되는 이 시점, 새롭게 시작한 타입스크립트 공부를 복습하기 위해 기본 설치부터 기록한 내용을 공유하고자 한다.

 

 

 

1. 기본 세팅

타입스크립트 설치

npm install -g typescript

 

설치가 제대로 되었는지 확인하기 위해 버전 체크 한번!

tsc --v

 

파일명: .ts

타입스크립트 파일은 .ts로 만들어준다.

예: app.ts

 

 

컴파일하기

타입스크립트는 자바스크립트의 superset임과 동시에, 컴파일러이기도 하다. 그래서 ts 파일로 작성한 다음에 자바스크립트 파일로 컴파일을 해주어야 한다.

 

tsc app.ts

 

명령어 tsc는 말그대로 TypeScript Compile이다. 요 명령어를 실행하면, 디렉토리에 app.ts를 자바스크립트로 컴파일한 app.js 파일이 생성된다.

 

그런데, 그냥 이렇게 tsc 컴파일만 하면 app.ts 파일의 코드를 변경해서 업데이트 사항이 생겼을 때 자동으로 app.js에 반영이 되지 않는다. 그걸 해주기 위해선 명령어에 -w를 추가해주어야 한다. -w를 추가하면 watch mode에 들어가게 되고, 파일에 변경 사항이 생겼을 때 (=코드 바꾸고 저장했을 때) 자동으로 그걸 감지해서 app.js에 반영시켜준다.

 

tsc -w app.ts

 

터미널에 작성하면, 아래와 같이 watch mode에서 컴파일링을 시작한다는 안내문구가 나온다.

watch mode 시작의 알림

 

watch mode가 되어 있는 상태에서 ts파일에 변경 사항이 생겼을 경우 나오는 문구.

 

 

 

 

tsconfig.json

tsc 코맨드를 사용하여 타입스크립트 파일을 자바스크립트 파일로 컴파일하면, 변수 선언을 할 때 var 키워드가 사용되는 것을 볼 수 있다. 이는 타입스크립트의 기본 컴파일링 설정이 let과 const가 도입되기 이전인 es5로 되어있기 때문이다. 이를 고쳐주기 위해선 tsconfig.json 파일에서 수정을 해주어야 한다. 

tsc --init

 

터미널에 tsc --init를 입력하면 기본 tsconfig.json 파일이 생성된다. 여기서 compilerOptions의 target을 기존의 "es5"에서 "es6"로 바꿔주면 된다. 그리고 tsc 코맨드를 다시 돌리면, 기존의 모든 ts 컴파일링 결과물들이 es6로 업그레이드되는 것을 볼 수 있다.

 

 

2. 타입스크립트: 데이터 타입을 유의하자!

타입스크립트는 정적 타입핑 (Static typing)을 자바스크립트에 제공한다. 정적 타이핑이란, 데이터 타입을 특정하고, 그 특정된 타입만이 할당 또는 반환되어야 한다는 규칙을 뜻한다.이를 위해 타입스크립트는 크게 두 가지 기능을 제공하는데, 바로 타입 명시(type annotations)와 타입 추론(type inference)이다.

 

 

(1) 타입 명시 (Type annotations)

변수를 선언할 때 변수 값의 데이터 타입을 미리 지정해주는 것을 뜻한다. 변수를 지정해주는 것은 매우 간단하다. 변수명 뒤에 : 을 붙이고, 그 다음에 데이터 타입을 명시하면 된다. 그리고 나서 데이터 할당을 위해 =과 주고 싶은 값을 넣어준다.

 

const IamString: string = "Hello from the other side"
const IamNumber: number = 123456789
const IamBoolean: boolean = true

 

 

함수의 인자와 리턴값에도 타입을 명시할 수 있다.

 

 

// doSomething 함수는 인자로 데이터 타입이 스트링인 action 인자를 받는다

function doSomething (action: string) {
	// something going on
}


// 리턴값에 타입 명시하기 

function doSomething (action: string): string {
	// something going on
    ...
    
    return 'Done!'
}

// 만약 아무것도 반환하지 않는 함수일 경우엔 void라고 작성한다!

function doSomething (action: string): void {
	// something going on
    ...
    ...
    // 리턴 업슈
}

 

 

객체에도 타입을 지정해줄 수 있다. 객체는 그 안의 프로퍼티 & 메소드 구조에 따라 타입을 지정하는 것도 가능하다.

 

 

//함수 리턴값이 객체인 경우
function createCharacter (name: string, job: string): {
  id: number;
  name: string;
  job: string;
  level: number;
  noob: boolean;
  walk: (position: number) => void;
  chat: (message: string) => string;
} {
  ...
    
  return {...}
}

// 함수 인자가 객체인 경우
function sayHello(person: { name: string; age: number }) {
  return `Hello ${person.name}`
}

 

그런데, 위와 같이 함수의 리턴값인 객체의 프로퍼티 구조에 따라 명시를 해주면, 코드의 가독성이 떨어지게 된다. 이때 사용할 수 있는 것이 바로 interface이다. interface를 만들어서 함수의 리턴값으로 사용할 경우 interface는 마치 데이터 타입의 한 종류처럼 취급된다. 그렇기 때문에 만약 해당 함수의 리턴값이 지정된 인터페이스가 아닌 다른 데이터 타입이라면 에러가 발생하게 된다.

 

// 예제 1: 함수 리턴값이 객체인 경우

interface Character {
  id: number;
  name: string;
  job: string;
  level: number;
  noob: boolean;
  walk: (position: number) => void;
  chat: (message: string) => string;
}

function createCharacter (name: string, job: string): Character {
  ...
    
  return {...}
}


// 예제 2 :함수 인자가 객체인 경우

interface Person {
  name: string;
  age: number;
}

function sayHello(person: Person) {
  return `Hello ${person.name}`
}

 

또한, 만약에 반환되는 객체의 인터페이스에 지정된 프로퍼티들 중에서 리턴값에 포함되지 않은 것이 있다면, 그 누락된 프로퍼티가 무엇인지 에러 메시지가 친절히 알려준다.

 

그런데 만약, 리턴값에서 특정 프로퍼티 하나만 빼고 나오는게 의도한 것이었다면?! 그럴땐 인터페이스를 작성할 때 해당 프로퍼티의 key 옆에 ?를 살포시 붙여주면 된다. ?를 붙여주면 해당 프로퍼티는 Optional한 프로퍼티로 변경되며, 리턴값이 해당 인퍼페이스로 지정된 함수의 리턴값에 그 프로퍼티가 추가되어 있지 않더라도 에러가 발생하지 않는다.

 

interface SurveyAnswers {
  personalInfo: boolean;
  marketingContact?: boolean;
}

 

< 타입스크립트의 여러가지 Utility Types >

링크: https://www.typescriptlang.org/docs/handbook/utility-types.html#readonlytype

 

 

(2) 타입 추론 (Type inference)

타입 추론이란, 변수를 만들 때 해당 변수의 데이터 타입이 명시되어 있지 않은 경우, 처음 할당된 값의 타입을 해당 변수가 가져야할 타입으로 추론하여 지정하는 기능을 뜻한다.

 

예를 들어, 아래와 같이 일반 자바스크립트에서 사용하는 것 처럼 let number = 777로 number라는 변수에 숫자 777을 할당했다면, 다시 이 number라는 변수에 넘버 타입이 아닌 다른 데이터 타입은 할당될 수 없다. 타입 추론은 객체와 함수에도 모두 적용된다.

 

// 변수타입 지정 없이 선언&할당된 number.
let number = 772

// 일반 자바스크립트에선 아래 코드가 가능하다.
// 하지만 타입스크립트에선 에러가 난다.
number = '칠칠이'

// 아래와 같이 같은 넘버 데이터 타입으로 변경하는 것은 가능하다
number = 773

 

넘버 타입에 스트링 타입을 할당할 수 없다는 에러 메시지