Typescript의 타입

은 굉장히 많다....

사진으로 보면 더 알아보기 쉬울거다 오늘은 이들에 대해서 총정리해보는 시간을 가져보겠다!

타입 - Boolean

• 단순한 참(true), 거짓(false)

let check: boolean = true;

타입 - Number

• 정적 타입 (int, float, double 등의 정확한 지정이 아닌 Javascript의 number 자료형을 그대로 사용함)

let num: number = 6;
let num2: number = 3.14;
let num3: number = 0xf00d;
let infinity: number = Infinity;

타입 - String

• Javascript에서 사용된 모든 문자열이 포함됨

let color: String = "Color";
let abc: String = 'ABC';
let varColor: String = `my color is ${color}`;

타입 - Array

• 사용법이 크게 2가지가 있다
  • 배열 요소들을 나타내는 타입 뒤에 '[]' 사용하기
  • Array<> 배열 타입 사용하기

let fruits: string[] = ['apple', 'banana', 'pineapple'];
let fruits: Array<string> = ['apple', 'banana', 'pineapple'];

타입 - Tuple

• 배열의 서브 타입
• 크기와 타입이 고정된 배열

let RGB: [string, string, string] = ["Red", "Green", "Blue"];

• 2차원 튜플 생성법

let user: [number, string, boolean][];
// or
let user: Array<[number, string, boolean]>;
user = [[1,"a",true], [2,"b",false]];

• 타입 뿐만 아니라 값도 고정이 가능함

let card: [string, true];
card = ["abc", true];

• 다만 이는 할당에 국한되기 때문에 .push()나 .splice()를 통해 값을 추가하는 행위에 대해서는 제재할 수 없다 (컴파일러의 문제점임)

타입 - Enum

• C, Java에서 사용하는 Enum과 같은 타입
• 특정 값(상수)들의 집합
• tuple과는 달리 특정 값을 고정하는 또다른 독립된 자료형이라고 보면 편함

enum RGB {Red, Green, Blue};
let red: RGB = RGB.Red;
let blue: RGB = RGB[2];

타입 - Object

• 객체 뿐만 아니라 배열, 함수까지 모두 Object에 포함됨
• 기본적으로 typeof 연산자가 "object"로 반환되는 모든 타입을 아우름
• 정확히는 number, string, boolean, bigint, symbol, null, undefined가 아닌 나머지 모두를 의미함

let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;

• 객체에 타입을 지정하고 싶다면 객체 속성(Properties)들에 대한 타입을 개별적으로 지정하는 식을 사용해야 함

let user: {name: string, id: number};
user = {name: "chulsoo", id: 1};

• 이게 가독성이 좋지 않다고 느낀다면 type literal이라 불리는 alias나 interface를 사용하면 좋음

// alias
type TestUser = {name: string, id: number};
let userA: TestUser = {name: "kwongho", id: 1};
//interface
interface TestUser {name: string, id: number};
let userA: TestUser = {name: "kwongho", id: 1};

타입 - Any

• 모든 타입에 대해서 허용됨 (여태껏 사용하면 Javascript의 변수 타입이라고 생각하면 편함)
• 존재하는 이유: 알지 못하는 타입을 표현해야 하는 경우가 생기기 때문

let a: any = 123;
any = [1,2,3];
any = "123";
any = null;

let l: any[] = [1, "2", true];

• 그러나 남용하지는 말 것. 남용할거면 그냥 Javascript 쓰러 가셈
• Any의 사용을 엄격하게 금지하려면 tsconfig.json의 컴파일 옵션 중 "noImplicityAny": true를 통해 Any 사용 시 에러를 발생시킬 수 있음

타입 - Unknown

• any와 같은 타입
• 알 수 없는 타입을 의미하며 any와 같이 모든 데이터 타입을 받을 수 있음
• any와 unknown의 구분점
  • any: 어떤 것이든지 타입을 허용함
  • unknown: 알 수 없음, 모름
  • 둘의 차이점은 '엄격함'에서 비롯됨
  • any 타입보다 unknown 타입이 더 엄격하게 보는 경향이 있음
  • any 대신 unknown 타입을 사용하면 체크를 해야 하는 코드는 많아지지만 사전 준비 단계에 있어서는 더 철저하다고 볼 수 있음

let v: any = 10;
console.log(v.length); // undefined

let v: unknown = 10;
let v2: unknown = "abc";

console.log(v.length); // error
console.log(v2.length); // error

타입 Null/Undefined

• 다른 모든 타입의 하위 타입으로 치부됨
• 즉, 어떤 타입에도 할당될 수 있음 (단, strick 모드가 아닌 경우에만 가능)
• 가능하면 --strictNullChecks 기능을 사용하는 것을 권장함

strictNullChecks

• 해당 기능을 켠다면 일반적인 타입 변수에 null을 할당할 수 없음
• 만약 string에서 어쩔 수 없이 null이나 undefined가 오게된다면, Union 타입을 사용하길 권장함 (any 타입도 가능하지만 비추천, Union 타입은 다음 포스트에서 다룰 예정)