์๊ฒฉํ ๊ฐ ์ ์ฝ์ ๊ฐ์ ํ๊ณ , ์ฝ๋ ๋ช ํ์ฑ์ ๋์ด๋ฉฐ, ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ธ TypeScript ๋ฆฌํฐ๋ด ํ์ ์ ์ดํด๋ณด์ธ์. ์ค์ฉ์ ์ธ ์์ ์ ๊ณ ๊ธ ๊ธฐ์ ์ ํตํด ํ์ตํฉ๋๋ค.
TypeScript ๋ฆฌํฐ๋ด ํ์ : ์ ํํ ๊ฐ ์ ์ฝ ๋ง์คํฐํ๊ธฐ
JavaScript์ ์์ ์งํฉ์ธ TypeScript๋ ๋์ ์ธ ์น ๊ฐ๋ฐ ์ธ๊ณ์ ์ ์ ํ์ดํ์ ๋์ ํฉ๋๋ค. ๊ฐ์ฅ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ค ํ๋๋ ๋ฆฌํฐ๋ด ํ์ ์ด๋ผ๋ ๊ฐ๋ ์ ๋๋ค. ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ณ์๋ ์์ฑ์ด ๊ฐ์ง ์ ์๋ ์ ํํ ๊ฐ์ ์ง์ ํ ์ ์์ด, ํฅ์๋ ํ์ ์์ ์ฑ์ ์ ๊ณตํ๊ณ ์๊ธฐ์น ์์ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ ๋ฆฌํฐ๋ด ํ์ ์ ๋ฌธ๋ฒ, ์ฌ์ฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ด์ ์ ์ค์ฉ์ ์ธ ์์ ์ ํจ๊ป ๊น์ด ์๊ฒ ํ๊ตฌํ ๊ฒ์ ๋๋ค.
๋ฆฌํฐ๋ด ํ์ ์ด๋ ๋ฌด์์ธ๊ฐ?
string, number, ๋๋ boolean๊ณผ ๊ฐ์ ์ ํต์ ์ธ ํ์
๊ณผ ๋ฌ๋ฆฌ, ๋ฆฌํฐ๋ด ํ์
์ ๊ด๋ฒ์ํ ๊ฐ์ ๋ฒ์ฃผ๋ฅผ ๋ํ๋ด์ง ์์ต๋๋ค. ๋์ , ํน์ ํ๊ณ ๊ณ ์ ๋ ๊ฐ์ ๋ํ๋
๋๋ค. TypeScript๋ ์ธ ๊ฐ์ง ์ข
๋ฅ์ ๋ฆฌํฐ๋ด ํ์
์ ์ง์ํฉ๋๋ค:
- ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ : ํน์ ๋ฌธ์์ด ๊ฐ์ ๋ํ๋ ๋๋ค.
- ์ซ์ ๋ฆฌํฐ๋ด ํ์ : ํน์ ์ซ์ ๊ฐ์ ๋ํ๋ ๋๋ค.
- ๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์
:
true๋๋false๋ผ๋ ํน์ ๊ฐ์ ๋ํ๋ ๋๋ค.
๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ฐ์ดํฐ์ ์ค์ ์ ์ฝ ์กฐ๊ฑด์ ๋ฐ์ํ๋ ๋ ์ ํํ ํ์ ์ ์๋ฅผ ๋ง๋ค ์ ์์ผ๋ฉฐ, ์ด๋ ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ก ์ด์ด์ง๋๋ค.
๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์
๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ ๊ฐ์ฅ ํํ๊ฒ ์ฌ์ฉ๋๋ ๋ฆฌํฐ๋ด ํ์ ์ ๋๋ค. ์ด๋ฅผ ํตํด ๋ณ์๋ ์์ฑ์ด ๋ฏธ๋ฆฌ ์ ์๋ ๋ฌธ์์ด ๊ฐ ์งํฉ ์ค ํ๋๋ง ๊ฐ์ง ์ ์๋๋ก ์ง์ ํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ ์ ์ํ๋ ๋ฌธ๋ฒ์ ๊ฐ๋จํฉ๋๋ค:
type AllowedValues = "value1" | "value2" | "value3";
์ด๋ "value1", "value2", ๋๋ "value3" ๋ฌธ์์ด๋ง ๊ฐ์ง ์ ์๋ AllowedValues๋ผ๋ ํ์
์ ์ ์ํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ์์ ํ๋ ํธ ์ ์ํ๊ธฐ:
UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ตฌ์ถํ๊ณ ์์ผ๋ฉฐ ์ฌ์ฉ์๊ฐ ๋ฏธ๋ฆฌ ์ ์๋ ํ๋ ํธ์ ์์๋ง ์ง์ ํ๋๋ก ๋ณด์ฅํ๊ณ ์ถ๋ค๊ณ ์์ํด ๋ณด์ธ์:
type Color = "red" | "green" | "blue" | "yellow";
function paintElement(element: HTMLElement, color: Color) {
element.style.backgroundColor = color;
}
paintElement(document.getElementById("myElement")!, "red"); // ์ ํจํจ
paintElement(document.getElementById("myElement")!, "purple"); // ์ค๋ฅ: '"purple"' ํ์
์ ์ธ์๋ 'Color' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ด ์ด๋ป๊ฒ ํ์ฉ๋ ๊ฐ์ ์๊ฒฉํ ์งํฉ์ ๊ฐ์ ํ์ฌ ๊ฐ๋ฐ์๊ฐ ์ค์๋ก ์ ํจํ์ง ์์ ์์์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ฐฉ์งํ๋์ง ๋ณด์ฌ์ค๋๋ค.
2. API ์๋ํฌ์ธํธ ์ ์ํ๊ธฐ:
API๋ก ์์ ํ ๋, ์ข ์ข ํ์ฉ๋ ์๋ํฌ์ธํธ๋ฅผ ์ง์ ํด์ผ ํฉ๋๋ค. ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ด ์ด๋ฅผ ๊ฐ์ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค:
type APIEndpoint = "/users" | "/posts" | "/comments";
function fetchData(endpoint: APIEndpoint) {
// ... ์ง์ ๋ ์๋ํฌ์ธํธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ตฌํ
console.log(`Fetching data from ${endpoint}`);
}
fetchData("/users"); // ์ ํจํจ
fetchData("/products"); // ์ค๋ฅ: '"/products"' ํ์
์ ์ธ์๋ 'APIEndpoint' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ fetchData ํจ์๊ฐ ์ ํจํ API ์๋ํฌ์ธํธ๋ก๋ง ํธ์ถ๋ ์ ์๋๋ก ๋ณด์ฅํ์ฌ, ์คํ๋ ์๋ชป๋ ์๋ํฌ์ธํธ ์ด๋ฆ์ผ๋ก ์ธํ ์ค๋ฅ ์ํ์ ์ค์ฌ์ค๋๋ค.
3. ๋ค๋ฅธ ์ธ์ด ์ฒ๋ฆฌํ๊ธฐ (๊ตญ์ ํ - i18n):
๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ฒ๋ฆฌํด์ผ ํ ์ ์์ต๋๋ค. ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ง์ ๋ ์ธ์ด๋ง ์ง์ํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค:
type Language = "en" | "es" | "fr" | "de" | "zh";
function translate(text: string, language: Language): string {
// ... ํ
์คํธ๋ฅผ ์ง์ ๋ ์ธ์ด๋ก ๋ฒ์ญํ๋ ๊ตฌํ
console.log(`Translating '${text}' to ${language}`);
return "Translated text"; // ํ๋ ์ด์คํ๋
}
translate("Hello", "en"); // ์ ํจํจ
translate("Hello", "ja"); // ์ค๋ฅ: '"ja"' ํ์
์ ์ธ์๋ 'Language' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ด์์ ์ง์๋๋ ์ธ์ด๋ง ์ฌ์ฉ๋๋๋ก ๋ณด์ฅํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
์ซ์ ๋ฆฌํฐ๋ด ํ์
์ซ์ ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ณ์๋ ์์ฑ์ด ํน์ ์ซ์ ๊ฐ๋ง ๊ฐ์ง ์ ์๋๋ก ์ง์ ํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
์ซ์ ๋ฆฌํฐ๋ด ํ์ ์ ์ ์ํ๋ ๋ฌธ๋ฒ์ ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ๊ณผ ์ ์ฌํฉ๋๋ค:
type StatusCode = 200 | 404 | 500;
์ด๋ 200, 404, ๋๋ 500 ์ซ์๋ง ๊ฐ์ง ์ ์๋ StatusCode๋ผ๋ ํ์
์ ์ ์ํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์
1. HTTP ์ํ ์ฝ๋ ์ ์ํ๊ธฐ:
์ซ์ ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ์ฌ HTTP ์ํ ์ฝ๋๋ฅผ ๋ํ๋ผ ์ ์์ผ๋ฉฐ, ์ด๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ ํจํ ์ฝ๋๋ง ์ฌ์ฉ๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค:
type HTTPStatus = 200 | 400 | 401 | 403 | 404 | 500;
function handleResponse(status: HTTPStatus) {
switch (status) {
case 200:
console.log("Success!");
break;
case 400:
console.log("Bad Request");
break;
// ... ๋ค๋ฅธ ์ผ์ด์ค๋ค
default:
console.log("Unknown Status");
}
}
handleResponse(200); // ์ ํจํจ
handleResponse(600); // ์ค๋ฅ: '600' ํ์
์ ์ธ์๋ 'HTTPStatus' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ ์ ํจํ HTTP ์ํ ์ฝ๋์ ์ฌ์ฉ์ ๊ฐ์ ํ์ฌ, ๋ถ์ ํํ๊ฑฐ๋ ๋นํ์ค ์ฝ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
2. ๊ณ ์ ๋ ์ต์ ๋ํ๋ด๊ธฐ:
์ซ์ ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ์ฌ ์ค์ ๊ฐ์ฒด ๋ด์ ๊ณ ์ ๋ ์ต์ ์ ๋ํ๋ผ ์ ์์ต๋๋ค:
type RetryAttempts = 1 | 3 | 5;
interface Config {
retryAttempts: RetryAttempts;
}
const config1: Config = { retryAttempts: 3 }; // ์ ํจํจ
const config2: Config = { retryAttempts: 7 }; // ์ค๋ฅ: '{ retryAttempts: 7; }' ํ์
์ 'Config' ํ์
์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ retryAttempts์ ๊ฐ๋ฅํ ๊ฐ์ ํน์ ์งํฉ์ผ๋ก ์ ํํ์ฌ, ์ค์ ์ ๋ช
ํ์ฑ๊ณผ ์ ๋ขฐ์ฑ์ ํฅ์์ํต๋๋ค.
๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์
๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์
์ true ๋๋ false๋ผ๋ ํน์ ๊ฐ์ ๋ํ๋
๋๋ค. ๋ฌธ์์ด์ด๋ ์ซ์ ๋ฆฌํฐ๋ด ํ์
๋ณด๋ค ํ์ฉ๋๊ฐ ๋ฎ์ ๋ณด์ผ ์ ์์ง๋ง, ํน์ ์๋๋ฆฌ์ค์์๋ ์ ์ฉํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์ ์ ์ ์ํ๋ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
type IsEnabled = true | false;
ํ์ง๋ง, true | false๋ฅผ ์ง์ ์ฌ์ฉํ๋ ๊ฒ์ boolean ํ์
๊ณผ ๋์ผํ๊ธฐ ๋๋ฌธ์ ์ค๋ณต๋ฉ๋๋ค. ๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์
์ ๋ค๋ฅธ ํ์
๊ณผ ๊ฒฐํฉ๋๊ฑฐ๋ ์กฐ๊ฑด๋ถ ํ์
์์ ๋ ์ ์ฉํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ์ค์ ์ ์ฌ์ฉํ ์กฐ๊ฑด๋ถ ๋ก์ง:
๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ์ฌ ์ค์ ํ๋๊ทธ์ ๋ฐ๋ผ ํจ์์ ๋์์ ์ ์ดํ ์ ์์ต๋๋ค:
interface FeatureFlags {
darkMode: boolean;
newUserFlow: boolean;
}
function initializeApp(flags: FeatureFlags) {
if (flags.darkMode) {
// ๋คํฌ ๋ชจ๋ ํ์ฑํ
console.log("Enabling dark mode...");
} else {
// ๋ผ์ดํธ ๋ชจ๋ ์ฌ์ฉ
console.log("Using light mode...");
}
if (flags.newUserFlow) {
// ์๋ก์ด ์ฌ์ฉ์ ํ๋ก์ฐ ํ์ฑํ
console.log("Enabling new user flow...");
} else {
// ๊ธฐ์กด ์ฌ์ฉ์ ํ๋ก์ฐ ์ฌ์ฉ
console.log("Using old user flow...");
}
}
initializeApp({ darkMode: true, newUserFlow: false });
์ด ์์ ๋ ํ์ค boolean ํ์
์ ์ฌ์ฉํ์ง๋ง, ๋์ค์ ์ค๋ช
ํ ์กฐ๊ฑด๋ถ ํ์
๊ณผ ๊ฒฐํฉํ์ฌ ๋ ๋ณต์กํ ๋์์ ๋ง๋ค ์ ์์ต๋๋ค.
2. ๊ตฌ๋ณ๋ ์ ๋์ธ (Discriminated Unions):
๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์ ์ ์ ๋์ธ ํ์ ์์ ํ๋ณ์(discriminator)๋ก ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ๋ค์ ์์ ๋ฅผ ์ดํด๋ณด์ธ์:
interface SuccessResult {
success: true;
data: any;
}
interface ErrorResult {
success: false;
error: string;
}
type Result = SuccessResult | ErrorResult;
function processResult(result: Result) {
if (result.success) {
console.log("Success:", result.data);
} else {
console.error("Error:", result.error);
}
}
processResult({ success: true, data: { name: "John" } });
processResult({ success: false, error: "Failed to fetch data" });
์ฌ๊ธฐ์ ๋ถ๋ฆฌ์ธ ๋ฆฌํฐ๋ด ํ์
์ธ success ์์ฑ์ ํ๋ณ์ ์ญํ ์ ํ์ฌ, TypeScript๊ฐ if ๋ฌธ ๋ด์์ result์ ํ์
์ ์ขํ ์ ์๋๋ก ํฉ๋๋ค.
๋ฆฌํฐ๋ด ํ์ ๊ณผ ์ ๋์ธ ํ์ ๊ฒฐํฉํ๊ธฐ
๋ฆฌํฐ๋ด ํ์
์ ์ ๋์ธ ํ์
(| ์ฐ์ฐ์ ์ฌ์ฉ)๊ณผ ๊ฒฐํฉ๋ ๋ ๊ฐ์ฅ ๊ฐ๋ ฅํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ๋ฌ ํน์ ๊ฐ ์ค ํ๋๋ฅผ ๊ฐ์ง ์ ์๋ ํ์
์ ์ ์ํ ์ ์์ต๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ์ํ ํ์ ์ ์ํ๊ธฐ:
type Status = "pending" | "in progress" | "completed" | "failed";
interface Task {
id: number;
description: string;
status: Status;
}
const task1: Task = { id: 1, description: "Implement login", status: "in progress" }; // ์ ํจํจ
const task2: Task = { id: 2, description: "Implement logout", status: "done" }; // ์ค๋ฅ: '{ id: number; description: string; status: string; }' ํ์
์ 'Task' ํ์
์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ Task ๊ฐ์ฒด์ ๋ํด ํ์ฉ๋ ์ํ ๊ฐ์ ํน์ ์งํฉ์ ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
2. ์ฅ์น ํ์ ์ ์ํ๊ธฐ:
๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ๋ค์ํ ์ฅ์น ํ์ ์ ์ฒ๋ฆฌํด์ผ ํ ์ ์์ต๋๋ค. ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ ์ ๋์ธ์ ์ฌ์ฉํ์ฌ ์ด๋ฅผ ๋ํ๋ผ ์ ์์ต๋๋ค:
type DeviceType = "mobile" | "tablet" | "desktop";
function logDeviceType(device: DeviceType) {
console.log(`Device type: ${device}`);
}
logDeviceType("mobile"); // ์ ํจํจ
logDeviceType("smartwatch"); // ์ค๋ฅ: '"smartwatch"' ํ์
์ ์ธ์๋ 'DeviceType' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ logDeviceType ํจ์๊ฐ ์ ํจํ ์ฅ์น ํ์
์ผ๋ก๋ง ํธ์ถ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
ํ์ ๋ณ์นญ(Type Aliases)๊ณผ ํจ๊ป ๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉํ๊ธฐ
ํ์
๋ณ์นญ(type ํค์๋ ์ฌ์ฉ)์ ๋ฆฌํฐ๋ด ํ์
์ ์ด๋ฆ์ ๋ถ์ฌํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ์ฝ๋๋ฅผ ๋ ์ฝ๊ธฐ ์ฝ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ข๊ฒ ๋ง๋ญ๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ํตํ ์ฝ๋ ํ์ ์ ์ํ๊ธฐ:
type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY";
function formatCurrency(amount: number, currency: CurrencyCode): string {
// ... ํตํ ์ฝ๋์ ๋ฐ๋ผ ๊ธ์ก ์์์ ์ง์ ํ๋ ๊ตฌํ
console.log(`Formatting ${amount} in ${currency}`);
return "Formatted amount"; // ํ๋ ์ด์คํ๋
}
formatCurrency(100, "USD"); // ์ ํจํจ
formatCurrency(200, "CAD"); // ์ค๋ฅ: '"CAD"' ํ์
์ ์ธ์๋ 'CurrencyCode' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ ํตํ ์ฝ๋ ์งํฉ์ ๋ํด CurrencyCode ํ์
๋ณ์นญ์ ์ ์ํ์ฌ, formatCurrency ํจ์์ ๊ฐ๋
์ฑ์ ํฅ์์ํต๋๋ค.
2. ์์ผ ํ์ ์ ์ํ๊ธฐ:
type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";
function isWeekend(day: DayOfWeek): boolean {
return day === "Saturday" || day === "Sunday";
}
console.log(isWeekend("Monday")); // false
console.log(isWeekend("Saturday")); // true
console.log(isWeekend("Funday")); // ์ค๋ฅ: '"Funday"' ํ์
์ ์ธ์๋ 'DayOfWeek' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
๋ฆฌํฐ๋ด ์ถ๋ก
TypeScript๋ ์ข
์ข
๋ณ์์ ํ ๋นํ๋ ๊ฐ์ ๊ธฐ๋ฐ์ผ๋ก ๋ฆฌํฐ๋ด ํ์
์ ์๋์ผ๋ก ์ถ๋ก ํ ์ ์์ต๋๋ค. ์ด๋ ํนํ const ๋ณ์๋ก ์์
ํ ๋ ์ ์ฉํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ํ๊ธฐ:
const apiKey = "your-api-key"; // TypeScript๋ apiKey์ ํ์
์ "your-api-key"๋ก ์ถ๋ก ํฉ๋๋ค
function validateApiKey(key: "your-api-key") {
return key === "your-api-key";
}
console.log(validateApiKey(apiKey)); // true
const anotherKey = "invalid-key";
console.log(validateApiKey(anotherKey)); // ์ค๋ฅ: 'string' ํ์
์ ์ธ์๋ '"your-api-key"' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ์์ TypeScript๋ apiKey์ ํ์
์ ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์
"your-api-key"๋ก ์ถ๋ก ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์์๊ฐ ์๋ ๊ฐ์ ๋ณ์์ ํ ๋นํ๋ฉด, TypeScript๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋์ ๋ฒ์์ string ํ์
์ผ๋ก ์ถ๋ก ํฉ๋๋ค.
2. ์ซ์ ๋ฆฌํฐ๋ด ํ์ ์ถ๋ก ํ๊ธฐ:
const port = 8080; // TypeScript๋ port์ ํ์
์ 8080์ผ๋ก ์ถ๋ก ํฉ๋๋ค
function startServer(portNumber: 8080) {
console.log(`Starting server on port ${portNumber}`);
}
startServer(port); // ์ ํจํจ
const anotherPort = 3000;
startServer(anotherPort); // ์ค๋ฅ: 'number' ํ์
์ ์ธ์๋ '8080' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์กฐ๊ฑด๋ถ ํ์ (Conditional Types)๊ณผ ํจ๊ป ๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉํ๊ธฐ
๋ฆฌํฐ๋ด ํ์ ์ ์กฐ๊ฑด๋ถ ํ์ ๊ณผ ๊ฒฐํฉ๋ ๋ ํจ์ฌ ๋ ๊ฐ๋ ฅํด์ง๋๋ค. ์กฐ๊ฑด๋ถ ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ค๋ฅธ ํ์ ์ ์์กดํ๋ ํ์ ์ ์ ์ํ ์ ์์ด, ๋งค์ฐ ์ ์ฐํ๊ณ ํํ๋ ฅ์ด ํ๋ถํ ํ์ ์์คํ ์ ๋ง๋ค ์ ์์ต๋๋ค.
๊ธฐ๋ณธ ๋ฌธ๋ฒ
์กฐ๊ฑด๋ถ ํ์ ์ ๋ฌธ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
TypeA extends TypeB ? TypeC : TypeD
์ด๋ ๋ง์ฝ TypeA๊ฐ TypeB์ ํ ๋น ๊ฐ๋ฅํ๋ฉด ๊ฒฐ๊ณผ ํ์
์ TypeC๊ฐ ๋๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด ๊ฒฐ๊ณผ ํ์
์ TypeD๊ฐ ๋๋ค๋ ์๋ฏธ์
๋๋ค.
์ค์ฉ์ ์ธ ์์
1. ์ํ๋ฅผ ๋ฉ์์ง์ ๋งคํํ๊ธฐ:
type Status = "pending" | "in progress" | "completed" | "failed";
type StatusMessage = T extends "pending"
? "Waiting for action"
: T extends "in progress"
? "Currently processing"
: T extends "completed"
? "Task finished successfully"
: "An error occurred";
function getStatusMessage(status: T): StatusMessage {
switch (status) {
case "pending":
return "Waiting for action" as StatusMessage;
case "in progress":
return "Currently processing" as StatusMessage;
case "completed":
return "Task finished successfully" as StatusMessage;
case "failed":
return "An error occurred" as StatusMessage;
default:
throw new Error("์ ํจํ์ง ์์ ์ํ์
๋๋ค");
}
}
console.log(getStatusMessage("pending")); // Waiting for action
console.log(getStatusMessage("in progress")); // Currently processing
console.log(getStatusMessage("completed")); // Task finished successfully
console.log(getStatusMessage("failed")); // An error occurred
์ด ์์ ๋ ์กฐ๊ฑด๋ถ ํ์
์ ์ฌ์ฉํ์ฌ ๊ฐ ๊ฐ๋ฅํ ์ํ๋ฅผ ํด๋น ๋ฉ์์ง์ ๋งคํํ๋ StatusMessage ํ์
์ ์ ์ํฉ๋๋ค. getStatusMessage ํจ์๋ ์ด ํ์
์ ํ์ฉํ์ฌ ํ์
-์์ ํ ์ํ ๋ฉ์์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
2. ํ์ -์์ ํ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ง๋ค๊ธฐ:
type EventType = "click" | "mouseover" | "keydown";
type EventData = T extends "click"
? { x: number; y: number; } // ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ดํฐ
: T extends "mouseover"
? { target: HTMLElement; } // ๋ง์ฐ์ค์ค๋ฒ ์ด๋ฒคํธ ๋ฐ์ดํฐ
: { key: string; } // ํค๋ค์ด ์ด๋ฒคํธ ๋ฐ์ดํฐ
function handleEvent(type: T, data: EventData) {
console.log(`Handling event type ${type} with data:`, data);
}
handleEvent("click", { x: 10, y: 20 }); // ์ ํจํจ
handleEvent("mouseover", { target: document.getElementById("myElement")! }); // ์ ํจํจ
handleEvent("keydown", { key: "Enter" }); // ์ ํจํจ
handleEvent("click", { key: "Enter" }); // ์ค๋ฅ: '{ key: string; }' ํ์
์ ์ธ์๋ '{ x: number; y: number; }' ํ์
์ ๋งค๊ฐ๋ณ์์ ํ ๋นํ ์ ์์ต๋๋ค.
์ด ์์ ๋ ์ด๋ฒคํธ ํ์
์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ EventData ํ์
์ ๋ง๋ญ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ ์ด๋ฒคํธ ํ์
์ ๋ํด ์ฌ๋ฐ๋ฅธ ๋ฐ์ดํฐ๊ฐ handleEvent ํจ์์ ์ ๋ฌ๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
TypeScript ํ๋ก์ ํธ์์ ๋ฆฌํฐ๋ด ํ์ ์ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
- ์ ์ฝ ์กฐ๊ฑด ๊ฐ์ ๋ฅผ ์ํด ๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉํ๊ธฐ: ์ฝ๋์์ ๋ณ์๋ ์์ฑ์ด ํน์ ๊ฐ๋ง ๊ฐ์ ธ์ผ ํ๋ ๋ถ๋ถ์ ์๋ณํ๊ณ ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ์ ์ฝ ์กฐ๊ฑด์ ๊ฐ์ ํ์ธ์.
- ๋ฆฌํฐ๋ด ํ์ ์ ์ ๋์ธ ํ์ ๊ณผ ๊ฒฐํฉํ๊ธฐ: ๋ฆฌํฐ๋ด ํ์ ์ ์ ๋์ธ ํ์ ๊ณผ ๊ฒฐํฉํ์ฌ ๋ ์ ์ฐํ๊ณ ํํ๋ ฅ์ด ํ๋ถํ ํ์ ์ ์๋ฅผ ๋ง๋์ธ์.
- ๊ฐ๋ ์ฑ์ ์ํด ํ์ ๋ณ์นญ ์ฌ์ฉํ๊ธฐ: ํ์ ๋ณ์นญ์ ์ฌ์ฉํ์ฌ ๋ฆฌํฐ๋ด ํ์ ์ ์๋ฏธ ์๋ ์ด๋ฆ์ ๋ถ์ฌํ์ฌ ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค์ธ์.
- ๋ฆฌํฐ๋ด ์ถ๋ก ํ์ฉํ๊ธฐ:
const๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ TypeScript์ ๋ฆฌํฐ๋ด ์ถ๋ก ๊ธฐ๋ฅ์ ํ์ฉํ์ธ์. - enum ์ฌ์ฉ ๊ณ ๋ คํ๊ธฐ: ๋ ผ๋ฆฌ์ ์ผ๋ก ๊ด๋ จ์ด ์๊ณ ๋ด๋ถ์ ์ธ ์ซ์ ํํ์ด ํ์ํ ๊ณ ์ ๋ ๊ฐ ์งํฉ์ ๊ฒฝ์ฐ, ๋ฆฌํฐ๋ด ํ์ ๋์ enum์ ์ฌ์ฉํ์ธ์. ๊ทธ๋ฌ๋ ๋ฐํ์ ๋น์ฉ ๋ฐ ํน์ ์๋๋ฆฌ์ค์์ ๋ ์๊ฒฉํ ํ์ ๊ฒ์ฌ ๊ฐ๋ฅ์ฑ๊ณผ ๊ฐ์ ๋ฆฌํฐ๋ด ํ์ ๋๋น enum์ ๋จ์ ์ ์ ์ํ์ธ์.
- ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ์ํด ์กฐ๊ฑด๋ถ ํ์ ์ฌ์ฉํ๊ธฐ: ๋ค๋ฅธ ํ์ ์ ์์กดํ๋ ํ์ ์ ์ ์ํด์ผ ํ ๋, ์กฐ๊ฑด๋ถ ํ์ ์ ๋ฆฌํฐ๋ด ํ์ ๊ณผ ํจ๊ป ์ฌ์ฉํ์ฌ ๋งค์ฐ ์ ์ฐํ๊ณ ๊ฐ๋ ฅํ ํ์ ์์คํ ์ ๋ง๋์ธ์.
- ์๊ฒฉํจ๊ณผ ์ ์ฐ์ฑ์ ๊ท ํ ๋ง์ถ๊ธฐ: ๋ฆฌํฐ๋ด ํ์ ์ ๋ฐ์ด๋ ํ์ ์์ ์ฑ์ ์ ๊ณตํ์ง๋ง, ์ฝ๋๋ฅผ ๊ณผ๋ํ๊ฒ ์ ์ฝํ์ง ์๋๋ก ์ฃผ์ํ์ธ์. ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ ์ง ์ฌ๋ถ๋ฅผ ์ ํํ ๋ ์๊ฒฉํจ๊ณผ ์ ์ฐ์ฑ ์ฌ์ด์ ์ฅ๋จ์ ์ ๊ณ ๋ คํ์ธ์.
๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉ์ ์ด์
- ํฅ์๋ ํ์ ์์ ์ฑ: ๋ฆฌํฐ๋ด ํ์ ์ ์ฌ์ฉํ๋ฉด ๋ ์ ํํ ํ์ ์ ์ฝ ์กฐ๊ฑด์ ์ ์ํ ์ ์์ด, ์ ํจํ์ง ์์ ๊ฐ์ผ๋ก ์ธํ ๋ฐํ์ ์ค๋ฅ์ ์ํ์ ์ค์ ๋๋ค.
- ์ฝ๋ ๋ช ํ์ฑ ํฅ์: ๋ณ์ ๋ฐ ์์ฑ์ ํ์ฉ๋๋ ๊ฐ์ ๋ช ์์ ์ผ๋ก ์ง์ ํจ์ผ๋ก์จ, ๋ฆฌํฐ๋ด ํ์ ์ ์ฝ๋๋ฅผ ๋ ์ฝ๊ธฐ ์ฝ๊ณ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ๋ ๋์ ์๋ ์์ฑ: IDE๋ ๋ฆฌํฐ๋ด ํ์ ์ ๊ธฐ๋ฐ์ผ๋ก ๋ ๋์ ์๋ ์์ฑ ์ ์์ ์ ๊ณตํ์ฌ ๊ฐ๋ฐ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์์ ํ ๋ฆฌํฉํ ๋ง: ๋ฆฌํฐ๋ด ํ์ ์ TypeScript ์ปดํ์ผ๋ฌ๊ฐ ๋ฆฌํฉํ ๋ง ๊ณผ์ ์์ ๋ฐ์ํ๋ ๋ชจ๋ ํ์ ์ค๋ฅ๋ฅผ ์ก์์ฃผ๊ธฐ ๋๋ฌธ์ ์์ ๊ฐ์ ๊ฐ์ง๊ณ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์ธ์ง ๋ถํ ๊ฐ์: ๊ฐ๋ฅํ ๊ฐ์ ๋ฒ์๋ฅผ ์ค์์ผ๋ก์จ, ๋ฆฌํฐ๋ด ํ์ ์ ๊ฐ๋ฐ์์ ์ธ์ง ๋ถํ๋ฅผ ๋ฎ์ถ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
TypeScript ๋ฆฌํฐ๋ด ํ์ ์ ์๊ฒฉํ ๊ฐ ์ ์ฝ์ ๊ฐ์ ํ๊ณ , ์ฝ๋ ๋ช ํ์ฑ์ ํฅ์์ํค๋ฉฐ, ์ค๋ฅ๋ฅผ ๋ฐฉ์งํ ์ ์๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ๋๋ค. ๋ฌธ๋ฒ, ์ฌ์ฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์ด์ ์ ์ดํดํจ์ผ๋ก์จ, ๋ฆฌํฐ๋ด ํ์ ์ ํ์ฉํ์ฌ ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด TypeScript ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ์์ ํ๋ ํธ ๋ฐ API ์๋ํฌ์ธํธ ์ ์๋ถํฐ ๋ค์ํ ์ธ์ด ์ฒ๋ฆฌ ๋ฐ ํ์ -์์ ํ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์์ฑ์ ์ด๋ฅด๊ธฐ๊น์ง, ๋ฆฌํฐ๋ด ํ์ ์ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์๋ ๊ด๋ฒ์ํ ์ค์ฉ์ ์ธ ์์ฉ ํ๋ก๊ทธ๋จ์ ์ ๊ณตํฉ๋๋ค.