📌 TypeScript와 JavaScript 관계

모든 JavaScript는 TypeScript이지만, 모든 TypeScript가 JavaScript는 아니다.

interface State {
  name: string;
  capital: string;
}
const states: State[] = [
  { name: "yiju", capital: "경기도" },
  { name: "kim", capitol: "서울" },
]; // Error
// Type '{ name: string; capitol: string; }' is not assignable to type 'State'.
//   Object literal may only specify known properties, but 'capitol' does not exist in type 'State'. Did you mean to write 'capital'?

위 예시를 설명하면, 앞서 말한 모든 타입스크립트가 자바스크립트다 라고 하는 말은 틀렸다.

우리는 타입에 맞도록 작성하기 위해 타입스크립트를 사용하려는 것이므로 타입에 맞게 코드를 작성할 때만 진정 타입스크립트 코드를 작성했다고 말할 수 있다.

타입스크립트 프로그램 $\supset$ ( 자바스크립트 프로그램 $\cap$ 타입체커를 통과한 타입스크립트 )

📌 코드 생성과 타입은 관련이 없다.

TypeScript로 작성한 코드가 컴파일 과정을 통해 JavaScript로 변환된다.

이 때, 타입 코드들은 사라지게된다.

// TypeScript
interface State {
  name: string;
  capital: string;
}
const states: State[] = [{ name: "yiju", capital: "경기도" }];

위 코드를 JavaScript로 컴파일하면 다음과 같은 결과만 남는다.

1
2
3

// JavaScript
"use strict";
const states = [{ name: "yiju", capital: "경기도" }];

컴파일 이후 런타임 시점에 JavaScript 코드가 실행된다.

즉, 컴파일이 코드 생성을 말하는 것이고 런타임 시점에는 타입을 체크할 수 없을 뿐더러 당연히 타입스크립트 타입은 런타임 성능에 영향을 주지 않습니다.

📌 any 타입 지양하기

any 타입은 안전성이 없다.
함수 시그니처(contract: 계약)을 무시한다.

function calcAge(birthDate: Date): number {
  //...
}
let birthDate: any = "1995-12-04";
calcAge(birthDate); // 정상

언어 서비스가 적용되지 않는다.(자동완성 및 도움말)
코드 설계를 예측할 수 없게 만들고 신뢰도를 떨어뜨린다.

⭐️⭐️⭐️⭐️⭐️ 타입은 값들의 집합이다.

타입은 값들의 집합이다. 또한 이 집합은 타입의 범위라고 말한다. 이 개념을 알아둬야 타입에 대해 이해하기 용이하다.

TypeScript는 타입을 검사할 때, 선언된 타입에 할당 가능한 지(assignable)를 판단한다.

1
2
3

type AB = "A" | "B";

const c: AB = "C"; // Error: Type '"C"' is not "assignable" to type 'AB'.

“C” 형식은 AB 형식에 할당할 수 없습니다.
“C” 형식은 AB 형식의 부분집합이 아니다.
“C” 형식은 AB 형식의 원소가 아니다.
“C” 형식은 AB 형식의 서브타입이 아니다.
“C” 형식은 AB 형식의 상속 받지 않는다.

모두 같은 말이므로 염두하자.

🕹 & 연산자 (교집합, intersection)

interface Person {
  name: string;
}
interface Lifespan {
  birth: Date;
  death?: Date;
}
type PersonSpan = Person & Lifespan;

const ps: PersonSpan = {
  name: "yiju",
  birth: new Date("1995/12/04"),
  death: new Date("2100/10/10"),
}; // 정상

& 연산자는 두 타입의 인터섹션(교집합)을 계산한다.

언뜻 보면 교집합이라하면 공통으로 가지고 있는 요소만 확인한다고 생각이 들어 위 예시가 잘못되었다고 생각이 든다.

하지만, 타입 연산자는 인터페이스 속성이 아닌 타입의 범위(값의 집합)에 적용된다. 해당 타입과 더불어 추가적인 값을 가지는 값도 PersonSpan 타입에 속한다.

즉, PersonSpan은 Person 이라는 속성을 포함하는 집합과 Lifespan 이라는 속성을 포함하는 집합의 교집합이 되기 위해서는 Person의 name 프로퍼티도 가져야 하고 Lifespan의 birth 속성을 가진 집합을 의미한다. (deate 속성은 optional하므로…)

헷갈린다면… extends 구문으로 선언할 수 있다.

interface Person {
  name: string;
}
interface PersonSpan extends Person {
  birth: Date;
  death?: Date;
}

유니온에서 & 연산자

1	type K = keyof (Person \| Lifespan); // type is 'never'

keyof 연산자는 객체의 키 값들을 숫자나 문자열 리터럴 유니언을 생성한다.

즉, Person의 key값 name, Lifespan의 key값 birth,death의 유니온인 name | birth 에 속하는 값은 어떠한 키도 없기 때문에 never가 된다.

명확히 사용하면 아래와 같다

1 2	keyof (A&B) = (keyof A) \| (keyof B); // A의 key 값이거나 B의 key 값인 것 keyof (A\|B) = (keyof A) & (keyof B); // A의 key 값이면서 B의 key 값인 것

✈️ 제네릭 상속

interface Point {
  x: number;
  y: number;
}
type PointKeys = keyof Point; // type is "x" | "y"

function sortBy<K extends keyof T, T>(vals: T[], key: K): T[] {
  // ...
}

const pts: Point[] = [
  { x: 1, y: 1 },
  { x: 2, y: 0 },
];
sortBy(pts, "x"); // 정상 'x'는 'x'|'y'를 상속받는다.
sortBy(pts, "y"); // 정상 'y'는 'x'|'y'를 상속받는다.
sortBy(pts, "z"); // Error: Argument of type '"z"' is not assignable to parameter of type 'keyof Point'.

type K는 type T의 상속을 받는다.
위 함수에서 T가 곧 Point 이다.
그러므로 K는 keyof T이므로 ‘x’|’y’ 이다.
K extends keyof T를 사용하여 제한된 타입을 구현하였다.

🦖 타입 공간과 값 공간 구분하기

JavaScript의 symbol은 타입 공간이나 값 공간 중 한 곳에 존재한다. symbol은 이름이 같더라도 속하는 공간에 따라 나타내는 것이 다르다.

type T1 = "string literal";
type T2 = 123;

const v1 = "string literal";
const v2 = 123;

type 뒤의 심볼인 T1, T2는 타입 공간에 있으므로 타입을 나타낸다. 컴파일 과정에서 사라진다.

class와 enum은 상황에 따라 값, 타입 두가지 모두 가능

class Cylinder {
  radius = 1;
  height = 1;
}

function calcVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    shape; // 정상, 타입은 Cylinder
    shape.radius; // 정상, 타입은 number
  }
}

const v = typeof Cylinder; // 값이 'function'
type T = typeof Cylinder; // 타입이 typeof Cylinder

클래스가 값으로 쓰일 때는 생성자가 사용되지만 타입으로 사용될 때는 속성과 메서드가 사용된다.
여기서 중요한 것은 Cylinder가 인스턴스의 타입이 아니라는 것이다.

🐥 타마스 러버덕 1일차