이펙티브 타입스크립트 스터디 - 1장

이 글은 책 "이펙티브 타입스크립트" 스터디를 진행하면서 정리한 글이다.

 본 글은 1장 타입스크립트 알아보기 까지를 정리한 글로,

해당 책을 읽기 위해서 사전에 이미 알고있어야 하는 개념 및 용어들을 먼저 정리하겠다.

용어 정리

- 덕 타이핑 ( Duck Typing )

 객체의 실제 타입보다는 그 객체가 어떤 메서드나 속성을 가지고 있는지에 따라 동작을 결정하는 개념

즉, "새가 오리처럼 걷고, 오리처럼 꽥꽥거리면, 우리는 그것을 오리라고 부른다"

 

- 인터프리터 언어

  코드를 한 줄씩 읽고 실행하는 방식의 프로그래밍 언어. python, javascript 등

 

- 컴파일

  사람이 작성한 소스 코드(고급 언어) 를 기계어(저급 언어, 바이너리 코드)로 변환하는 과정.

 

- 트랜스파일

  한 프로그래밍 언어를 같은 수준(고급 언어) 의 다른 언어로 변환하는 과정.

Typescript -> Javascript

 

- 런타임

 프로그램이 실행되는 시간(환경)을 의미함. 실제로 프로그램이 실행되는 순간.

 

알고 있어야 하는 Typescript 문법 및 개념

• interface
  • 객체의 구조(타입)를 정의하는데 사용.
  • extends 로 확장 가능 - 모든 속성과 메서드를 그대로 상속 받음.
  • 같은 이름의 interface 끼리 자동 병합
• type 
• class
• 등등.. 그냥 기본적인 타입스크립트 문법 및 사용법을 숙지한 상태여야지 책 자체가 이해가 될 것 같다.
• 타입 스크립트 핸드북 해당 사이트에 있는 개념을 모두 아는 상태로 이펙티브 타입스크립트 책을 읽으면 좋을 것 같다.

 

Introduction | 타입스크립트 핸드북

 

1장 타입스크립트 알아보기

아이템 1 타입스크립트와 자바스크립의 관계 이해하기

• 타입스크립트는 자바스크립트의 상위결합
• 타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다.

 

• 모든 자바스크립트 프로그램은 이미 타입스크립트 프로그램이다.
• 타입체커를 통과했다고 해서 런타임 오류가 안나는 것은 아니다.
• 타입스크립트의 타입 시스템은 자바스크립트의 런타임 동작을 모델링한다.
  • 즉 자바스크립트에서 문제가 업는 구문은 타입스크립트에서도 문제가 없다. ( 근데 문제가 되는 경우도 있다. )

 

아이템 2  타입스크립트 설정 이해하기

• 타입스크립트가 타입체크를 어떻게 할지는, 설정에 따라 다르다.
• 타입스크립트 설정 변경하는법
  1. tsc 명령어 동작시 옵션 추가하기
     ex) tsc --noImplicitAny program.ts
  2. tsconfig.json 파일 이용하기
     tsc --init 으로 생성 가능
     compilerOptions 에 설정 인자를 추가함으로 변경 가능.
• 설정의 종류
  • 100가지가 넘음.
  • noImplicitAny
    • 변수들이 미리 정의된 타입을 가져야 하는지에 대한 여부를 제어.
    • 타입 설정안하면 any 타입으로 간주. -> 암시적 any ( implict any )
    • 되도록이면 true 로 설정하자. 타입을 명시하는 습관을 들이자.
    • 설정해제는 언제하는게 좋을까 ? js 에서 ts 로 전환하는 경우 쓰면 유용하다!
      • -> 회사 프로젝트를 js 에서 ts 로 전환하였는데, 모든 설정을 켜놓고 전환해서 정말 힘들었던 기억이 있다.. 그 전에 이책을 읽었다면 좋았을텐데.. ㅎㅎ
  • strictNullChecks
    • null 과 undefined 가 모든 타입에서 허용되는지 확인하는 설정
    • 해제시: 타입을 number 로 선언해도, undefined , null 로 할당이 가능
    • 이것도 되도록이면 설정을 키자!
    • 이걸 키려면 noImplicitAny 가 먼저 켜져있어야 한다.
  • strict
    • 위 두가지 규칙을 포함한 대부분의 오류를 잡아주는 설정
    • 그냥 이걸 true 로 하고 프로젝트를 항상 시작하자!
      • 회사 프로젝트도 strict: true 로 마이그레이션을 했다..

noImplicitAny	any 타입이 암시적으로 지정되지 않도록 강제
strictNullChecks	null과 undefined를 정확히 체크
strictFunctionTypes	함수 타입 검사를 더 엄격하게 수행
strictPropertyInitialization	클래스의 속성이 생성자에서 반드시 초기화되도록 강제
strictBindCallApply	.bind(), .call(), .apply() 사용 시 타입 검사를 강화
alwaysStrict	파일에 자동으로 "use strict";를 추가하여 엄격한 JavaScript 모드를 활성화

* 참고: strict: true 시 켜지는 설정 ( chat gpt 가 정리잘해줬다. )

 

아이템 3  코드 생성과 타입이 관계없음을 이해하기

• 타입스크립트의 두가지 역할
  • 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일 한다.
    • tsconfig.json 에서 compilerOptions.target 을 통해 어떤 버젼으로 트랜스파일링 할 것인지 정할 수 있다.
  • 코드의 타입 오류를 체크한다.
• 위 두가지 역할은 완전히 독립적으로 행해진다.
• 타입 오류가 있는 코드도 컴파일이 가능하다.
  • 여기서 컴파일 이라는 용어보다는 트랜스파일이란 용어가 더 정확해 보여서, 찾아보았다
  • ✔ 엄밀한 표현 → "트랜스파일"
    ✔ 일반적인 표현 → "컴파일"이라고도 할 수 있음
    ✔ 공식적인 명칭 → TypeScript Compiler(tsc) 🚀
• 런타임에는 타입 체크가 불가하다.
  • instance of 는 런타임에 일어나지만, interface 는 타입이기 때문에 아래와 같은 오류가 난다.
  • 실제로 tsc 과정에서 모든 인페이스, 타입, 타입구문은 그냥 제거 된다.

• class 는 값과 타입이 둘다 가능하다.
  • 타입스크립트에서 class 는 런타임에는 값으로, 컴파일 시점에는 타입으로 동작한다.

 

• 타입 연산은 런타임에 영향을 주지 않는다.
• 런타임 타입은 선언된 타입과 다를 수 있다.
  • ex) api 응답값 같은 경우, 미리 interface 로 약속된 타입을 선언해놓고 사용하지만, 실제로 그 응답값이 오는지는 알 수 없다.
• 타입스크립트 타입으로는 함수를 오버로드할 수 없다.
  • 함수 오버로딩을 지원하지는 하지만 구현체가 하나 이다.
• 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.

아이템 4 구조적 타이핑에 익숙해지기

• 자바스크립트는 본질적으로 덕 타이핑 기반.
• 값을 할당할 때 정의된 타입에 필요한 속성을 가지고 있다면 호환된다. ( 구조적 타이핑 )
• 타입스크립트의 타입은 열려(open) 있다.
  • *봉인된(sealed) 타입: 매개변수의 속성들이 매개변수의 타입에 선언된 속성만을 가지는 것.
  • *열린(open) 타입: 위와 반대. 정의되지 않은 다른 매개변수가 있어도 무관.

• 테스트를 작성할때는 구조적 타이핑이 유리하다

아이템 5 any 타입 지양하기

• any 타입에는 타입 안정성이 없다.
• any는 함수 시그니처를 무시해 버린다.
• any 타입에는 언어 서비스가 적용되지 않는다.
• any 타입은 코드 리팩토링 때 버그를 감춘다
• any는 타입 설계를 감춘다
• an는 타입 시스템의 신뢰도를 떨어뜨린다.
• 그냥 쓰지 말자 !