타입스크립트의 특징과 타입 명시

자바스크립트는 변수를 선언할 때 let, const, var 등으로 선언하고 별도로 타입은 지정해주지 않는다.

그렇기 때문에 변수들의 타입을 헷갈리기 쉬우며 의도치 않은 버그가 발생할 수 있다.

const a = 3;
const b = '5';
console.log(a*b);

// output: 15

숫자 타입의 3과 문자열 타입의 5를 곱했지만 에러가 발생하지 않고 15라는 결과가 출력된다.

지금은 별 문제가 아니라고 생각할 수 있지만, 큰 규모의 코드에서 이런 일이 발생한다면 원인을 찾기 매우 힘들 것이다.

 

타입스크립트

타입스크립트는 이름에서 알 수 있듯 자바스크립트에 "타입 선언 기능"을 추가한 언어이다.

타입스크립트는 자바스크립트를 포함하는 더 넓은 환경을 보유하고 있으며

타입스크립트 환경에서 자바스크립트는 동작 가능하고, 자바스크립트 환경에서 타입스크립트는 동작이 불가능하다.

위의 예제 코드를 타입스크립트에서 실행하면 다음과 같은 에러가 발생한다.

test.ts:3:17 - error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

3 console.log(a * b);
(산술 연산 오른쪽은 'any', 'number', 'bigint' 또는 열거형 형식이어야 합니다.ts(2363))

위와 같은 오류 메시지를 통해 의도치 않은 버그가 일어나는 것을 방지할 수 있다.

 

VSC에서 타입스크립트 실행하기

node-js만 설치하고 편리하게 사용할 수 있었던 js와는 달리, ts는 사용하기 위해 몇 가지 절차가 필요하다.

# Locally in your project.
npm install -D typescript
npm install -D ts-node

# Or globally with TypeScript.
npm install -g typescript
npm install -g ts-node

# Depending on configuration, you may also need these
npm install -D tslib @types/node

글로벌보다는 로컬로 설치하는 것을 추천하며, 이 경우 맨 위의 두 줄만 실행하면 된다.

 

// 로컬
npx tsc --init

// 글로벌
tsc --init

위 명령어를 실행하면 tsconfig.json이 생성되며 타입스크립트 기본 설정이 완료된다.

 

이제 test.ts와 같이 .ts로 끝나는 타입스크립트 파일을 생성한 뒤, 코드를 실행하면 되는데

npx ts-node ./test.ts

위와 같이 npx ts-node "파일경로"를 통해 실행하면 타입스크립트 파일을 실행할 수 있다.

---

tsc test.ts

또는 위와 같이 tsc "파일경로"를 통해 실행하면 타입스크립트 파일이 자바스크립트 파일로 생성되어 실행할 수 있다.

 

tsc -w test.js

하지만 수정사항이 생길 때마다 명령어를 실행하고 자바스크립트 파일로 바꾸고 실행하는 것은 번거로운 일이다.

위와 같이 -w 옵션(watch) 을 추가하면 자동으로 js파일이 ts파일의 변경사항에 맞게 업데이트된다.

 

타입스크립트 타입 추론 기능

const a: number = 3;
const b: number = 3;
console.log(a + b);

const c: string = "Hello";
console.log(c);

타입스크립트는 위와 같이 변수명에 ": 타입명"을 추가하여 변수의 타입을 명시한다.

하지만 자바스크립트처럼 타입명을 적지 않는다고 에러가 발생하는 것은 아니다.

이는 타입스크립트가 자바스크립트처럼 타입 추론 기능을 통해 변수의 타입을 자동으로 판단해주기 때문이다.

 

이런 기능은 코드를 간결하게 편리하게 작성하도록 만들어주지만 위에서 말했듯 의도치 않은 버그가 발생할 수 있기 때문에 타입은 명시하는 것이 좋다.

특히 타입 추론이 모호한 경우나 복잡한 경우는 더더욱 타입을 명시해야 한다.

 

타입스크립트 타입 명시 기능

const id: number = 1111;
const lastName: string = "kim";
const married: boolean = false;

function plus(a: number, b: number): number {
  return a + b;
}

타입스크립트의 가장 강력한 기능은 타입 명시 기능이다.

일반적으로 변수를 선언할 때뿐만 아니라, 함수가 리턴하는 값의 타입, 함수의 파라미터의 타입도 지정해줄 수 있다.

덕분에 파라미터의 타입과 다른 타입이 인자로 들어가는 경우 에러가 발생하고 버그 발생을 막을 수 있다.

 

function getInfo(id: number): {
  id: number;
  lastName: string;
  married: boolean;
} {
  return {
    id: 1111,
    lastName: "kim",
    married: false,
  };
}

단순히 number, string과 같은 타입뿐만 아니라 object 형태로 타입을 명시할 수도 있다.

마찬가지로 명시한 object가 아닌 다른 값이 인자로 들어가거나 반환된다면 에러가 발생하고 버그 발생을 막을 수 있다.

 

interface User {
  id: number;
  lastName: string;
  married: boolean;
}

function getInfo(id: number): User {
  return {
    id: 1111,
    lastName: "kim",
    married: false,
  };
}

object를 일일히 적는 것이 힘들고 보기 안좋다면, interface 또는 class를 통해 구조를 갖추고 간결하게 작성할 수도 있다.