[타입스크립트] Tuple, Enum , Any

타입스크립트는 자바스크립트와 달리 타입을 지정해줄 수 있다!!

 

 

js

"use strict";
function add(a, b) {
  return a + b;
}
const sum = add(1, 2);
console.log(sum);

 

ts

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3

 

만약 sum에서 number가 아닌 string을 부여해준다면 TS2322라는 에러 코드가 뜬다!

**TS2322는 변수 타입에 대한 오류! 

 

 

---

Tuple

튜플은 배열과 유사하지만 정해진 타입의 고정된 길이 배열을 표현한다는 차이점이 있다!

하지만 push()나 splice() 등 길이가 변경되는 함수를 막는 것은 불가!

 

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

 

변수를 한꺼번에 튜블로 지정해줄 수 있다.

// Variables
let userId: number = 1234;
let userName: string = 'HEROPY';
let isValid: boolean = true;

// Tuple
let user: [number, string, boolean] = [1234, 'HEROPY', true];
console.log(user[0]); // 1234
console.log(user[1]); // 'HEROPY'
console.log(user[2]); // true

 

2차원 배열도 사용 가능

let users: [number, string, boolean][];
// Or
// let users: Array<[number, string, boolean]>;

users = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]];

let tuple: [1, number];
tuple = [1, 2];
tuple = [1, 3];
tuple = [2, 3]; // Error - TS2322: Type '2' is not assignable to type '1'.

 

 

push를 통한 튜플 길이 변경 

let tuple: [string, number];
tuple = ['a', 1];
tuple = ['b', 2];
tuple.push(3);
console.log(tuple); // ['b', 2, 3];
tuple.push(true); // Error - TS2345: Argument of type 'true' is not assignable 
//to parameter of type 'string | number'.

 

 

읽기전용 튜플 생성도 가능

let a: readonly [string, number] = ['Hello', 123];
a[0] = 'World'; // Error - TS2540: Cannot assign to '0' because it is a read-only property.

 

 

---

Enum

Enum은 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입 

값 종류가 일정한 범위로 정해져 있는 경우 유용

 

0부터 시작해서 1씩 증가한다

 

enum Week {
  Sun =0
  Mon =1
  Tue =2
  Wed =3
  Thu =4
  Fri =5
  Sat =6
}

console.log(week.Sun);  //6


enum Week {
  Sun =0
  Mon =1
  Tue =2 
  Wed =23  //수동으로 값 변경 가능
  Thu =24
  Fri =25
  Sat =26
}


console.log(Week);
console.log(Week.Sun); // 0
console.log(Week['Sun']); // 0
console.log(Week[0]); // 'Sun'

 

 

문자열도 가능!

enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue'
}
console.log(Color.Red); // red
console.log(Color['Green']); // green

 

 

 

 

---

Any

Any는 모든 타입을 의미

자바스크립트처럼 모든 타입의 값 할당 가능

 

언제 사용할까? 

불가피하게 타입을 단언할 수 없는 경우에 사용! 

let any: any = 123;
any = 'Hello world';
any = {};
any = null;

//다양한 타입의 값을 가진 배열도 가능
const list: any[] = [1, true, 'Anything!'];

 

이러한 Any타입을 방지하기 위해서는 컴파일 옵션   const list: any[] = [1, true, 'Anything!'];  를 통해 Any를 사용했을 경우 에러를 던질 수 있다!