TYPESCRIPT 여러타입들

타입 추론

타입을 명시하지 않아도 타입스크립트가 알아서 타입을 추론 하는 것 추론할 단서(=값)이 명시되어야 추론이 가능함

let a = 1;
a.toFixed();
a.toExponential();
// a = "hello" // 자동으로 타입 추론이 됐기 때문에 다른 타입 할당불가

let b = "hello";
b.toUpperCase();
let c = true;
let d = {};

let e; // 오른쪽에 타입을 추론할만한 값이 없을 땐 any로 추론됨

구조 분해 할당

구조에 따라서 데이터가 분해되고 각각 타입이 추론 됩니다

let user: {
  name: string;
  age: number;
};

user = { name: "이름", age: 123 };

let { name, age } = user;

let [todo, done] = ["청소하기", false];

함수의 추론

타입을 명시하지 않아도 자동으로 타입이 추론 됩니다.

function sayHello() {
  console.log("hello");
}

function returnHello() {
  return "hello";
}

유니온 타입

// 요일: "Mon"~"Fri" 중 하나만 허용
let dayOfWeek: "Mon" | "Fri"; /* TODO */

dayOfWeek = "Mon";
dayOfWeek = "Fri";
// dayOfWeek = "Sat"; // 이 줄은 에러가 나야 정상

// yes/no만 허용
let answer: "yes" | "no"; /* TODO */

answer = "yes";
answer = "no";
// answer = "maybe"; // 이 줄은 에러가 나야 정상

배열

숫자형 배열

let numbers: number[] = [1, 2, 3];

numbers.push(1);
numbers.unshift(0);

console.log(numbers);

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

문자형 배열

let fruits: string[] = ["바나나", "사과", "키위"];

혼합 배열

let flexArr: (number | string | boolean)[] = [1, "2", "3", 4, true];

2차원 배열

let twoDimArr: number[][] = [
  [1, 2, 3],
  [1, 2, 3],
];

let twoDimArr2: (string | number)[][] = [
  ["1", "2", "3"],
  [1, 2, 3],
];

튜플

길이와 타입이 고정된 특수 배열 JS로 변환 시 배열

let tuple: [number, string] = [10, "20"];

tuple.push(1);
tuple[0] = 2;

readonly

읽기 전용 (Immutable = 불변)

let tuple2: readonly [number, string] = [1, "hello"];
// tuple2.push(1) 불가
tuple2 = [2, "goodbye"]; // 재할당은 가능

Collections의 const

const는 가리키는 객체가 변하지 않을 뿐

const tuple3: [number, string] = [1, "hello"];
// tuple3 = [2, "goodbye"]
tuple3.push(1);

const users: [number, string][] = [
  [1, "윤유저"],
  [2, "김유저"],
];

객체

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

let student: {
  name: string;
  age: number;
  scores: [string, number][];
};

student = {
  name: "user",
  age: 22,
  scores: [
    ["자바스크립트", 90],
    ["자바", 70],
  ],
};

선택적 프로퍼티

let product: {
  id: number;
  name: string;
  price: number;
  description?: string;
};

product = {
  id: 1,
  name: "아이폰16",
  price: 100000,
};

reaeonly 속성

let order: {
  userId: number;
  status: string;
  amount: number;
  readonly createdAt: string;
};

order = {
  userId: 1,
  status: "배송중",
  amount: 100000,
  createdAt: "2025",
};

order.status = "배송완료";
// order.createdAt = "2024";

열거형

정해진 값들만 사용할 타입 (1) 가독성 향상 (2) 오류 방지

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

let user: {
  name: string;
  role: string;
};

user = {
  name: "name",
  role: "admin ", // 오타가 생길 수 있음
};

let user2: {
  name: string;
  role: Role;
};

user2 = {
  name: "name",
  role: Role.ADMIN,
};

enum Status {
  Pending = "pending",
  Success = "success",
  Reject = "reject",
}

type alias

복잡하거나 반복적으로 사용되는 타입에 별칭을 붙여서 재사용하는 문법

let user1: {
  name: string;
  age: number;
};

user1 = {
  name: "name",
  age: 12,
};

let user2: {
  name: string;
  age: number;
};

user2 = {
  name: "name2",
  age: 122,
};
// 타입을 선언할때마다 복잡함
function helloToUser(user: { name: string; age: number }) {
  console.log(user.name);
}

// 타입 별칭 선언
type User = {
  name: string;
  age: number;
};

let userA: User = {
  name: " name",
  age: 123,
};
let userB: User = {
  name: " name",
  age: 123,
};

function helloToUser2(user: User) {
  console.log(user.name);
}
// 유니온
type Status2 = "pending" | "success";