[TS] 타입스크립트 사용 이유 / 기본 타입 / 인터페이스

※ 브라우저들은 타입스크립트를 이해하지 못하기 때문에 타입스크립트를 자바스크립트로 변환해서 로드해야 실행 가능

1. 타입스크립트를 사용하는 이유

// 자바스크립트 코드
function add(num1, num2) {
  console.log(num1 + num2);
}

add();
add(1);
add(1,2);
add(3,4,5);
add('hello', 'world');

NaN

NaN

3

7

"helloworld"

add(1,2)를 제외하고는 원하는 결과가 나오지 않는다.
add()의 경우에는 아무 인수도 전달하지 않았으니까 num1과 num2 모두 undefined가 되었고, undefined끼리 더했으니 NaN이 나온다.
하지만 자바스크립트는 아무런 경고도 주지 않았고, 실수가 분명함에도 심지어 에러 없이 실행이 된다.

function showItem(arr) {
  arr.forEach((item) => {
    console.log(item);
  });
}

showItem([1, 2, 3]);
showItem(1, 2, 3);

위 코드를 실행하면 아래와 같은 결과를 얻는다.

두 번째 호출의 경우 실행 중 에러가 발생한다.

자바스크립트는 동적 언어이다.
런타임에 타입이 결정되고, 오류가 발견된다.

타입스크립트는 정적 언어이다.
컴파일 타임에 타입이 결정되고, 오류가 발견된다.

변환된 자바스크립트를 확인할 수 있는 타입스크립트 작성 공간인 플레이 그라운드에서 동일한 코드를 작성했을 때 아래와 같은 빨간 줄이 쳐지는 것을 발견할 수 있다.

매개변수의 타입을 지정하자 문자열 타입도 에러로 판단하여 빨간 줄이 생기는 것을 확인할 수 있다.

2. 기본 타입

문자열은 string이다.

타입을 적어주지 않아도 'bmw'가 문자열이기 때문에 이미 string이라는 것을 알고 있다.
이런 것을 타입 추론이라고 한다.

숫자는 number, 참·거짓은 boolean, 배열은 타입 뒤에 []를 붙이거나 Array<타입>과 같이 작성한다.
week1의 타입은 문자열 배열이기 때문에 3을 넣으려고 하면 빨간 줄이 생기는 것을 볼 수 있다.

튜플은 인덱스 별로 타입이 다를 때 사용한다.

void는 아무것도 반환하지 않을 때 사용한다.

function sayHello():void {
  console.log('hello');
}

never는 에러를 반환하거나 영원히 끝나지 않는 함수의 타입으로 사용이 가능하다.

function showError():never {
  throw new Error();
}

function infLoop():never {
  while (true) {
    // do something..
  }
}

enum은 비슷한 값들끼리 묶어줄 때 사용한다.

enum에 수동으로 값을 주지 않으면 자동으로 0부터 1씩 값이 증가하면서 할당 된다.

enum Os {
  Window = 3,
  Ios,
  Android
}

enum Os {
  Window = 3,
  Ios = 10,
  Android
}

첫 번째 경우, Window에 3이라는 값을 주었으므로 Ios는 4, Android는 5가 된다.
두 번째 경우, Android는 11이 된다.

자바스크립트 코드를 보면 Os 객체가 만들어졌다.
Os["Window"]는 3이고 Os[3]은 "Window"인 것처럼 양방향 매핑이 되어 있다.
콘솔을 찍어보면 아래와 같은 결과가 출력 된다.

enum에는 숫자가 아닌 문자열도 입력이 가능하다.
이 경우에는 숫자가 아니기 때문에 단방향 매핑만 된다.

myOs 타입을 Os로 선언해두면 Window, Ios, Android만 입력할 수 있다.
특정 값만 입력할 수 있도록 강제하고 싶을 때, 그리고 그 값들에 공통점이 있을 때 enum을 사용하면 된다.

null과 undefined 타입도 있다.

let a:null = null;
let b:undefined = undefined;

3. 인터페이스

객체는 object 타입으로 정의할 수 있다.

위 코드에서 에러가 나는 이유는 object에 name이 없기 때문이다.
object에는 특정 속성값에 대한 정보가 없다.

따라서 프로퍼티를 정의해서 타입을 정의하고자 할 때는 인터페이스를 사용한다.

위 코드에서 빨간 줄이 쳐지는 이유는 user에 gender가 없기 때문이다.

입력을 해도 되고 안해도 되는 속성을 물음표를 붙여 옵셔널로 처리를 한다.

값에 접근은 할 수 있지만 수정을 불가능하게 하고 싶을 때는 readonly를 붙여 읽기 전용으로 만든다.

최초에 생성할 때만 할당이 가능하고 이후에는 수정할 수 없다.

학년 별로 점수를 기입하고 싶은데 사용자가 2학년이라 1학년 성적밖에 없을 때는 모든 요소를 옵셔널하게 처리해주는 것보다 문자열 인덱스 시그니처를 사용하는 게 좋다.

gender라는 단어가 의미가 있는 것은 아니다. key라고 적어도 되고 어떻게 적어도 상관 없다.
여섯번 째 줄 코드는 number를 키로 하고 string을 값으로 받는 프로퍼티를 여러 개 받을 수 있다는 의미이다.

사실 성적은 문자열로 받기에는 범위가 넓은데 이럴 때 사용을 고려해볼 수 있는 게 문자열 리터럴 타입이다.

이제 Score에 있는 값 외에는 입력할 수 없다.

인터페이스로 함수도 정의할 수 있다.

interface Add {
  (num1:number, num2:number): number;
}

const add : Add = function(x, y) {
  return x + y;
}

add(10, 20);

interface IsAdult {
  (age:number):boolean;
}

const a:IsAdult = (age) => {
  return age > 19;
}

a(33) // true

implements 키워드를 이용해 인터페이스로 클래스를 정의할 수도 있다.

인터페이스는 extends 키워드를 이용해 확장이 가능하다.

확장은 여러개를 할 수도 있다.

---

📌 아래 강의의 내용을 정리한 글입니다.

• 코딩앙마 - 타입스크립트 강좌