관리 메뉴

꿈꾸는 개발자

2장 타입 시스템 본문

Learning Typescript

2장 타입 시스템

rickysin 2023. 2. 27. 14:26

2.1 타입의 종류


  • 타입: 값의 형태에 대한 설명 ⇒ 형태: typeof 연산자가 설 명하는 것을 의미
  • 타입스크립의 가장 기본적인 타입은 JS의 일곱 가지 기본 원시 타입과 동일
    • null
    • undefined
    • boolean
    • string
    • number
    • bigint
    • symbol
let bestSong= Math.random()>0.5 ? "chain of fools": "respects";
  • 위는 무조건 string이기 때문에 type은 string으로 표시됨

2.1.1 타입 시스템


  • 타입 시스템은 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이다
  • 기본적인 타입 시스템의 작동 규칙:
    • 코드를 읽고 존재하는 모든 타입과 값을 이해함
    • 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.
    • 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인
    • 값의 사용법이 타입과 일치하지 않으면 사용자에게 요류를 표시
let firstName= " whitney";
firstName.length();
  • 오류 표현 순서는 다음과 같다
    • 코드를 읽고 firstName이란 변수를 이해
    • 초깃값이 “whitney”이므로 fistName이 string 타입이라고 결론
    • firstName의 .length 멤버를 함수처럼 호출하는 코드를 확인
    • string의 length 멤버는 함수가 아닌 숫자라는 오류를 표시함 ⇒ 즉 함수처럼 호출 불가!

2.1.2 오류 종류


  • 구문 오류: 타입스크립트가 JS로 변환되는 것을 차단한 경우
  • 타입 오류: 타입 검사기에 따라 일치하지 않는 것이 감지되는 경우

구문 오류:

  • 타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생 ⇒ 타입스크립트가 파일에서 자바스크립트 파일을 생성할 수 없도록 차단함. ⇒ 물론 설정에 따라서 변환은 가능 하지만 결과값은 예상과 다름 주의!

타입 오류;

  • 타입스크립트 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생 ⇒ JS로 변환되는 것 은 차단하지 않음 ⇒ BUT, 출둥 or 예기치 못한 작동 발생 가능

2.2 할당 가능성


  • 타입스크립트는 변수의 초깃값을 읽고 해당 변수가 허용되는 타입을 결정함 ⇒ 해당 변수에 새로운 값이 할당될 경우 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인함
let firstName  "hoin"; 
firstName="Joan";

let lastName ="King";
lastName=true; //처음에 입력했던 타입과 다른 타입은 입력 불가!
  • 할당 가능성: 타입스크립트에서 함수 호/변수 값 제공 여부 확인 (객체를 비교할 때 중요하게 작용함)

2.2.1 할당 가능성 오류 이해하기


“Type … is not assignable to type….”타입스크립트 코드를 작성할 때 직면하게 되는 일반적인 오류 중 하나

  • 첫 번째 type은 코드에서 변수에 할당하려고 시도하는 값
  • 두 번째 type은 값이 할당되는 변수

2.3 타입 애너테이션


  • 초깃값이 없는 경우 타입 파악 시도X ⇒ 암묵적인 any 타입으로 간주함
  • 진화하는 any타입 : 초기 타입을 유츄할 수 없는 변수
let hellor; //type:any
 
hellor= "Joan Jett"; //type: string

hellor.toUpperCase(); //가능 

hellor=19.58; 
hellor.toPrecision(1); //가능

hellor.toUpperCase(); // 에러 발생!
  • any 타입은 타입스크립트의 타입 검사 목적을 부분적으로 무용지물로 만듦 ⇒ 어떤 값인지 알고 있을 때에만 가장 잘 작동한다.
  • 타입 애너테이션(type annotation): 초깃값을 할당하지 않 고도 변수의 타입을 선언할 수 있는 구문
let hellor:string;
hellor="asdlfkasldf";

//지정된 타입 외의 값을 넣게 되는 경우 에러 발생
  • TS에만 존재 런타임 코드에 영향X ⇒ 유효한 JS구문X ⇒ tsc 명령어를 실행해 JS코드로 컴파일하면 해당 코드는 삭제
"use strict";
let hellor;
hellor = "asdlfkasldf";

  • 위처럼 트렌스파일링 됨

2.3.1 불필요한 타입 애너테이션


  • 타입 애너테이션은 TS가 자체적으로 수집할 수 없는 정보를 TS에 제공 가능 ⇒ 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션 사용 가능
let hellor:string="asdlfkasldf"; //해당 코드의 경우 중복된 정보를 TS에게 준다

let firtName:string = 42; // 에러 발생 ( 타입 오류)
  • 아무것도 변하지 않는 변수에는 타입 애너테이션을 추가하지 않는 것을 권장
  • 코드 문서화/타입 변경 실수 방지를 위해 변수에 명시적으로 타입 애너테이션을 포함하는 것은 경우 따라 유용함

2.4 타입 형태


  • TS는 객체에 어떤 멤버 속성이 존재하는지 앎 ⇒ 코드에서 변수 속성에 접근하는 경우 해당 변수 타입이 존재하는지 확인함
let hellor="asdlfkasldf";

hellor.length; //속성 접근 가능 

hellor.push("1") //해당 속성이 없다고 에러 발생
  • 객체인 경우:
let cher={
    firstName: "helloworld",
    lastName: "hoin",
}

cher.middleName; // Error: 해당 객체에 존재하지 않음을 표시함 JS에서는 임의로 생성 가능했음!

2.4.1 묘듈


  • 모듈: export/import가 있는 파일
  • 스크립트: 모듈이 아닌 모든 파일
  • TS에선 최신 모듈 파일을 기존 파일과 함께 실행 가능

 


Reference:

조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023