typescript 정리-1

타입스크립트란?

타입스크립트는 자바스크립트의 모든 기능을 포함하는 상위 집합의 언어이다. (타입스크립트 = 자바스크립트 + 정적 타입 시스템)

정적 타입 시스템 -> 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식

타입스크립트 동작 원리

타입스크립트는 컴파일 과정에서 문법, 타입 체크 등을 수행한다.

1. 컴파일 시작: tsc 명령어를 사용해 타입스크립트 컴파일러를 실행한다. 이때 tsconfig.json 파일을 참고하여 어떤 파일을 컴파일할지, 어떤 옵션을 사용할지 설정한다.
2. 파일 로드: 컴파일러가 모든 입력 파일과 import된 파일을 로드한다.
3. 코드 분석: 코드를 읽어들여 프로그램 구조를 나타내는 AST(구문 트리)를 만든다.
4. 심볼 테이블 생성: 코드를 분석하여 변수와 함수 등 모든 요소의 관계를 정리한 심볼 테이블을 만든다.
5. 자바스크립트 코드로 변환: AST를 바탕으로 타입스크립트 코드를 자바스크립트 코드로 변환한다.
6. 타입 검사: 컴파일러가 코드를 검사하여 타입 오류를 찾습니다. 오류가 없다면 최종 자바스크립트 파일을 생성한다.

타입을 선언하는 방법

유니온 타입

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B라는 의미의 타입이다.

let union: (string | number);
union = 'Hello World';
union = 777;
union = false; // Error

인터섹션

인터섹션 타입(Intersection Type)은 두 개 이상의 타입을 조합하여 하나의 타입으로 합치는 방식이다. 이는 자바스크립트의 AND 연산자(&&)와 비슷한 개념으로, A이면서 동시에 B인 타입을 의미한다.

interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const testCase2: User & Validation = {
  name: 'jisu',
  age: 30,
  isValid: true
}

함수(function)

let myFunc: (arg1: number, arg2: number) => number;
myFunc = function(x, y) {
  return x + y;
}
myFunc(1, 2); // 3

let noneFunc: () => void;
noneFunc = function () {
  console.log('hihi');
};

그밖의 타입들

읽기 전용 : readonly

let arrA: readonly number[] = [1, 2, 3, 4];
let arrB: ReadonlyArray<number> = [2, 4, 6, 8];

튜플 : Tuple

let tuple: [string, number];
tuple = ['a', 1];
tuple = [1, 'a']; // Error

let userA: [number, string, boolean] = [1234, 'juyoung', true];

let usersA: [number, string, boolean][];
let usersB: Array<[number, string, boolean]>
usersA = [[1, 'chisus', true], [2, 'jisu', false]];

let tupleA: [1, number];
tupleA = [1, 2];
tupleA = [2, 3]; // Error

let a: readonly [string, number] = ['rest', 123];
a[0] = 'work'; // Error

열거형 : enum

enum Week {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}

enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue'
}

객체 : object

let obj: object = {};
let arr: object = [];
let func: object = function () {};
let date: object = new Date();

interface Users {
  name: string,
  age: number
}

let userA: Users = {
  name: 'juyoung',
  age: 27
};

알 수 없는 타입 : unknown

let u: unknown = 123;
let test1: number = u; // Error
let test2: number = u as number;
let test3: any = u;

Never

function error(message: string): never {
  throw new Error(message);
}

const never: [] = [];
never.push(3); // Error

Type alias vs interface

커스텀 타입을 선언하는 방법은 이렇게 Type alias (타입 별칭) 과 Interface (인터페이스) 이렇게 두 가지가 있다.

둘의 차이점

인터페이스 - 확장이 가능하다, 다른 인터페이스를 상속하거나 동일한 이름으로 다시 열어 새로운 속성을 추가할 수 있다.
타입 - 타입 별칭은 한 번 정의되면 다시 열어 새로운 속성을 추가할 수 없다. 따라서 동일한 타입에 새로운 속성을 추가해야 하는 경우 인터페이스가 더 유리하다.

주로 객체의 형태를 정의하고 확장 가능성을 염두에 두어야 한다면 인터페이스를 사용하는 것이 좋고, 복잡한 타입 표현이나 유니온 타입이 필요하다면 타입 별칭을 사용하는 것이 좋을것같다.