[TS] 🧪typescript 기본 타입 정리

🧪Primitive

원시 타입
− 불변이며, 객체가 아닌 값들을 의미한다. (타입 추론이 됨)

// 1. Boolean
const Boo: Boolean = false;

// 2. Number
const num: number = 123;

// 3. String
const str: string = '123';

// 4. Bigint
const big: bigint = 100n;

/* 이렇게 직접 지정해 주어도 된다. */
const strTata: 'tata' = 'tata';

---

🧪Object

객체 타입

// 1. Object
//    이렇게 사용하면 any와 다를 게 없다.
const obj: object = { a: 'TATA' };

// 이렇게 사용하면 됨
const obj2: { str: string, num: number } = {
  str: 'tata',
  num: 7,
}

// 2. Enum
enum BT21 {
  TATA,           /* 0 */
  CHIMMY = 7,     /* 7 */
  RJ              /* 8 */
}
const bt21: BT21 = BT21.TATA /* 이런 식으로 사용함 */

---

🧪Function

함수 타입

// 1. Void
//    함수에서 사용하면 => 리턴되는 값이 없다는 의미
function a(): void {
  console.log('TATA');
}

// 2. Never
//    절대 발생할 수 없는 타입
function loop(): never {
  while(true) {
    console.log('TATA');
  }
}

// 3. string이나 number로 반환 타입을 지정해 주어도 되나,
//    타입 추론이 되기에 굳이 적어주지 않아도 된다.
//    (매개변수 타입은 지정해 주기)
function b(num: number, str: string): number {
  return num + Number(str);
}
b(777, '777')

// 4. Object
function c(obj: { num: number, str: string }) {
  return obj.num + obj.str;
}
c({ 7, 'tata' })

// 5. Function
//    사용하지 않는 것이 좋다.
function d(num: Function): Function {
  return num
}

---

🧪Array

배열 타입

// 1. Array
const numList: number[] = [1, 2, 3];
const strList: string[] = ['1', '2', '3'];
const booList: boolean[] = [true, false, true];
// ↓ 이런 방식도 있음
// const numList2: Array<number> = [1, 2, 3];
// const strList2: Array<string> = ['1', '2', '3'];

// 2. Tuple
const tuple: [number, string] = [1, "1"]
const tuple2: [number, ...string[]] = [1, '1', '2']

---

🧪Literal

리터럴 타입

// 1. let
//    변수의 값을 변경할 수 있다.
let letStr = 'tata' // string
 
// 2. const
//    변수의 값을 변경할 수 없다.
const conStr = 'tata' // 'tata'

---

🧪undefined / null

undefined / null

// 1. undefined
const a: number | undefined = undefined;

// 2. null
const b: number | null = null;

---

🧪any / unknown

any / unknown

// 1. any
const a: any = 4;
const b: any = 'string';

// 2. unknown
//    => any처럼 모든 값을 허용하지만 상대적으로 엄격하며,
//       직접 명시해 주어야 한다.
//       (assertion 또는 타입 가드와 함께 사용함)
let a: unknown = 7;

if (typeof a === 'string') {
  a.trim();
}
// (a as string).trim();

---

🧪Interface

인터페이스

// - interface: 타입 정의
// - implements: 구현
interface User {
  nickname: string;
  age?: number; // ?가 있으면 필수로 구현하지 않아도 된다.
  introduce(): void;
}

// 다른 interface에서 implements 가능
// class에서 extends를 사용한 상태에서도 implements 가능
class Play implements User {
  nickname: string;

  constructor(nickname: string) {
    this.nickname = nickname;
  }
  
  introduce() {
    console.log(`제 닉네임은 ${this.nickname} 입니다.`);
  }
}

const a = new Play("TATA");
a.introduce(); // "제 닉네임은 TATA 입니다."

---

🧪Type Aliases

type

type str = string;
type num = number;
type arr = string[];
type func = () => void;

// 재사용
type User = {
  nickname: str;
  age: num;
  playInfo: func;
}

---

🧪Generic

제네릭

function User<T>(name: T): T {
  return name;
}

console.log(User<string>('TATA')) // "TATA" 
console.log(User<number>(142501)) // 142501  
console.log(User<string[]>(['TATA', 'CHIMMY'])) // ["TATA", "CHIMMY"]

-------
// type과 interface에서 제네릭 사용법
type UserTypeFn = <T>(name: T) => T
interface UserInterFn {
  <T>(name: T): T;
}

-------
// class에서 제네릭 사용법
class User<T> {
  name: T
  
  constructor(name: T) {
  	this.name = name;
  }
}

// const a = new User<string>('TATA');
const a = new User('TATA');
console.log(a.name); // "TATA"

-------
// 제네릭 extends 사용법
function User<T extends string | number>(name: T): T {
  return name;
}

// string과 number타입만 사용 가능
console.log(User('TATA')); // "TATA" 
console.log(User('12546')); // "12546" 

---

🧪typeof , keyof

typeof

변수, 함수, 클래스 또는 객체의 타입을 추출한다.

let num = 10;
let numType: typeof num; // num 변수의 타입을 추출하여 할당

typeof, keyof

typeof: 타입 추출
keyof: 객체의 키만 추출

export const Color = {
    Red: "red",
    Green: "green",
    Blue: "blue",
} as const;

type ColorType = typeof Color;
/* 
ColorType은 아래처럼 됨:
{
  Red: "red";
  Green: "green";
  Blue: "blue";
}
*/

type ColorKeys = keyof typeof Color;
// type ColorKeys = "Red" | "Green" | "Blue";

type ColorValues = typeof Color[keyof typeof Color];
// type ColorValues = "red" | "green" | "blue";

배열에서 유니온 타입 만들기 [number]

const rgb = ['red', 'green', 'blue'] as const;

type RGB = (typeof rgb)[number];
//  typeof rgb는 readonly ["red", "green", "blue"]라는 튜플 타입.
// typeof rgb[number] → "red" | "green" | "blue" (배열의 요소들을 유니온 타입으로 변환).
// "red" | "green" | "blue"

type RedAndBlue = Exclude<RGB, 'blue'>;
// "red" | "green"

🥦typescript의 class 사용법 보러가기
👉 TypeScript - Playground