타입스크립트 타입 추론 예제

타입스크립트는 데이터 타입을 추론하는 기능을 가지고 있다.

타입스크립트의 타입 추론은 입력된 값과 사용 방식을 분석하여 타입을 자동으로 판단하는 기능을 뜻한다.

변수에 문자열을 저장하면 문자열 타입으로, 숫자를 저장하면 숫자 타입으로 타입스크립트는 타입을 추론한다.

타입 추론을 활용하면 불필요한 타입 표기를 줄이면서도 잘못된 값이 사용되는 것을 미리 확인할 수 있다.

⊙

const userName: string = "민수";
const age: number = 20;

⊙

const userName = "민수";
// userName의 타입을 자동으로 추론

⊙

let count = 10;

⊙

let count: number = 10;

⊙

let userName = "홍길동";
let age = 30;
let isAdmin = false;

⊙

// userName: string
// age: number
// isAdmin: boolean

⊙

let age = 30;

age = 31;       // 정상
age = "서른";   // 오류

⊙

let status = "ready";

⊙

status = "loading";
status = "complete";

⊙

const status = "ready";

⊙

// status의 타입: "ready"

⊙

let message = "hello";
// string

const fixedMessage = "hello";
// "hello"

⊙

const scores = [90, 85, 100];

⊙

// number[]

⊙

const fruits = ["apple", "banana", "orange"];
// string[]

⊙

const values = [1, "two", 3];
// (string | number)[]

⊙

const scores = [90, 85, 100];

scores.push(95);       // 정상
scores.push("만점");   // 오류

⊙

const user = {
  id: 1,
  name: "지수",
  active: true,
};

⊙

{
  id: number;
  name: string;
  active: boolean;
}

⊙

user.name = "민수"; // 정상
user.name = 100;   // 오류

⊙

const user = {
  name: "지수",
};

user.name = "민수"; // 가능

⊙

const request = {
  url: "/users",
  method: "GET",
};

⊙

request.method = "POST";

⊙

const request = {
  url: "/users",
  method: "GET",
} as const;

⊙

{
  readonly url: "/users";
  readonly method: "GET";
}

⊙

function add(a: number, b: number) {
  return a + b;
}

⊙

// function add(a: number, b: number): number

⊙

function createMessage(name: string) {
  return `${name}님, 환영합니다.`;
}

// 반환 타입: string

⊙

function parseNumber(value: string) {
  if (value.trim() === "") {
    return null;
  }

  return Number(value);
}

// 반환 타입: number | null

⊙

function greet(name = "게스트") {
  return `${name}님, 안녕하세요.`;
}

⊙

greet();
greet("민수");
greet(100); // 오류

⊙

function calculatePrice(price = 1000, quantity = 1) {
  return price * quantity;
}

⊙

const names = ["민수", "지수", "현우"];

const upperNames = names.map((name) => {
  return name.toUpperCase();
});

⊙

names.map((name) => name.toUpperCase());
// name: string

⊙

names.map((name) => name.notExistingMethod());
// 오류

⊙

function identity<T>(value: T): T {
  return value;
}

⊙

const result = identity<string>("hello");

⊙

const textResult = identity("hello");
// string

const numberResult = identity(100);
// number

const booleanResult = identity(true);
// boolean

⊙

function first<T>(items: readonly T[]): T | undefined {
  return items[0];
}

const firstName = first(["민수", "지수"]);
// string | undefined

const firstScore = first([90, 80, 100]);
// number | undefined

⊙

const defaultSettings = {
  theme: "light",
  fontSize: 16,
  notifications: true,
};

type Settings = typeof defaultSettings;

⊙

type Settings = {
  theme: string;
  fontSize: number;
  notifications: boolean;
};

⊙

const userSettings: Settings = {
  theme: "dark",
  fontSize: 18,
  notifications: false,
};

⊙

type ThemeConfig = {
  mode: "light" | "dark";
  fontSize: number;
};

const config = {
  mode: "dark",
  fontSize: 16,
} satisfies ThemeConfig;

⊙

const config = {
  mode: "blue",
  fontSize: 16,
} satisfies ThemeConfig;
// "blue"는 허용되지 않으므로 오류

⊙

const config: ThemeConfig = {
  mode: "dark",
  fontSize: 16,
};