타입스크립트 교과서 정리

1장 타입스크립트 시작하기

• 1.1 타입스크립르르 공부할 때 알아야할 단 한 가지
  • 타입스크립트는 타입을 위한 구문이 있는 자바스크립트
  • 타입을 위한 구문은 변수나 매개변수, 반환값 같은 값에 타입을 부여합니다.
  • 타입은 데이터의 형태를 의미합니다.
  • 여기서 데이터의 형태란, 자바스크립트에서 배운 문자열, 숫자, 객체 등의 자료형입니다
  • 정리하면 타입스크립트는 데이터의 타입을 명시적으로 표시할 수 있게 된 자바스크립트.
  • 타입스크립트를 배운다는 것은 자바스크립트에 타입을 표시하는 방법을 배우는 것입니다.
• 1.2 공식 문서와 플레이그라운드
  • 타입스크립트를 공부할땐 공식사이트를 함께 보는것이 좋습니다. 공식 사이트는 타입스크립트 핸드북을 제공하고, 이 핸드북을 정독하는것이 타입스크립트의 기본을 익히는데에 많이 도움이 됩니다.
  • 또한 공식문서는 플레이그라운드 라는 실습환경을 제공합니다. 자유롭게 타입스크립트 코드를 작성할 수 있고, 타입 정보나 에러도 확인할 수 있습니다..
• 1.3 왜 타입이 필요한가
  • 공식사이트에서는 다음과 같이 설명하고 있습니다.
    • 프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다. 다른 종류의 값이 예상되는 곳에 특정한 값을 사용하는 경우입니다. 이는 단순한 오타, 라이브러리 API를 이해하지 못한 것, 런타임 동작에 대한 잘못된 가정 또는 다른 오류 때문일 수 있습니다. 타입스크립트의 목표는 자바스크립트 프로그램의 정적 타입 검사자입니다. 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입검사)입니다.
  • 다시 말해, 자바스크립트로 만드는 프로그램의 규모가 점점 커지고 방대한 코드를 타입 없이 작성하려니 타입 관련 오류와 오타가 많이 발생하게 되었다는 것입니다. 타입스크립트는 타입 관련 오류와 오타를, 실행하기 전에 잡아주므로 실제로 코드를 실행했을때 오류가 나는 경우가 많이 줄어들게 됩니다.
  • 에러 로그를 수집하고 분석하는 서비스를 제공하는 회사인 Rollbar에서 조사한 자료에 따르면 자바스크립트에서 많이 발생하는 10가지 에러는 다음과 같습니다.
    1. Uncaught TypeError : Cannot read property
    2. TypeError: ‘undefined’ is not an object (evaluating …)
    3. TypeError: null is not an object (evaluating…)
    4. (unknwon): Script error
    5. TypeError: Object doesn’t support property
    6. TypeError: ‘undefied’ is not a function
    7. Uncaught RangeError
    8. TypeError: Cannot read property ‘length’
    9. Uncaught TypeError: Cannot set property
    10. ReferenceError: event is not defined
    • 이 중 4, 7을 제외한 다른 에러들은 대부분 타입에러 이므로 타입스크립트가 미리 탐지할 수 있다. 타입스크립트 도입만으로 자바스크립트에서 발생하는 대부분의 에러를 막을 수 있습니다.
  • 타입스크립트가 모든 에러를 사전에 차단할 수는 없지만, 타입을 정확하게 입력했다는 전제하에는 코드를 실행하기 전에 타입 관련 에러와 오타를 제거할 수 있습니다.

---

2장 기본 문법 익히기

• 2.1 변수, 매개변수, 반환값에 타입을 붙이면 된다
  • 기본 타입으로는 string, number, boolean, null, undefined, symbol, bigint, object 가 있다. 자바스크립트의 자료형과 대응 된다. 함수와 배열도 객체이므로 object에 포함된다.
  • 다음과 같이 변수 이름 바로뒤에 콜론과 함께 타입을 표기한다.
    • 플레이그라운드에서 bigint에서 에러가 발생할텐데 TS Config메뉴를 누르고 target을 ES2022로 변경하면 에러가 발생하지 않습니다. ES20202에서 추가된 타입이라 ES2020 이상의 자바스크립트에서만 동작하기 때문입니다. 마찬가지 이유로 symbol 타입도 Target 이 ES2015 이상이어야만 동작합니다. 
    •  
      
      • 함수에서는 다음과 같이 타입을 표기합니다. 매개변수의 타입은 매개변수 바로 뒤에 표기하고, 반환 값의 타입은 함수의 매개변수 소괄호 뒤에 표기합니다.

      • function plus(x: number, y: number): number {
          return x + y
        }
        
        const minus = (x: number, y: number): number => x- y

    • const str: string = 'hello' const num: number = 123 const bool: boolean = false const n: null = null const u: undefined = undefined const sym: symbol = Symbol('sym') const big: bigint = 1000000n const obj: object = { hello : 'world' }

• 2.2 타입 추론을 적극 활용하자
  • 위에서 선언한 plus 함수를 사용할때

  • const result1: number = plus(1, 2) const result2 = plus(1, 2)

    
    
    • plus 함수의 반환값을 result1 변수에 대입했습니다. plus 함수의 반환값이 숫자이므로 result1도 숫자로 타입을 부여했습니다. 그런데 result2에는 타입을 부여하지 않았습니다. 타입을 부여하지 않아도 되는 이유는 타입스크립트가 알아서 result2의 타입을 추론하기 때문입니다. result2 변수위에 마우스를 올려보면 타입스크립트가 타입을 무엇으로 추론하는지 알 수 있습니다.
    • 타입을 부여하지 않으면 다음과 같이 에러메세지가 표시됩니다.

    • 

    • 매개변수 x, y는 암묵적으로 any타입을 갖고 있다는 뜻입니다. 암묵적이란 직접 타입을 표기하지 않아서 타입스크립트가 타입을 추론했다는 의미입니다. 암묵적 any때문에 발생하는 에러를 implictAny 에러 라고 부릅니다. any 는 2.7.1에서 상세하게 다룹니다.
  • 타입스크립트가 타입을 제대로 추론할때도 있고 틀리게 추론할 때도 있는것 같은데 타입스크립트의 추론을 어느정도로 믿어야할까요? 타입스크립트의 추론을 활용하기 보다 그냥 모든 변수, 매개변수, 반환값에 타입을 표기하는게 낫지 않을까요? 작가는 타입스크립트를 사용할때 다음과 같은 한가지 원칙을 세웠습니다.
    • 타입스크립트가 제대로 타입을 추론하면 그대로 쓰고, 틀리게 추론할 때만 올바른 타입을 표기한다
  • 이 원칙을 세우게 된 이유는 다음과 같은 코드 때문입니다.

    • const str= 'hello' ---- const str: "hello"
      const num = 123   ----- const num: 123
      const bool = false  --- const bool: false
      const n = null     ---- const n: null
      const u = undefined --- const u: undefined
      const sym = Symbol('sym')  ------- const sym: typeof sym
      const big = 1000000n --- const big: 100000n
      const obj = { hello : 'world' } -- const obj: { hello: string }

      
       
    • 이전 절에서 타입을 표기했던 것과 대부분 다르게 추론됩니다. 결론부터 말하면 타입스크립트의 추론이 더 정확한 추론입니다. const로 선언했기에 str변수는 ‘hello’ 이외에 다른 문자열이 될 수 없습니다. 그런데 이전 절에서는 string으로 표기한것이죠. 여기서 알아야할 게 2가지가 있습니다. 
      • 1. 타입을 표기 할때는 ‘hello’, 123, false 같은 정확한 값을 입력할 수 있습니다. 이를 리터럴 타입이라고 부릅니다. 리터럴 타입에 대해서는 다음 절에서 자세하게 살펴봅니다.
      • 2. 타입을 표기할때는 더 넓은 타입으로 표기해도 문제가 없ㅅ브니다. 예를 들어 다음 코드에는 아무런 에러도 없습니다

        • const str1: 'hello' = 'hello'
          const str2: string = 'hello'
          const str3: {} = 'hello'

        • 참고로 { } 타입은 객체를 의미하는 것이 아니라 null 과 undefined를 제외한 모든 타입을 의미합니다. 셋중 제일 정확한 타입은 ‘hello’ 입니다.
  • 이러한 이유로 타입스크립트가 제대로 추론했다면 그대로 사용하고 잘못 추론했따면 그때 직접 타입을 표기한다는 원칙을 세우게 되었습니다.
  • const 대신 let 을 사용하는 경우도 한번 보고 넘어가보면 좋겠습니다.

    • let str= 'hello' ---- let str: string
      let num = 123   ----- let  num: number
      let bool = false  --- let bool: boolean
      let n = null     ---- let  n: any
      let u = undefined --- let u: any
      let sym = Symbol('sym')  ------- let sym: symbol
      let big = 1000000n --- let big: bigint
      let obj = { hello : 'world' } -- let obj:

    • let 을 사용하면 const와는 전혀 다르게 추론합니다. let으로 선언한 변수는 다른 값을 대입할 수 있기 때문에 타입을 넓게 추론합니다. 이러한 현상을 타입 넓히기(Type Widening)라고 부릅니다. 다만 자료형을 바꾸는 경우는 그리 많지 않으므로 처음 대입한 값의 타입을 기반으로 추론합니다.
    • 또 특이한 점이 몇가지 있습니다 먼저 null, undefined를 let 변수에 대입할때는 any로 추론합니다. 이점은 기억해두는것이 좋습니다.
    • sym은 const일때는 typeof sym 이었는데 let일때는 symbol입니다. typeof sym은 고유한 symbol을 의미합니다. const이므로 다른 symbol로 변경할수 없는 symbol 인것이죠. 타입스크립트는 이를 unique symbol 이라고 표현합니다. unique symbol끼리는 서로 비교할 수 없습니다. 다만 unique symbol 과 일반 symbol끼리나 두개의 일반 symbol 끼리는 비교할 수없습니다.