[TIL] 타입스크립트 개념잡기 #2 - JS vs TS

정적 타입 검사자(Static Type Checker)

• 어떤 것이 오류인지와 어떤 것이 연산 되는 값에 기인하지 않음을 정하는 것
• 그래서 타입스크립트는 프로그램을 실행하기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다.

타입(Types)

• Typescript는 다른 종류의 값들을 사용할 수 있는 방법이 추가된 타입이 있는 상위 집합이다.

• console.log(4 / []);  // NaN
  // 이렇게 작성하면 javascript는 구문적으로 옳기 때문에 NaN을 출력한다.
  console.log(4 / []); // @errors: 2363
  // 하지만 typescript는 배열로 숫자를 나누는 연산이 옳지 않다 판단하여 오류를 발생한다.

  만약 javscript를 typescript로 옮기면, 코드를 어떻게 작성했는지에 따라 타입 오류를 볼 수 있따.

  • 이는 코드상의 문제 / Typescript의 지나친 보수성
  • 이런 오류를 제거하기 위해서는 다양한 TypeScript 구문을 추가하는 방법을 제공한다

런타임 특성(Runtime Behavior)

• TypeScript는 JavaScript 코드의 런타임 특성을 절대 변화시키지 않는다.
• Typescript가 코드에 타입 오류가 있음을 검출해도, 같은 방식으로 실행 시키는 것을 보장한다.
• 이는 프로그램 작동을 중단시킬 수 있는 미묘한 차이를 걱정하지 않고 두 언어간의 전환을 위한 Typescript의 약속이다.

삭제된 타입(Erased Types)

• TypeScript의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 "컴파일된" 코드를 만든다.
• 코드가 타입스크립트의 컴파일을 거치고 나면 일반 JS코드에서 타입 정보를 확인 할 수 없다.
  • 이러한 이유는 프로그램의 특성을 변화시키지 않기 위해서 이다.

👨🏻‍💻 자바스크립트를 안다면...

---

타입 추론 ( Types by Inference )

• Typescript는 Javscript의 작업을 개선하기 위해 내부적으로 Javascript의 작동방식을 이해하고 타입을 지정한다.

타입 정의하기 ( Defining Types )

• Javascript의 다양한 디자인 패턴에 타입을 제공하기 힘들 경우, 명시 가능한 Javascript 언어의 확장을 지원한다.

   interface User = {
     name: "Hayes",
     id: 0,
   }										// interface로 선언하여 새로운 변수에 적용시킬 수 있다. 똑같은 모양으로 만들어야 하는듯
  
  // --cut--
  
  // case.1
  const user: User = {			
    name: "HOYO",
    id: 123,
  }											// 이렇게 작성하면 위의 interface User가 적용된다
  
  // case.2
  const user: User = {			
    username: "HOYO",
    id: 123,
  }											// 키 값을 interface와 다르게 적용하면 `@errors: 2322`를 보여주면서 경고를 준다
  
  

• 자세한 내용은 Interface에서 이어서

타입 구성 ( Composing Types )

• 객체들을 조합하여 더 크고 복잡한 객체를 만드는 방법과 유사하게 TypeScript에 타입으로 이를 수행하는 도구가 있다.

  • 대표적인 예시로는 Union 과 Generic 있다.

• 유니언 ( Union )

  // 유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법이다.
  
  type modal = modal | Unmodal;
  type OddNumber = 1 | 3 | 5 | 7 | 9;
  
  // 위처럼 들어올 수 있는 값의 타입을 여러개로 지정할 수 있다.
  
  function getLength(obj: string | string[]) {
    return obj.length;
  }
  
  // 이런 식이라면 array 또는 string을 받는 함수를 만들 수 있다.
  
  function Array(obj: string | string[]) {
    if (typeof obj === "string") {
      return [obj];
    }
  }// 위 방식 처럼 `typeof x === "type"`를 사용하여 타입에 해당될 때를 조건으로 줄 수 있다.

• 제네릭 ( Generic )

  • Typescript 제네릭 시스템은 타입에 변수를 제공하는 방법이다.

    • const, let 대신에 type으로 변수를 선언한다. 이렇게 제네릭을 사용하는 고유 타입을 선언할 수 있다.

  • EX) Array => 제네릭이 없는 배열은 어떤 것이든 포함된다. 하지만 제네릭이 있는 배열은 배열 안의 값을 설명할 수 있다.

    type StringArray = Array<string>;
    type NumberArray = Array<number>;
    type ObjectWithNameArray = Array<{ name: string }>;

  • 자세한 내용은 제네릭에서

구조적 타입 시스템 ( Structural Type System )

• Typescript의 핵심 원칙 중 하나는 타입 검사가 값이 있는 형태에 집중한다는 것

  • 이는 "덕 타이핑(duck typing)" or "구조적 타이핑"이라고 불린다.

• 구조적 타입 시스테엠에서 두 객체가 같은 형태를 가지면 같은 것으로 간주된다.

  interface Point {
    x: number;
    y: number;
  }
  
  function printPoint(p: Point) {
    console.log(`${p.x}, ${p.y}`);
  }
  
  const point = { x: 12, y: 26 };
  printPoint(point); // "12, 26"
  
  // 이렇게 작동되는 이유는 interface Point와 변수 point가 같은 형태를 가지고 있기 때문이다.
  // 이런 형태 일치에는 일치시킬 객체의 필드의 하위 집합만 필요하다?
  
  const poin3 = { x: 12, y: 26, z: 89 };
  printPoint(point3) // "12, 26" => 이는 형태에 맞는 값만 출력하는 구조적 타입 시스템 덕분이다.
  									 // 만약 형태가 맞지 않으면 error가 발생한다.
  
  
  // 이는 클래스에서도 동일하게 적용된다
  
  class VirtualPint {
    x: number;
    y: number;
    
    constructor(x: number, y:number) {
      this.x = x;
      this.y = y;
    }
  }
  
  const newVwpoint = new VirtualPint(13, 56);
  printPoint(newVwpoint); // "13, 56" => 자세한 내용은 클래스에서

🙆🏻‍♂️ 결론

---

타입스크립트 공식문서를 보면서 공부하기 시작했다. 자바스크립트를 공부하면서 개념에 대한 이해가 코드에서도 나타는 것을 많이 느꼈다. 그렇기에 느리더라도 개념을 다지면서 나아가기 위해 공식문서를 보면서 공부합니다. 다음시간엔 핸드북을 차례대로 살펴볼 예정입니다. Yee!