[이펙티브 타입스크립트] 타입스크립트 이해하기 : 타입과 타입 호환성

타입을 쓰는데서 실력의 편차가 크게 나타난다. 지난 넥스터즈 활동 후기에 적었던 문장이다. 어렵게 막 타입을 이리저리 쓰고 이런문제가 아니다. 오랫동안 끙끙대다 발견한 방법이 알고보면 굉장히 기본적인 타입 문법이었던 경우가 꽤 있었다. 이렇게 얼레벌레 개발해온 한규진을 위한 타입스크립트 뿌수기 스터디.

 

 

 

타입 이해하기

자바스크립트의 모든 값은 데이터 타입을 갖는다. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해, 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해, 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해.

 

하지만 자바스크립트는 정적 타입 이 아닌 동적 타입 언어이다. 변수를 선언할 때 데이터의 타입을 사전에 선언하는 것이 아니다. 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

var foo;
console.log(typeof foo);	// undefined

foo = 3;
console.log(typeof foo);	// number

foo = 'hello;
console.log(typeof foo);	// string

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라 한다.

 

동적 타입 언어는 변수에 어떤 데이터 타입의 값이더라도 자유롭게 할당할 수 있다. 바로 그 부분에서 자바스크립트의 구조적인 단점이 나타난다. 변화하는 변수 값을 추적하기 어려울 수 있다. 값에 변경에 의해 타입도 언제든지 변경될 수 있다. 따라서 값을 확인하기 전에는 타입을 확신할 수 없다.

 

또한 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 숫자 타입이라고 예측했지만 사실은 문자열 타입의 변수일 수 도 있다는 말. 코드는 오해하지 않도록 작성해야 한다. 가독성이 좋은 코드가 좋은 코드다.

참고:모던 자바스크립트 딥다이브 

 

---

 

타입스크립트에서의 타입

타입스크립트 컴파일러는 두가지 역할을 수행한다.

• 최신 타입스크립트를 브라우저에서 동작하도록 구버전의 자바스크립트로 트랜스파일한다.
• 코드의 타입 오류를 체크한다.

이 두가지는 서로 완벽히 독립적이다. 따라서,

• 타입 오류가 있는 코드도 컴파일이 가능하다.
• 런타임에는 타입 체크가 불가능하다. 런타임 타입은 선언된 타입과 다를 수 있다.

 

책을 읽다보면 반복적으로 나오는 중요한 개념이다. 런타임에 모든 변수는 자바스크립트 상에서 각자의 값들을 가진다. 다양한 종류의 값들을 할당 받을 수 있다. 하지만 코드가 실행되기 전, 즉 타입스크립트가 오류를 체크하는 순간에는 '타입'을 가지고 있다.

 

 

'할당한 가능한 값들의 집합'을 타입이라고 부를 수 있다. 이런 방향으로는 한번도 생각해본 적 없지만, 유니온(|)이나 인터섹션(&)이라는 이름의 타입이 있는걸 생각하면 쉽게 납득할 수 있다.

• 가장 작은 집합은 공집합이다. never 타입으로 선언된다.
• 여러개의 타입을 묶을 때는 유니온 타입을 이용한다. Union 은 합집합(A ∪ B)이다.
• 인터섹션 타입은 교집합(A ∩ B)이다.A & B 타입의 값은 A 타입에도, B 타입에도 할당 가능해야 한다. 만약 A와 B 모두 객체 타입이라면 A & B 타입의 객체는 A와 B 타입 각각에 정의된 속성 모두를 가져야 한다.아무것도 겹치지 않는다면 할당할 수 있는 값이 없으므로 never가 된다.

 

type a = { foo: number; bar: string }; 
type b = { foo: number; baz: string }; 
type c = a & b; 
const example: c = { foo: 1, bar: "bar", baz: "baz" }; //문제 없다!! 

type FavoriteSport = "polo" | "ski"; 
type BallSport = "polo" | "baseball"; 
type FavoriteBallSport = FavoriteSport & BallSport; // polo

A & B 타입의 값은 A 타입에도, B 타입에도 할당 가능해야 한다. 만약 A와 B 모두 객체 타입이라면 A & B 타입의 객체는 A와 B 타입 각각에 정의된 속성 모두를 가져야 한다.

 

type FavoriteSport = "swimming" | "ski";
type BallSport = "football" | "baseball";
type FavoriteBallSport = FavoriteSport & BallSport; // never

 

구조적 타이핑과 타입 호환성

타입스크립트 공식문서에서 타입 호환성에 관한 글에 이렇게 적혀있다.

TypeScript의 타입 호환성은 구조적 서브타이핑(structural subtyping)을 기반으로 합니다. 구조적 타이핑이란 오직 멤버만으로 타입을 관계시키는 방식입니다. 명목적 타이핑(nominal typing)과는 대조적입니다. TypeScript의 구조적 타입 시스템의 기본 규칙은 y가 최소한 x와 동일한 멤버를 가지고 있다면 x와 y는 호환된다는 것입니다.

자바스크립트는 본질적으로 Duck Typing 기반이다. 만약 어떤 함수의 매개변수 값이 모두 제대로 주어진다면, 그 값이 어떻게 만들어졌는지 신경 쓰지 않고 사용한다. JS의 상위 언어인 타입스크립트는 이를 모델링하기위해 구조적 타이핑을 사용하는 것.

 

2D 벡터를 타입으로 받는 calculateLength 함수가 있다.

interface Vector2D {
  x: number;
  y: number;
}

function calculateLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}

// 이름이 들어간 벡터 추가
interface NamedVector {
  name: string;
  x: number;
  y: number;
}

// NameVector의 구조가 Vector2D와 호환
const v: NamedVector = { x: 3, y: 4, name: "Zee" };
calculateLength(v);

이렇게, 구조적 타이핑은 상속 관계가 명시되어 있지 않더라도 객체의 프로퍼티를 기반으로 사용처에서 사용함에 문제가 없다면 타입 호환을 허용하는 방식이다.

 

NamedVector타입의 v는 calculateLength 함수가 필요로 하는 Vector2D 타입의 프로퍼티를 포함하고 있다. 그렇기 때문에 런타임 상에서 정상적으로 작동한다. 이런 경우에 타입이 호환된다고 하는 것.

 

 

하지만 이런 코드가 있다면? 아래는 3차원 벡터를 정규화하는 normalize 함수이다.

interface Vector3D {
  x: number;
  y: number;
  z: number;
}

function normalize(v: Vector3D) {
  const length = calculateLength(v);
  return {
    x: v.x / length,
    y: v.y / length,
    z: v.z / length,
  };
}
normalize({ x: 3, y: 4, z: 5 });
// { x: 0.6, y: 0.8, z: 1 }

전체 length를 구하기 위해 위에서 사용했던 calculateLength를 사용했다. 2D 벡터를 프로퍼티로 받도록 타이핑이 된 함수이기 때문에, 개발자의 의도대로라면 오류를 내뱉어야 한다. 하지만 구조적으로 문제가 없어 타입 호환이 허용되었고 문제없이 실행되었다. 이런 경우에도 오류가 없다고 보면 안되는 것이다.

 

구조적 타이핑을 통한 유연한 타이핑은 테스트를 할때 이점이 있을 수 있다. 예를 들어 postgresDB api를 모킹한다고 했을 때, postgresDB가 사용하는 인터페이스를 모두 구현할 필요가 없는 것. 테스트 환경에서는 실제 환경의 데이터베이스에 대한 정보가 불필요하기때문에, 필요한 부분만 추상화해 사용할 수 있다. 인터페이스를 어떻게 구현하는지 명확히 선언할 필요가 없어진다.

 

참고 https://toss.tech/article/typescript-type-compatibility

 

---

 

정리하자면 이렇다.

• 타입은 값들의 집합이다.
• 타입스크립트는 구조적 타이핑을 통해 타입 호환성을 제공한다.