Javascript를 대신할 TypeScript?

TypeScript에 입문을 하면 JavaScript(이하 자바스크립트)를 돌아보게 된다. 자바스크립트는 좋게말하면 굉장히 유연하고 자유로운 언어이다. 하지만 이렇게 규칙없이 자유분방하기 때문에 우리의 프로젝트에 에러를 내기 쉽다는 것이다. 우리가 만든 변수가 언제 어디서든 타입이 바뀌면 개발을 하는 (기계가 아닌)인간이 봤을 때 이 변수는 무슨 역할을 하는지 예측이 어렵고, 말도 안되는 상황에서 오류를 내지 않을 수도 있으며, 말 그대로 예측불가인 것이다. 이렇게 자유분방한 언어에 규칙을 넣어주는 것이 TypeScript(이하 타입스크립트)이다.
어떻게 보면 마블 드라마 Loki처럼 TVA가 타임라인을 바로 잡아주지 않으면 variant(변종)가 타임라인을 벗어나서 무너뜨릴 수 있다고 비유할 수 있을 것 같다 (광고아님).
다시 말해, 타입스크립트가 변수의 타입을 정해주지 않으면 우리의 코드에 빈틈을 주어서 에러를 발생시킨다.

예를 들어 이런 코드가 있다고 치자.

function addAge(x, y) {
  return x + y;
}

"나이 계산하는 함수아냐?" 라고 생각할 수 있겠지만 그건 함수를 작성한 사람만 아는것이다. 그 사람은 문자열을 더하고 싶었던 걸지도, 아니면 숫자와 문자열을 더하고 싶었던 걸지도 모르기 때문이다. 내 나이를 말하는 문자열을 반환하고 싶어서 age(18, 'years old');로 호출 할 수 도 있는 것이고, 나의 10년후 나이를 알고 싶어서 age(18, 10); 이렇게 전달 할 수도 있는 것이다. 즉, 이 함수의 의도가 무엇이고, 어떤 결과값이 나올지 예측할 수가 없기 때문에 type을 정해준다.

function addAge(x: number, y: string): string {
  return x + y;
}

"x에는 숫자를 전달해줄거고, y에는 문자열을 줄거야. 반환 값은 문자열이 되겠지." 라고 미리 말해준다면 어느정도 어떤 코드가 그려질지 예상이 간다. 적어도 y에는 숫자를 전달하면 안되고 반환되는것도 숫자는 아니라는 것을 우리는 미리 예고를 받은 셈이다.

타입스크립트의 역할

타입스크립트는 우리의 코드에 타입을 넣을 수 있는 공간을 제공해 주는 것뿐만 아니라 사람이 저지를 수 있는 실수를 자바스크립트보다 더 명확하게 바로 잡아준다.
object로 예를 들어보자.

• 객체에 없는 속성을 출력할때, 자바스크립트에서는 undefined가 출력되고, 타입스크립트는 아예 에러를 띄워준다.

// 타입
type Character = {
  gender: string;
  age: number;
}
// 객체
const Mike: Character = {
  gender: 'male',
  age: 14,
}
console.log(myObj.gender); // male
cosnole.log(myObj.height); //'Character' 형식에 'height' 속성이 없습니다.

자바스크립트를 쓰다가 타입스크립트를 쓰면 감이 잘 안오겠지만, 반대로 타입스크립트를 쓰다가 자바스크립트를 쓰면 느낌이 확 온다. "이거 왜 에러 안띄워?", "타입스크립트가 편하네..." 라는 말이 분명히 나온다.

Syntax

타입스크립트에서 사용할 수 있는 문법들을 알아보자.

Primitive Type (원시 타입)

원시타입은 number, string, 그리고 boolean이 있다.

const num: number = 2022;
const str: string = 'string!"
const bool: boolean = true;

이렇게 변수 뒤에 콜론을 붙히고 타입을 적어주면 된다. 한번 타입을 정해준 변수는 뒤에 재할당을 할 때 초기에 정해준 타입만 재할당이 가능하다.

// ❌
let friends: string = 'Monica';
friends = 26; // 에러: 'number' 형식은 'string' 형식에 할당할 수 없습니다.

Array Type (배열 타입)

배열에 타입을 줄 때에는 이 변수는 배열이고, 이 배열안에 구성된 요소가 어떤 타입인지도 알려줘야 한다. 배열은 두가지 문법으로 쓰일 수 있다.

// 숫자로 이루어진 배열
const numArr: number[] = [1, 2, 3];
const numArr2: Array<number> = [4, 5, 6]
// 문자열로 이루어진 배열
const strArr: string[] = ['JS', 'TS'];
const strArr2: Array<string> = ['React', 'Next'];
...

Function Type (함수)

함수에는 전달받은 인자에 타입과, 반환되는 값의 타입을 지정해야 한다. 함수에서 반환되는 값이 없으면 void라는 타입을 준다.
타입스크립트 공식문서에 의하면 반환되는 값의 타입은 return문 때문에 타입 추론이 된다고 한다.

Much like variable type annotations, you usually don’t need a return type annotation because TypeScript will infer the function’s return type based on its return statements. The type annotation in the above example doesn’t change anything.
Some codebases will explicitly specify a return type for documentation purposes, to prevent accidental changes, or just for personal preference.
TypeScript - Every Types

// void
const myFunction = (arg: number) => {	
  ...
}

const myFunction = (arg: number): string => {
  const myString = 'hello!'
  return myString;
}

Object Type (객체 타입)

객체 타입을 Object로 지정하는 것은 any와 같기 때문에 Object 라는 타입은 쓰지 않는다. 대신 객체 안에 있는 key와 value들의 타입을 하나하나 정해주면 된다.

❌
const students: Object = {
  name: 'Monica',
  age: 26,
};

✅
const students: { name: string; age: number } = {
  name: 'Monica',
  age: 26,
};

또는, interface 선언문이나 type alias로 자세하게 타입을 지정해주고 객체들에 알맞는 이름을 부여해야 한다.

✅
type Students = {
  name: string;
  age: number;
}
const students: Students = {
  name: 'Monica',
  age: 26,
}

지금까지 소개한 타입은 자바스크립트에서 흔히 볼 수 있는 타입을 시각화 해주었다고 볼 수 있다. 다음 타입스크립트 게시글에서는 Union Types, Type Alias, Interface, Type Assertion, Literal Type에 대해서 정리해보려한다.