📘 Type System

🕶 작성자와 사용자의 관점으로 코드 바라보기

Type System

타입 시스템에는 다음과 같은 두 가지의 시스템이 있다.

1. 컴파일러에게 사용하는 타입을 명시적으로 지정
2. 컴파일러가 자동으로 타입을 추론

TypeScript와 JavaScript의 Type System

타입스크립트는 두 가지 시스템 모두 가능한데 기본적으로 타입을 명시적으로 지정할 수 있고 지정하지 않으면 타입스크립트 컴파일러가 자동으로 타입을 추론한다.
타입은 해당 변수가 할 수 있는 일을 결정하는데 자바스크립트는 함수 사용법에 대한 오해를 야기한다.
예를 들어 어떤 함수 안의 매개변수가 number타입이어야 하는데 string을 입력하면 NaN으로 출력이 된다.
즉, 사용자에게 오류가 있다는 것을 알려주지 않는다.

// JavaScript
  // (f2 실행의 결과가 NaN 을 의도한 것이 아니라면)
  // 이 함수의 작성자는 매개변수 a 가 number 타입이라는 가정으로 함수를 작성했습니다. 
  function f2(a) {
  return a * 38; 
  }

  // 사용자는 사용법을 숙지하지 않은 채, 문자열을 사용하여 함수를 실행했습니다. 
  console.log(f2(10)); // 380
  console.log(f2('Mark')); // NaN

TypeScript의 추론

타입스크립트는 타입이 명시적으로 지정되지 않으면 추론을 하게 된다.
예를 들어 어떤 함수 안의 매개변수의 타입이 지정되지 않았다면 any로 추론한다.

// 타입스크립트 코드지만,
  // a 의 타입을 명시적으로 지정하지 않은 경우이가 때문에 a 는 any 로 추론됩니다. 
  // 함수의 리턴 타입은 number 로 추론됩니다. (NaN 도 number 의 하나입니다.)
  function f3(a) { 
  return a * 38;
  }

  // 사용자는 a 가 any 이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했습니다. 
  console.log(f3(10)); // 380
  console.log(f3('Mark') + 5); // NaN

nolmplicitAny

하지만 이는 위험한 요소가 될 수 있으며 이를 방지하기 위한 옵션 nolmplicitAny이 있다.
타입을 명시하지 않은 경우 타입스크립트가 any라고 추론하게 되면 컴파일 에러를 발생시켜 타입을 지정하도록 유도하는 옵션이다.
타입을 명시해주지 않으면 error TS7006: parameter 'a' implicitly has an 'any' type 이라는 에러가 뜬다.
즉, 작성자가 타입을 지정해줄 기회를 부여해 사용자에게 에러가 발생하지 않도록 한다.

// error TS7006: Parameter 'a' implicitly has an 'any' type. 
  function f3(a) {
  return a * 38; 
  }

  // 사용자의 코드를 실행할 수 없습니다. 컴파일이 정상적으로 마무리 될 수 있도록 수정해야 합니다.
  console.log(f3(10)); 
  console.log(f3('Mark') + 5);

number로 추론된 return 타입

// 매개변수의 타입은 명시적으로 지정했습니다.
  // 명시적으로 지정하지 않은 함수의 리턴 타입은 number 로 추론됩니다. 
  function f4(a: number) {
  if (a > 0) { 
  return a * 38;
    } 
  }

  // 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했습니다.
  // 해당 함수의 리턴 타입은 number 이기 때문에, 타입에 따르면 이어진 연산을 바로 할 수 있습니다. 
  // 하지만 실제 undefined + 5 가 실행되어 NaN 이 출력됩니다.
  console.log(f4(5)); // 190 
  console.log(f4(-5) + 5); // NaN

위의 코드에서 리턴 타입이 지정되지 않았고 f4(-5)는 undefined인데 타입스크립트에선 number로 추론을 한다.
이를 통해 기본적으로 number안에 undefined가 포함되어 있음을 알 수 있다.

strictNullChecks

따라서 strictNullChecks 옵션을 켜서 모든 타입에 자동으로 포함되어 있는 null과 undefined를 제거할 수 있다.
이 옵션을 켜면 다음과 같이 f4(-5)부분에서 에러가 난다.

// 매개변수의 타입은 명시적으로 지정했습니다.
  // 명시적으로 지정하지 않은 함수의 리턴 타입은 number | undefined 로 추론됩니다. 
  function f4(a: number) {
  if (a > 0) { 
  return a * 38;
    } 
  }

  // 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했습니다. 
  // 해당 함수의 리턴 타입은 number | undefined 이기 때문에, 
  // 타입에 따르면 이어진 연산을 바로 할 수 없습니다.
  // 컴파일 에러를 고쳐야하기 하기 때문에 사용자와 작성자가 의논을 해야합니다.
  console.log(f4(5));
  console.log(f4(-5) + 5); // error TS2532: Object is possibly 'undefined'

return 타입 지정

// 매개변수의 타입과 함수의 리턴 타입을 명시적으로 지정했습니다.
  // 실제 함수 구현부의 리턴 타입과 명시적으로 지정한 타입이 일치하지 않아 컴파일 에러가 발생합니다.
  // error TS2366: Function lacks ending return statement and return type does not incl 
  function f5(a: number): number {
  if (a > 0) { 
  return a * 38;
    } 
  }

noImplicitReturns

noImplicitReturns 옵션은 함수 내에서 모든 코드가 값을 리턴하지 않으면 컴파일 에러를 발생시킨다.

// if 가 아닌 경우 return 을 직접 하지 않고 코드가 종료된다. 
  // error TS7030: Not all code paths return a value.
  function f5(a: number) { 
  if (a > 0) {
  return a * 38; 
    }
  }

매개변수에 object 가 들어오는 경우

// JavaScript 
  function f6(a) {
  return `이름은 ${a.name} 이고, 연령대는 ${ 
  Math.floor(a.age / 10) * 10
    }대 입니다.`; 
  }

  console.log(f6({ name: 'Mark', age: 38 })); // 이름은 Mark 이고, 연령대는 30대 입니다. 
  console.log(f6('Mark')); // 이름은 undefined 이고, 연령대는 NaN대 입니다.

위의 코드를 다음과 같이 object literal type으로 바꿔주면 되겠다.

function f7(a: { name: string; age: number }): string { 
  return `이름은 ${a.name} 이고, 연령대는 ${
  Math.floor(a.age / 10) * 10 
    }대 입니다.`;
  }

  console.log(f7({ name: 'Mark', age: 38 })); // 이름은 Mark 이고, 연령대는 30대 입니다. 
  console.log(f7('Mark')); // error TS2345: Argument of type 'string' is not 
  assignable to parameter of type '{ name: string; age: number; }'.

하지만 매번 길게 object literal type으로 쓰기 힘들기에 특정한 타입으로 뽑아서 만들어 놓는 방식을 쓰자.

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

  type PersonTypeAlias = { 
    name: string;
    age: number; 
  };

  function f8(a: PersonInterface): string { 
  return `이름은 ${a.name} 이고, 연령대는 ${
  Math.floor(a.age / 10) * 10 
    }대 입니다.`;
  }

  console.log(f8({ name: 'Mark', age: 38 })); // 이름은 Mark 이고, 연령대는 30대 입니다. 
  console.log(f8('Mark')); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'PersonInterface'.

💻 Structural Type System vs Nominal Type System

structural type system

구조가 같으면, 같은 타입으로 취급하는 방식이다.

interface IPerson { 
    name: string; 
    age: number;
    speak(): string; 
  }

  type PersonType = { 
    name: string; 
    age: number;
    speak(): string; 
  };

  let personInterface: IPerson = {} as any; 
  let personType: PersonType = {} as any;
  personInterface = personType; 
  personType = personInterface;

IPerson과 PersonType이 똑같은 구조를 가지고 있기에 서로에게 대입해도 문제가 없는 것이다.
보통 특정 타입을 만들고 다른 타입에 넣을 수 있는데 굳이 타입을 명시하지 않아도 구조만 같으면 되기 때문에 일일이 타입을 만들지 않아도 되는 것이다.

nominal type system

구조가 같아도 이름이 다르면, 다른 타입으로 취급하는 방식이다.

type PersonID = string & { readonly brand: unique symbol }; 
  function PersonID(id: string): PersonID {
  return id as PersonID; 
  }

  function getPersonById(id: PersonID) {} 
  getPersonById(PersonID('id-aaaaaa'));
  getPersonById('id-aaaaaa'); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'PersonID'. 
  Type 'string' is not assignable to type '{ readonly brand: unique symbol; }'.

위의 코드에서 보면 무조건 PersonID로 치환된 형식만 넣어야 한다는 것이다.
하지만 이 방식은 잘 사용되지 않고 타입스크립트에서는 따르지 않는 방식이다.

duck typing

만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다. 라는 뜻이다.
대표적으로 파이썬에서 사용하는 시스템으로 structural type system과 비슷하다고 볼 수 있다.
하지만 타입스크립트에서는 사용되지 않는다.

class Duck:
      def sound(self): 
          print u"꽥꽥"

  class Dog:
      def sound(self): 
          print u"멍멍"

  def get_sound(animal): 
     animal.sound()

  def main():
     bird = Duck() 
     dog = Dog() 
     get_sound(bird) 
     get_sound(dog)

🎨 타입 호환성 (Type Compatibility)

서브타입

// sub1 타입은 sup1 타입의 서브 타입이다. 
  let sub1: 1 = 1;
  let sup1: number = sub1;
  sub1 = sup1; // error! Type 'number' is not assignable to type '1'. 

  // sub2 타입은 sup2 타입의 서브 타입이다.
  let sub2: number[] = [1]; 
  let sup2: object = sub2;
  sub2 = sup2; // error! Type '{}' is missing the following properties from type 'number[]': length, pop, push, concat, and 16 more.

  // sub3 타입은 sup3 타입의 서브 타입이다. 
  let sub3: [number, number] = [1, 2]; 
  let sup3: number[] = sub3;
  sub3 = sup3; // error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.

  // sub4 타입은 sup4 타입의 서브 타입이다. 
  let sub4: number = 1;
  let sup4: any = sub4; 
  sub4 = sup4;

  // sub5 타입은 sup5 타입의 서브 타입이다. 
  let sub5: never = 0 as never;
  let sup5: number = sub5;
  sub5 = sup5; // error! Type 'number' is not assignable to type 'never'. 

  class Animal {}
  class Dog extends Animal { 
    eat() {}
  }

  // sub6 타입은 sup6 타입의 서브 타입이다. 
  let sub6: Dog = new Dog();
  let sup6: Animal = sub6;
  sub6 = sup6; // error! Property 'eat' is missing in type 'SubAnimal' but required in type 'SubDog'.

위의 코드들에서 다음과 같은 규칙들을 발견할 수 있다.

1. 같거나 서브 타입인 경우, 할당이 가능하다. (공변)

// primitive type
  let sub7: string = '';
  let sup7: string | number = sub7;

  // object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다. 
  let sub8: { a: string; b: number } = { a: '', b: 1 };
  let sup8: { a: string | number; b: number } = sub8; 

  // array - object 와 마찬가지
  let sub9: Array<{ a: string; b: number }> = [{ a: '', b: 1 }]; 
  let sup9: Array<{ a: string | number; b: number }> = sub8;

타입스크립트는 기본적으로 공변을 따른다.

2. 함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다.(반병)

class Person {}
  class Developer extends Person { 
    coding() {}
  }
  class StartupDeveloper extends Developer { 
    burning() {}
  }

  function tellme(f: (d: Developer) => Developer) {}

  // Developer => Developer 에다가 Developer => Developer 를 할당하는 경우 
  tellme(function dToD(d: Developer): Developer {
  return new Developer(); 
  });

  // Developer => Developer 에다가 Person => Developer 를 할당하는 경우 
  tellme(function pToD(d: Person): Developer {
  return new Developer(); 
  });

  // Developer => Developer 에다가 StartipDeveloper => Developer 를 할당하는 경우 
  tellme(function sToD(d: StartupDeveloper): Developer {
  return new Developer(); 
  });

가장 마지막 tellme부분은 논리적으로 약간의 문제가 있다.
StartupDeveloper가 Developer가 하위타입이기 때문이다.

하지만 융통성을 부여해 타입스크립트는 에러를 안발생시키지만 strictFunctionTypes 옵션을 켜면 에러를 발생하게 한다.
이는 함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고한다.

🎫 타입 별칭 (Type Alias)

Interface 랑 비슷해 보이나 조금 다르다.
Primitive, Union Type, Tuple, Function 을 다른 이름으로 부르기 위해 사용하게 된다.
만들어진 타입의 refer로 사용하는 것이지 타입을 만드는것은 아니다.

Aliasing Primitive

Primitive를 다른 이름으로 부르는 것이다.
사실 별 의미가 없다.

type MyStringType = string; 
  const str = 'world';
  let myStr: MyStringType = 'hello'; 
  myStr = str;

Aliasing Union Type

유니온 타입은 A 도 가능하고 B 도 가능한 타입으로 길게 쓰는 걸 짧게하고 반복을 줄인다는데 의미가 있다.

let person: string | number = 0; 
  person = 'Mark';
  type StringOrNumber = string | number; 
  let another: StringOrNumber = 0;
  another = 'Anna'; 

Aliasing Tuple

튜플 타입에 별칭을 줘서 여러군데서 사용할 수 있게 하는 것으로 Aliasing Union Type과 마찬가지로 반복을 줄인다.

let person: [string, number] = ['Mark', 35]; 
  type PersonTuple = [string, number];
  let another: PersonTuple = ['Anna', 24];

Aliasing Function

이 또한 반복을 줄이고 함수의 타이핑 양을 줄여준다.

type EatType = (food: string) => void;