TypeScript - Learning TypeScript Chp.2 Type System

2.1 Type의 종류

• 타입
  • JavaScript에서 다루는 값의 형태에 대한 설명
• 형태
  • 값에 존재하는 속성, 메서드, 내장되어 있는 typeof 연산자가 설명하는 것

// singer : string
let singer = "Aretha";

원시 타입(Primitive type)

• TypeScript의 원시 타입은 JavaScript의 원시타입과 동일합니다.

• 원시 타입의 종류

  • null
  • undefined
  • boolean
  • string
  • number
  • bigint
  • symbol

• TypeScript는 계산된 초기값을 갖는 변수의 타입을 유추할 수 있습니다.

// bestSong : string
let bestSong = Math.random() > 0.5 ? 'Chain of Fools' : 'Respect';

2.1.1 Type System

• 타입 시스템(type system)

  • 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합

• TypeScript의 타입 시스템의 작동 과정

  1. 코드를 읽고 존재하는 모든 타입과 값을 이해합니다.
  2. 각 값이 초기 선언에서 가질 수 있는 타입을 확인합니다.
  3. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인합니다.
  4. 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시합니다.

• 타입 오류가 발생한 예시

let firstName = 'Whitney';
// Error : This expression is not callable.
// Type 'Number' has no call signature
firstName.length();

• 위 예시에서 타입스크립트가 오류를 표시하는 과정
  1. 코드를 읽고 firstName이라는 변수를 이해합니다.
  2. 초기값이 'Whitney'이므로 firstName이 string 타입이라고 결론짓습니다.
  3. firstName이 .length 멤버를 함수처럼 호출하는 코드를 확인합니다.
  4. string의 .length 멤버는 함수가 아닌 숫자라는 오류를 표시합니다.
     • string.length는 함수처럼 호출할 수 없습니다.

2.1.2 Error의 종류

• 구문 오류(syntax error)
  • TypeScript가 코드로 이해할 수 없는 잘못된 구문을 감지했을 때 발생하는 오류
• 타입 오류(type error)
  • 타입 검사기(type checker)가 타입에서 오류를 감지했을 때 발생하는 오류

구문 오류(syntax error)

• TypeScript가 코드로 이해할 수 없는 잘못된 구문을 감지했을 때 발생합니다.
• TypeScript가 TypeScript 파일에서 JavaScript 파일을 올부르게 생성할 수 없도록 차단합니다.
• tsc 설정을 통해 TypeScript 코드를 JavaScript 코드로 변환할 수 있지만, 예상한 출력 결과와 다를 수 있습니다.

// TypeScripe file
// Error: ',' expected
let let wat;

// compiled JavaScript file
let let, wat;

타입 오류(type error)

• TypeScript의 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생합니다.
• 타입 오류가 TypeScript 구문이 JavaScript로 변환되는 것을 차단하지는 않습니다.
• 코드가 실행될 때 무언가 충돌하거나 예기치 않게 작동할 수 있음을 나타냅니다.

// Error: Property 'blub' does not exist on type 'Console'.
console.blub("Nothing is worth more than laughter.");

2.2 할당 가능성(Assignable)

• TypeScript는 변수의 초기값을 읽고 해당 변수가 허용되는 값을 결정합니다.
• 나중에 해당 변수에 새로운 값이 할당되면, 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인합니다.
  • 변수에 동일한 타입의 다른 값을 할당될 때는 문제가 없습니다.
  • 변수에 다른 타입의 값이 할당되면 타입 오류가 발생합니다.

let firstName = 'Carole';
firstName = 'Joan';
// Error: Type 'boolean' is not assignable to type 'string'
firstName = true;

• 할당 가능성(assignable)
  • 변수나 함수에 전달된 값이 예상된 타입으로 할당 가능한지 여부를 확인하는 것

2.3 타입 애너테이션(Type Annotation)

• 초기값이 없는 변수
  • TypeScript가 초기 타입을 유추할 수 없습니다.
  • 기본적으로 암묵적인 any 타입으로 간주합니다.
  • 모든 타입의 값이 할당될 수 있습니다.(downcast)
  • 새로운 값이 할당 될 때마다 변수 타입에 대한 이해를 발전시킵니다.
  • 진화하는 any라고 부릅니다.

rocket; // Type: any

rocket = 'John Jett'; // Type: string
rocket.toUpperCase(); // Ok

rocket = 19.58; // Type: number
rocket.toPrecision(1); // Ok

rocket.toUpperCase(); // Error: 'toUpperCase' does not exist on type 'number'

• 타입 애너테이션(type annotation)
  • 초기값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문
  • 변수 이름 뒤에 배치됩니다.
  • 콜론(:)과 타입 이름을 차례대로 기재합니다.

let rocket: string;
rocket = 'Joan Jett';

• 타입 애너테이션은 TypeScript에만 존재합니다.
  • 컴파일시 해당 코드가 삭제됩니다.
  • 런타임 코드에 영향을 주지 않습니다.

// complied JavaScript file
let rocket;
rocket = 'Joan Jett';

• 변수에 타입 애너테이션으로 정의한 타입 외의 값을 할당하면 타입 오류가 발생합니다.

let rocket: string;
// Error: Type 'number' is not assignable to type 'string'.
rocket = 19.58;

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

• 타입 애너테이션은 TypeScript가 자체적으로 수집할 수 없는 정보를 TypeScript에 제공할 수 있습니다.
• 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있습니다.
  • 초기값이 있는 변수에 타입 애너테이션을 추가하면, TypeScript는 변수에 할당된 값의 타입이 일치하는지 확인합니다.
  • 타입 추론이 가능한 변수에 타입 애너테이션이 불필요합니다.

let firstName: string = 'Tina';

• 실수로 변수 타입이 변경되지 않도록 TypeScript를 보호하기 위해 변수에 명시적으로 타입 애니테이션을 포함하는 것이 유용할 수 있습니다.
  • 아무것도 변하지 않는 변수에 타입 애너테이션이 불필요합니다.

2.4 타입 형태

• TypeScript는 객체에 어떤 멤버 속성이 존재하는지 알고 있습니다.
• 객체의 멤버에 접근하려고 할 때, TypeScript는 접근하려는 멤버 속성이 해당 객체의 타입에 존재하는지 확인합니다.

let cher = {
  firstName: 'Joan',
  lastName: 'Jett',
}
// Error: Property 'middleName' does not exist on type
cher.middleName;

2.4.1 모듈(module)

• ECMAScript 2015에 파일 간에 가져오고(import) 내보내는(export) 구문을 표준화하기 위해 ECMAScript Modules(ESM)이 추가되었습니다.
• 모듈 타일에 선언된 무든 것은 해당 파일에서 명시한 export문에서 내보내지 않는 한 모듈 파일에서만 사용할 수 있습니다.(모듈 스코프)
  • 한 모듈에서 다른 파일에서 선언된 변수와 동일한 이름으로 변수를 선언할 수 있습니다.
  • 다른 파일에서 선언된 변수를 가져오지 않는 한 이름 충돌로 간주하지 않습니다.

// a.ts
export const shared = 'Cher';

// b.ts
export const shared = 'Cher';

// c.ts
// Error: Import declaration conflicts with local declaration of 'shared'.
import { shared } from './a';
const shared = 'cher';

• 파일이 스크립트면(모듈이 아니면), TypeScript는 해당 파일을 전역 스코프로 간주하므로 모든 스크립트가 파일 내용에 접근할 수 있습니다.
  • 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 변수와 동일한 이름을 가질 수 없습니다.

// a.ts
// Error : Cannot redeclare blocked-scoped variable 'shared'
const shared = 'Cher';

// b.ts
// Error : Cannot redeclare blocked-scoped variable 'shared'
const shared = 'Cher';