[러닝 타입스크립트] 정리

타입스크립트에서 사용하는 개념들을 빠르게 훑기 위해서 선택했습니다. 앞쪽은 3장씩 읽을만했는데 뒤로 갈수록 내용이 심화되어 하루에 2장씩 읽었습니다. config 부분은 분량이 다른 장 보다 길어서 하루에 이 장 하나만 읽었습니다. 2월 13일부터 읽기 시작해서 2월 23일에 다 읽었습니다. 주말 제외하고 면접 본 날 제외하고 하면 일주일 정도 걸려서 읽은 것 같습니다. 다시 또 볼 생각이라 빠르게 훑어보기만 했습니다. 그래서 어떤 개념을 배웠는지 정리가 좀 필요한 것 같습니다.

요약

1부 개념

• 1부에서는 타입스크립트가 자바스크립트의 어떤 문제점을 해결하는지 타입 시스템이 어떻게 타입을 이해하는지에 대한 간단한 기초 지식을 소개합니다.

• 타입스크립트가 자바스크립트의 어떤 문제점을 해결하는지

  • 자바스크립트는 동적 타입 언어이기 때문에 런타임에 에러 발생 가능성이 높습니다.
  • 타입스크립트는 런타임 전에 컴파일러를 통해서 타입을 검사해 타입 오류와 구문 오류를 실행 전에 찾아낼 수 있습니다.

• 타입 시스템은 어떻게 타입을 이해하는지

  • 타입스크립트는 구조적 타이핑 방식으로 동작합니다.

    • 타입스크립트의 구조적 타이핑 방식으로 자바스크립트의 일반적인 타이핑 방식인 덕 타이핑을 그대로 모델링 했기 때문에 자바나 코틀린과 같은 다른 타입 언어들과 다른 방식으로 타입의 관계를 결정합니다.
  • 구조적 타이핑이란 오직 멤버만으로 타입의 관계를 결정하는 방식입니다.
  • 때문에 타입스크립트는 점진적 타이핑이 가능한 동적 타입 언어입니다.
  • 점진적 타이핑 언어는 프로그램 전체가 아닌 프로그래머가 명시한 일부 부분만 정적 타입 검사를 거치게 하고 나머지 부분은 그대로 동적 타입 검사가 이루어지도록 하여 점진적인 개선을 가능케 합니다.

  • 타입 시스템의 동작

    1. 코드를 읽고 변수의 타입과 값을 이해

    2. 변수가 초기 선언에서 가질 수 있는 타입 확인

       • 타입 추론 : 타입스크립트가 코드를 해석해 나가는 동작. 변수를 선언하거나 초기화 할 때 타입이 추론된다.
    3. 변수가 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인

    4. 변수의 타입과 변수에 할당하려는 값이 일치하지 않으면 사용자에게 오류 표시

       • 할당 가능성 검사
  • 타입 어노테이션을 통해서 타입을 명시적으로 선언할 수 있습니다.

  • 타입스크립트의 타입은 유니언 타입, 교차 타입과 같이 2개 이상의 타입을 허용하기 때문에 타입 narrowing 또는 타입 가드가 필요합니다.

    • 타입 narrowing : 이전에 유추된 타입보다 더 구체적인 타입임을 코드에서 유추하는 것

    • 타입 가드 : 타입을 좁히는데 사용할 수 있는 논리적 검사

      • in 연산자를 사용해 특정 속성이 있는지 확인함을 통해서 타입을 좁힙니다.
      • 객체의 속성을 나타내는 판별값을 사용하여 타입을 좁힙니다.

2부 특징

• 2부에서는 타입스크립트에서 함수, 배열, 인터페이스, 클래스, 타입 제한자, 제네릭 등을 어떻게 사용되는지에 대해서 소개합니다. 타입스크립트 코드를 작성할 때 사용하는 자바스크립트의 주요 부분과 자바스크립트와 타입 시스템이 상호작용하는 방식에 대해서 배울 수 있습니다.

• 함수

  • 자바스크립트처럼 ?를 사용해 선택적 매개변수를 설정할 수 있습니다. 선택적 매개변수는 암묵적으로 undefined가 될 수 있기 때문에 타입 가드를 반드시 필요로 합니다.
  • 선택적 매개변수(?)와 undefined를 포함한 유니언 타입은 다른 타입으로 간주합니다.
  • 자바스크립트처럼 기본 값을 설정할 수 있습니다.
  • 자바스크립트처럼 나머지 매개변수를 사용할 수 있습니다.
  • 함수도 타입으로 표현할 수 있습니다.
  • 오버로딩을 통해 함수의 이름은 같지만 매개변수 또는 반환값의 타입이 다른 여러 버전의 함수를 정의할 수 있습니다. 오버로딩은 여러 버전의 선언과 하나의 구현 시그니처를 갖습니다. 구현부에서는 선언부에 명시된 타입을 모두 표현할 수 있도록 작성되어야 합니다.

• 배열

  • 타입스크립트의 배열은 자바스크립트의 배열보다 많은 제한을 둡니다. 타입스크립트는 배열이 해당 데이터 타입에서만 작동하도록 제한합니다.
  • 타입스크립트는 가변길이 배열 타입과 튜플 타입을 제공합니다.

• 인터페이스

  • 인터페이스는 타입스크립트에서 이름 없는 객체 리터럴의 별칭이 아닌 이름 있는(명명된) 객체로 간주합니다.
  • 인터페이스는 extends 키워드를 사용해서 확장할 수 있습니다.
  • 인터페이스는 선언 병합이 가능합니다.

• 클래스

  • 클래스 속성을 명시적으로 선언하면 타입스크립트는 클래스 인스턴스에서 무엇이 허용되고, 무엇이 허용되지 않는지 빠르게 이해할 수 있습니다.
  • 타입스크립트는 클래스 뒤에 implements 키워드를 사용하여 클래스의 확장 인스턴스가 인터페이스를 준수한다고 선언할 수 있습니다.

  • 클래스는 extends 키워드를 사용하여 다른 클래스를 확장할 수 있습니다. 클래스를 확장할 경우 해당 클래스의 인스턴스의 할당 가능성을 다음과 같이 결정됩니다.

    • 하위 클래스에 추가 속성이 있어 상위 클래스와 모든 멤버가 동일하지 않을 경우 다운 캐스팅 (상위 -> 하위)이 불가 합니다.
    • 하위 클래스의 모든 멤버가 상위 클래스와 동일하다면 다운 캐스팅 (상위 -> 하위)이 가능합니다.
    • 업 캐스팅 (하위 -> 상위)은 언제나 가능합니다.
  • abstract 키워드를 사용해 추상 클래스를 선언할 수 있습니다.
  • 가시성 제한자를 사용해 클래스 멤버의 접근성을 설정할 수 있습니다. 하지만 이는 타입 시스템 내에서만 존재하기 때문에 자바스크립트로 컴파일 되면 제거됩니다.

• 타입 제한자

  • top 타입은 시스템에서 가능한 모든 값을 나타내는 타입으로 any와 unknown이 있습니다. unknown 타입의 값이 any보다 제한적으로 취급되기 때문에 any보다 unknown을 사용하는 것을 권장합니다.
  • bottom 타입은 값을 가질 수 없고 참조할 수 없는 타입으로 never가 있습니다.
  • 타입 서술어는 사용자 정의 타입 가드입니다. 매개변수의 이름 is 특정 타입 형태를 사용하여 단순 boolean 값이 아닌 구체적인 타입을 나타낼 수 있도록 합니다.

• 제네릭

  • 제네릭은 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 함수 또는 클래스 등 구현체의 내부에서 사용할 데이터의 타입을 외부에서 지정하는 기법입니다. 제넥릭을 사용하면 더 유연한 코드를 작성할 수 있습니다.
  • extends 키워드를 사용하여 제네릭의 타입을 제한할 수 있습니다.
  • 타입스크립트는 프로미스에 명식적으로 제네릭 타입 인수가 없다면 기본적으로 매개변수 타입을 unknown으로 가정하기 때문에 Promise의 타입 인수를 명시적으로 선언해 주어야 합니다.

3부

• 3부에서는 선언 파일을 통해서 기존의 자바스크립트 코드와 타입스크립트가 어떻게 자바스크립트 코드를 이해할 수 있도록 하는지와 tsconfig를 통해 타입스크립트 컴파일 옵션을 설정하는 내용, IDE와 더불어 타입스크립트를 사용하는 법을 소개합니다.
• 선언 파일은 타입을 정의하기 위해서 존재하는 파일입니다. 기존 자바스크립트로 만들어진 서드파티 모듈들을 타입스크립트 환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일이 되기도 합니다. 선언 파일에는 구현과 별도로 타입 형태를 선언하기 때문에 자바스크립트로 컴파일할 수 있는 모든 런타임 코드를 포함할 수 없습니다.

4부

• 4부에서는 기존의 타입스크립트에서 더 발전된 형태의 내용들을 배우게 됩니다.
• 타입스크립트에서 자바스크립트 구문을 확장한 기능인 클래스의 매개변수 속성 선언과 실험적 데코레이터 enum, 네임 스페이스에 대해서 소개합니다.
• 매핑된 타입, 조건부 타입, 템플릿 리터럴 타입 등 타입을 더 유용하게 사용할 수 있는 방법을 소개합니다.

적용할 것

• typescript exercises 나왔던 문제 처럼 api 통신하는 부분에 제네릭을 적극적으로 사용할 계획입니다.
• leading 토이 프로젝트에 디자인 시스템에 템플릿 리터럴 타입이 유용하게 사용될 것 같습니다.
• 이전의 프로젝트에서는 타입 가드에 대해서 신경쓰지 않고 작업을 했는데 leading 토이 프로젝트에서는 타입 가드에 더 신경 써보려고 합니다.

Ref.

• 러닝 타입스크립트 - YES24
• https://ahnheejong.name/articles/types-basic-concepts/