[타입스크립트] 간단 개념정리

타입스크립트와 자바스크립트의 차이

• 자바스크립트에서 오류로 나오지 않는 부분이 오류로 나옴let obj = {}function a(b) {}
• a(“2”) // NaN > error
• return b/2
• obj.foo // undefined > error
• 3 +[] // 3 > error

---

 

타입스크립트의 컴파일러

• 다른 언어랑 다른 점AST라는 자료구조 형태로 변환
  • AST란
  • 공백 주석 등의 결과를 완전 무시
  타입스크립트의 컴파일 과정 + 자바스크립트의 컴파일 과정을 거치게 됨
• AST 로 변환을 완료하기 전에 타입 확인을 진행 > 코드를 안정화
• 컴파일러가 바이트 코드가 아닌 자바스크립트 코드로 변환

타입 시스템을 갖추고 있음.

• 두 가지 시스템
  • 어떤 타입을 사용하는지를 컴파일러에 명시
  • 자동으로 타입을 추론하는 타입
• 자바스크립트 vs 타입스크립트
  • 자바스크립트
    • 런타임에 타입 확인 및 에러 검출
    • 타입 자동변환
      • 암묵적 형변환 사용
    • 동적으로 타입 결정
      • 프로그램을 실행해야지만 특정 데이터의 타입을 알 수 있음
    • 약한 타입의 언어, 숫자 + 배열 과 같은 말이 안되는 문법을 시도해도 오류를 내지 않음
    • 타입이 무엇인지 따지지 않음
    • 문제의 원인을 추적하기가 어려운 단점
  • 타입스크립트
    • 컴파일 타임에 타입 확인 및 에러 검출
      • 문법 에러와 타입 관련 에러 모두 검출
      • 스택 오버플로우, 네트워크 연결 끊김, 잘못된 사용자 입력 등의 런타임 예외도 많음.
    • 타입 자동변환 X
    • 정적으로 타입 결정
      • 점진적으로 특정 데이터의 타입을 확인
      • 컴파일 타임에 모든 타입을 알고 있을 때에 최상의 결과를 보여줄 수 있지만, 무조건적으로 모든 타입을 알아야하는 것은 아님
      • 자바스크립트 코드를 타입스크립트 코드로 마이그레이션 할 때에 유용
    • 코드 실행 전에 문법 오류를 탐지
  TSC (타입스크립트 컴파일러) 실행을 위해서는 Node.js가 필요

---

 

타입

• 유효하지 않은 동작이 실행되는 일을 예방
  • 매개변수에도 타입을 명시해줌
• 타입스크립트가 지원하는 타입의 종류
  • any
    • 뭐든지 할 수 있지만, 꼭 필요한 상황이 아니라면 사용하지 않는 것이 좋음
    • 컴파일 타임에 모두가 타입이 있어야 하므로, 타입을 알 수 없는 상황에서는 any 라고 가정
    • 자바스크립트처럼 동작하게 하므로 타입 검사기가 제 기능을 할 수 없음
  • unknown
    • 미리 알 수 없는 값에 any 대신 사용
    • any와 같이 모든 값을 대표하지만, 타입을 검사하여 정제하기 전까지는 unknown 값을 사용할 수 없도록 함
    • 비교연산, 반전(!) 연산 가능하고, typeof, instanced 연산자로 정제 가능
  • boolean
    • true, false
    • 비교연산, 반전(!) 연산 만 가능
    • 타입 리터럴 : 오직 하나의 값을 나타내는 타입
  • number
    • 모든 숫자(정수, 소수, 양수, 음수, Infinity, NaN 등)
    • 덧셈(+) 뺄셈(-) 모듈로(%) 비교(<) 등의 숫자 관련 연산 수행 가능
    • 분리자 사용 가능
  • bigint
    • 자바스크립트와 타입스크립트에 새로 추가된 타입
    • 라운딩 관련 에러 걱정 없이 큰 정수 처리 가능const b = 5678n // 5678nlet d: bigint = 100 // error, ‘100’ 타입은 ‘bigint’ 타입에 할당할 수 없음
  • string
    • 모든 문자열의 집합
  • symbol
    • 새로 추가된 기능
    • 실무에서는 자주 사용하지는 않음
    • 객체와 맵에서 문자열 키를 대신하는 용도로 사용
  • 객체
    • 객체 리터럴 또는 형태라 불리는 표기법({a: string}).
      • 객체가 어떤 필드를 포함할 수 있는지 알고 있거나 객체의 모든 값이 같은 타입을 가질 때 사용
    • 빈 객체 리터럴 표기법({}).
      • 이 방법은 사용하지 않는 것이 좋음
    • object 타입.
      • 어떤 필드를 가지고 있는지는 관심 없고, 그저 객체가 필요할 때 사용
    • Object 타입.
      • 사용하지 않는 것이 좋음.
  • 타입스크립트도 이름 기반 타입(nominal type) 스타일보다는 자바스크립트 스타일 선호
• 타입 별칭
  • 변수를 선언해서 값 대신 변수로 칭하듯이 타입 별칭으로 타입을 가리킬 수 있음.
  • 타입스크립트는 별칭을 추론하지는 않으므로, 반드시 별칭의 타입을 명시적으로 정의해야 함
  • 타입 별칭은 프로그램의 논리에 영향을 미치지 않고 별칭이 가리키는 타입으로 대치할 수 있음
  • 자바스크립트와 마찬가지로 하나의 타입을 두 번 정의할 수 는 없음.
    • type Person = {age : Age}
    • name: string
    • type Age = number
  • 타입별칭도 블록 영역에 적용
    • 복잡한 타입을 DRY( 같은 코드를 반복 ) 하지 않도록 함
• 유니온과 인터섹션 타입
  • 유니온 : 합집합 ( | )
  • 인터섹션 : 교집합 ( & )
• 배열
  • T[] , Array<T>
• 튜플
  • 배열의 서브타입
  • 길이가 고정, 각 인덱스의 타입이 알려진 배열의 일종
  • 타입을 명시해야 함
  • 자바스크립트에서 배열과 튜플에 같은 문법(대괄호)을 적용, 타입스크립트에서는 대괄호를 배열으로 추론
• 선택형 요소(?) 지원.
• let trainFares: [number, number?][] = [
• 나머지 요소(…)를 사용할 수 있음
  • let list: [number, boolean, …string[]] = [1, false, ‘a’, ‘b’, ‘c’]
• 이형 배열을 안전하게 관리할 뿐 아니라, 배열 타입의 길이도 조절
• 순수 배열에 비해 안정성을 높일 수 있음.

 

• null, undefined, void, never
  • never : 절대 반환하지 않는 함수 타입 ( 예외를 던지거나 영원히 실행되는 경우 )
• 열거형 ( enum )