[TS] 기초 문법

들어가기 전에

• 타입스크립트는 최신 ECMAScript 표준에 포함된 기능을 발빠르게 지원한다.
  - 아직 proposal 단계인 기능 일부까지도...
• 자바스크립트와는 엄밀히 다른 언어이지만,
  뿌리가 되는 JS에 대한 숙련도는 TS를 이용한 프로그래밍의 생산성과 직결된다.

타입 표기

// 식별자(값): 타입
value: type

// ex
const answer: number = 42;
const isTrue: boolean = true;

점진적 타이핑

• 점진적으로 타입 안정성을 키워나가는 것을 허용하는 타입 시스템
• 타입스크립트 컴파일러는 타입 시스템의 엄격한 정도를 위한 다양한 옵션을 제공

• 타입스크립트는 타입 추론을 지원하나, 의존성을 줄이고 명시적으로 타입 정보를 적어주는 것이 좋다.

기본 타입

1. boolean

2. number

3. string

4. null / undefined

• null / undefined, void 이외의 타입을 할당하면 에러 발생

let nullVaule: null = null;
nullValue = 123;	// Error 발생

5. JS에서 대응되지 않는 특수한 타입

any

• 모든 타입과 호환이 가능
• 꼭 필요한 경우에만 사용할 것

let bool: any = true;
bool = 3;
bool = 'hello';

void

• null, undefined 만을 값으로 가질 수 있는 타입

never

• 아무런 값도 가질 수 없는 타입
  - ex. 항상 에러를 throw하는 함수의 반환 타입으로 설정
  

배열

• 표현 방식: type[], Array<type>

튜플

• 배열 원소의 수와 타입이 정확히 지정된 경우, 타입을 지정할 수 있음

const nameAndHeigth: [string, number] = ['홍길동', 170];

// 타입 정의와 다른 갯수의 원소를 갖는 배열을 할당할 경우, 에러 발생
// TypeScript 2.7 부터 적용
const invalidNameAndHeigth: [string, number] = ['홍길동', 170, 42];	// Error

객체

• 중괄호({})를 이용해 표현
• 속성 : 속성의 타입 으로 표현
• 구분자로 콤마(,), 세미콜론(;) 모두 사용 가능

const user: { name: string; height: number; } = { name: '홍길동', height: 170 };

객체의 속성

1. 선택 속성

• 속성명 뒤에 물음표(?)를 붙여 선택적인 속성을 표현할 수 있음

const userWithUnknownHeight: { name: string; height?: number; } = { name: '홍길동'};

2. 읽기 전용 속성

• 속성명 앞에 readonly 키워드를 붙여 속성의 재할당을 막을 수 있다
  - const 변수와 비슷하게 동작

const user: {
  readonly name: string;
  height: number;
} = { name: '홍길동', height: 170 };
user.name = '동길홍';	// Error

타입 별칭

type 타입 별칭 = 실제 타입;

• 타입에 다른 이름을 붙이기
  -> 프로그래머의 의도를 명확히 나타낼 수 있음

type UUID = string;
type Height = number;

function getUser(uuid: UUID) {
// ...
}
getUser(7);	// Error

함수

• 매개변수의 타입
• 반환값의 타입

function sum(a: number, b: number): number { 
	return a + b;
}

매개변수 타입

1. 기본 매개변수

매개변수명: 타입 = 기본값

2. 선택 매개변수

• 매개변수명 뒤에 물음표(?)를 붙여 명시
• 선택 매개변수는 항상 필수 매개변수 뒤에 정의되어야한다.

function hello(name: string = 'stranger', age?: number): void {
  console.log(name);	// kim
  if(age) {
    console.log(age);	// 20
  }
}
hello('kim');

함수 값의 타입 표기

(...매개변수) => 반환 타입

const sum: (a: number, b: number) => number (a, b) => (a + b);

함수 오버로딩

• 하나 이상의 타입 시그니처를 가진 함수 선언
• 단 한번의 함수 구현
  - 여러 타입에 대한 분기는 함수 내에서 처리

function double(str: string): string;
function double(num: number): number;
function double(arg) {
  if(typeof arg === 'string') {
    return `${arg}${arg}`;
  } else if(typeof arg === 'number') {
  	return arg*2;
  }
}

This 타입

• JS에서의 this 값은 실행되는 시점에 결정

함수의 this 타입 명시하기

• 타입 시그니처 매개변수 가장 앞에 this 추가

interface HTMLElement {
  tagName: string;
  /* ... */
}

interface Handler {
  (this: HTMLElement, event: Event, callback: () => void): void;
}

let cb: any;
// 실제 함수 매개변수에는 this가 나타나지 않음
const onClick: Handler = function(event, cb) {
  // this는 HTMLElement 타입
  console.log(this.tagName);
  cb();
}

제네릭

• 여러 타입에 대해 동작하는 함수 정의
• 함수를 정의할 때는 타입을 알 수 없으나, 사용할 때에만 타입 정보를 알 수 있는 경우 사용

타입 변수

• <타입변수>
• 요소를 사용하는 시점에만 알 수 있는 타입을 담아두는 변수
• PascalCase 명명법 사용

function getFirstElem<T>(arr: T[]): T {
// ...
}
const language = getFirstElem<string>(['hi', 'hello']);

유니온 타입

• 여러 타입을 가질 수 있는 경우에 사용
• 가능한 타입들을 파이프 기호(|)로 이어서 사용

type Whatever = number | string | boolean;

// 여러 줄에 걸쳐 정의 가능
type Whatever
	= number
	| string
	| boolean;

인터섹션 타입

• 여러 타입을 모두 만족하는 타입을 표현할 때 사용
• 여러 타입을 앰퍼샌드 기호(&)로 이어서 사용

type Awesome = Programmer & BeerLover & CatLover;

// 여러 줄에 걸쳐 정의 가능
type Awesome 
	= Programmer 
	& BeerLover 
	& CatLover;

열거형

- 열거형 사용을 웬만해서 추천하지 않는 듯 하다...

멤버

1. 상수 멤버: 컴파일 타입에 알 수 있는 상수값으로 초기화되어있는 멤버
2. 계산된 멤버: 실제로 코드를 실행시켜봐야 값을 알 수 있는 멤버

• 계산된 멤버 뒤에 오는 멤버는 열거형 정의 시 반드시 초기화되어야 함.

1. 숫자 열거형

• 열거형의 멤버 값을 초기화 하지 않은 경우, 0부터 순차적으로 증가하는 값을 가짐

enum Direction {
  East,
  West,
  South,
  North
}
const south: Direction = Direction.south;
console.log(south);	// 2

// 중간에 초기화되지 않은 멤버가 있을 경우, 이전 멤버 값으로 부터 순차적으로 증가됨
enum InitializedDirection2 {
  East = 3,
  West /* 4 */,
  South = 7,
  North /* 8 */
}

2. 문자 열거형

• 숫자 열거형과 달리 자동 증가되지 않는다
• 정의할 때, 명시적으로 초기화되어야 함

3. 유니온 열거형

• 모든 멤버가 값이 표기되지 않거나 / 문자열 리터럴 / 숫자 리터럴 중 하나에 해당하는 열거형
• 유니온 열거형의 멤버는 값인 동시에 타입이 됨