TypeScript 간단 정리 - 2

TypeScript 간단 정리 - 2

기본 타입

기본 타입의 종류

  • String
  • Number
  • Boolean
  • Object
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never

String

TypeScript에서는 텍스트 데이터 타입을 string 으로 표현한다. JavaScript처럼 TypeScript도 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용한다.

let str: string = 'TypeScript';

: <- 타입 표기(Type Annotation)

str = 123; // Error
str = true; // Error
str = undefined; // Error

let fullName: string = `NBC`;
let age: number = 10;
let sentence: string = `my name is ${fullName}. I'm ${age + 1} years old`;

Number

TypeScript는 JS와 마찬가지로 10진수, 16진수 표현을 지원하고 ECMAscript 2015에서 소개된 2진수, 8진수 표현도 지원한다.

let num: number = 123;

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Boolean

참/거짓을 의미하는 boolean 이다.

let isTrue: boolean = true;
let isFalse: boolean = false;

Array

TypeScript는 어떤 변수가 배열임을 명시적으로 선언할 수 있다.

let arr: number[] = [1, 2, 3];
let array: Array<number> = [1, 2, 3];

let arr2: string[] = ['1', '2', '3'];
let arr3: boolean[] = [true, false, true];

Tuple

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다. 단, 요소들의 타입이 모두 같을 필요는 없다.

let x: [string, number];
x = ['hi', 1];
x = [1, 'hi']; // Error
console.log(x[0], x[1]);
console.log(x[2]); // Error

x[2] = 'world'; // Error

let tuple: [string, number, boolean] = ['str', 1, false];

Any

자바스크립트의 변수는 다 any 다!

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void

함수에서 반환 값이 없는 경우

function c(): void {
  console.log('c');
}

Null, Undefined

// 아래 코드를 제외하고 이 변수들에 할당할 수 있는 값이 없다!
let a: null = null;
let b: undefined = undefined;

let unionType: number | null = null;

Never

비 정상적 종료가 되거나 함수가 끝까지 실행되지 않을 때 (거의 사용 X)

function a(): never {
  while (true) {

  }
}

function b(): never {
	throw new Error('Error');
}

Object, Enum (다른 글에서 다룸)

함수 타입

JS → TS 함수 변환

JS로 작성된 함수

function add(n1, n2) {
	return n1 + n2;
}

TS로 변환

function add(n1: number, n2: number): number {
	return n1 + n2;
}

// const add = (n1: number, n2: number) => {
//   return n1 + n2;
// }; // Arrow Funtions

const a = add(1, 2);
const b = add('1', 2); // Error
const c = add(10, 20, 30); // Error
const d = add(10); // Error

TS로 작성된 함수에는 각 파라미터와 함수 자신의 반환될 타입을 정해 줄 수 있다. TypeScript는 반환(return) 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입을 생략할 수 있다.

반환 값이 없는 함수

function printResult(num: number): void {
	console.log('Result' + num);
}


printResult(5);

Optional Parameter

// JS
function add2(n1, n2) {
  if (!n2) return n1;
  return n1 + n2;
}

// TS
function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
// 파라미터의 갯수가 많은 경우에 Error가 잡히는건 맞는 상황이다.
const c2 = add2(10);
// 파라미터가 하나인 경우에는 하나의 파라미터만 반환되어야하는 게 요건인데
// 위 줄에서 에러가 나서 진행이 안된다! 어떻게 할까?
// optional parameter를 사용!
function add2(n1: number, n2?: number, n3?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

// 추가 개념
function add2(n1?: number, n2: number): number { // 불가
  if (!n2) return n1;
  return n1 + n2;
}
// optional parameter가 required parameater 앞에 위치할 수 없다.

Default Parameter

function add3(n1: number, n2: number = 0): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2);
const c3 = add3(10);

TS의 특성은 아니고 JS에도 있는 기능이다. 위 코드는 n2 파라미터에 아무것도 들어오지 않는 경우 해당 n2를 0 으로 초기화 시켜주는 코드이다.

Rest Parameter

function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40);

이것도 JS에 있는 기능이다. Rest 파라미터는 말 그대로 Rest의 역할을 하는 함수 파라미터이다. ES2015(ES6) 에서 처음 도입된 것으로, 함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아준다.

Rest 파라미터는 대응시키고 남은 인수들을 배열로 만들어 주기 때문에, 아래와 같이 처음이나 중간에 올 수 없고, 마지막에만 올 수 있다.

enum 타입

자바스크립트에는 없고 타입스크립트에만 있는 타입

enum은 특정 값들의 집합을 의미하는 자료형

숫자형 이넘

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

const up: Direction = Direction.Up; // <- 1번
// Direction = Direction.UP | Direction.Down | Direction.Left | Direction.Right
const leftOrRight: Direction.Left | Direction.Right = Direction.Left;

console.log(Direction[2]) // Left // <- 2번

1번 에서 up 의 타입은 Direction 인데 이 Direction 이 가지고 있는 값들이 Direction.UP | Direction.Down | Direction.Left | Direction.Right 이라서 Direction.Up 을 Direction 타입을 갖는 up에 할당을 할 수 있다.

enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다는 것이다.

예를 들어 위의 예제에서 2라는 값이 위의 어떤 Direction enum 멤버와 매칭되는지 알 수 없을 때 이에 일치하는 이름을 알아낼 수 있다.

문자형 이넘

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화 해줘야 한다. 또한, 문자형 이넘에는 숫자형 이넘과는 다르게 auto-incrementing이 없다.

복합 이넘

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}
// 권고하지 않음

숫자 이넘과 문자형 이넘을 혼용해서 사용할 수 있으나 이는 혼란만 야기한다. 따라서 권고하지 않는 방식이다.