TypeScript 기본 (1)

1. TypeScript란?

• Typed JavaScript at any Scale -> JavaScript에 type 추가해 확장시킨 것
• 실행 전 오류 정정 시간 절약 가능

// JavaScript
function add(n1, n2){
  if (typeof n1 !== 'number' || typeof n2 !== 'number'){
    throw new Error('Incorrect input!');
  }
  return n1+n2;
}
const result = add(39, 28);

// TypeScript
function add(n1: number, n2:number){
  return n1+n2;
}
const result = add(39,28);

• 완전한 오픈소스, 모든 브라우저 및 OS에서 실행 가능
• JavaScript의 Typed Superset으로 이 자체가 하나의 언어
• Compile 거쳐 plain JavaScript로 변환됨
  +) 컴파일 후 실행되면 comiled language, 컴파일 없이 코드 자체가 실행되면 interpreted language
• Type Annotation: TypeScript의 고유한 기능 (js와 구분)

let a = 'Mark';
a = 39; // 불가능(변수 a의 type이 string으로 자동 지정되어서)

let b; // type은 any
let c: string; // type을 string으로 선언 -> Type Annotation

function hello(d: number){} // 매개변수에도 가능
hello(30); // 가능
hello('Loopy'); // 불가능

---

2. 설치 및 사용

• Node.js(https://nodejs.org/en/) + NVM (https://github.com/coreybutler/nvm-windows)

• $ npm i typescript -g typescript 설치 (global)
  (여기서 -g 없이 설치하면 이후에 $ npx tsc 형태로 사용)
  $ tsc --init tsconfig.json 생성
  $ tsc test.ts 해당 파일에 ts compiler 적용
  $ tsc 전체 파일에 ts compiler 적용
  $ tsc -w watch 모드 -> 변경사항 발생할 때 마다 자동으로 컴파일러 적용

  ---

3. Basic Types

• TypeScript는 Static Types (set during development)
  JavaScript는 Dynamic Types (resolved at runtime)
• ECMAScript 표준에 따른 기본 자료형: boolean, number, string, null, undefined, symbol, array(object형)
  +) 추가제공: any, void, never, unknown, enum, tuple(object형)
• Primitive Types: 오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형 -> 내장함수 사용 가능 (🌟 boolean, number, string, symbol, null, undefined 전부 소문자)

1) boolean

• new Boolean(false); 래퍼 객체로 생성되어 object type이므로 권장X (그냥 let a = false;로 사용하기)
  
  

2) number

• decimal(10) 그냥 적기, hex(16) 0xf00d, binary(2) 0b1010, octal(8) 0o744
• 숫자 크면 반점 대신 1_000_000 꼴로 사용

3) symbol

• tsconfig.json의 lib에 ["ES2015", "DOM"] 추가 후 사용
• 함수로는 Symbol() 타입으로는 symbol
• 고유하고 수정 불가능한 값 -> 접근제어에 많이 사용
• Symbol('foo') === Symbol('foo') // false

4) null & undefined

• 다른 모든 타입에 null과 undefined 할당 가능 -> 즉, 다른 모든 타입의 서브타입
• --strictNullChecks옵션: null과 undefined도 자신에게만 할당 가능 (예외로 void에 undefined는 무조건 가능)
  -> union 타입 활용: let u: string | null = null;
• null은 무언가 있는데 사용 준비가 덜 된 상태(typeof -> object)
• undefined는 무언가 아예 준비가 안된 상태(typeof -> undefined)
  +) object의 property 없을 때도 undefined

5) Object

• non-primitive type 의미
• 중괄호{} 필수

6) Array

• object의 일종으로, type이 같은 자료를 모아둠
• let li = [1,2,3];
let li: number[] = [1,2,3];
let li: Array<number> = [1,2,3];
let li: (number | string)[] = [1,2,3,'가'];

7) Tuple

• let x: [string, number]; 순서, 타입, 길이 전부 맞아야 함

8) Any

• 어떤 타입도 괜찮다는 의미
• a에게 영향을 받는 개체 통해 전파되므로 이후에 누수 막아줘야 함
  -> ⭐최대한 쓰지 않기 (모든 편의는 타입 안정성을 잃는 대가)

9) Unknown

• 모르는 변수의 타입 -> 이 변수가 무엇이든 될 수 있음을 의미
• any보다 Type-safe (둘 다 아무거나 할당 가능하다는 공통점)

const maybe: unknown;
if (typeof maybe === "string") { // typeof 타입 가드
  const aString: string = maybe;
}
if ... 

10)Never

• return에 많이 사용
• 모든 타입의 서브타입 -> 모든 타입에 할당 가능
• never 타입에는 any 포함한 모든 타입 할당 불가능

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

11)Void

• 값을 반환하지 않는 함수에 사용