basics.ts - Examples

  1/**
  2 * TypeScript 기초
  3 * - 기본 타입
  4 * - 타입 추론
  5 * - 유니온/리터럴 타입
  6 * - 타입 가드
  7 */
  8
  9// ============================================
 10// 1. 기본 타입
 11// ============================================
 12
 13// 원시 타입
 14const name: string = "홍길동";
 15const age: number = 25;
 16const isActive: boolean = true;
 17const nothing: null = null;
 18const notDefined: undefined = undefined;
 19
 20// 배열
 21const numbers: number[] = [1, 2, 3, 4, 5];
 22const names: Array<string> = ["Alice", "Bob", "Charlie"];
 23
 24// 튜플 (고정된 길이와 타입)
 25const person: [string, number] = ["홍길동", 25];
 26const rgb: [number, number, number] = [255, 128, 0];
 27
 28// 객체
 29const user: { name: string; age: number; email?: string } = {
 30    name: "김철수",
 31    age: 30,
 32    // email은 선택적(optional)
 33};
 34
 35console.log("=== 기본 타입 ===");
 36console.log(`이름: ${name}, 나이: ${age}, 활성: ${isActive}`);
 37console.log(`숫자 배열: ${numbers.join(", ")}`);
 38console.log(`튜플: ${person[0]}(${person[1]}세)`);
 39
 40// ============================================
 41// 2. 타입 추론 (Type Inference)
 42// ============================================
 43
 44// TypeScript가 타입을 자동으로 추론
 45let inferredString = "Hello";  // string으로 추론
 46let inferredNumber = 42;       // number로 추론
 47let inferredArray = [1, 2, 3]; // number[]로 추론
 48
 49// 함수 반환 타입 추론
 50function add(a: number, b: number) {
 51    return a + b;  // number 반환으로 추론
 52}
 53
 54const sum = add(10, 20);  // sum은 number로 추론
 55
 56console.log("\n=== 타입 추론 ===");
 57console.log(`추론된 합계: ${sum}`);
 58
 59// ============================================
 60// 3. 유니온 타입 (Union Types)
 61// ============================================
 62
 63// 여러 타입 중 하나
 64type StringOrNumber = string | number;
 65
 66function printId(id: StringOrNumber) {
 67    console.log(`ID: ${id}`);
 68
 69    // 타입에 따른 처리
 70    if (typeof id === "string") {
 71        console.log(`  (문자열, 길이: ${id.length})`);
 72    } else {
 73        console.log(`  (숫자, 2배: ${id * 2})`);
 74    }
 75}
 76
 77console.log("\n=== 유니온 타입 ===");
 78printId("user_123");
 79printId(42);
 80
 81// ============================================
 82// 4. 리터럴 타입 (Literal Types)
 83// ============================================
 84
 85// 특정 값만 허용
 86type Direction = "up" | "down" | "left" | "right";
 87type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;
 88
 89function move(direction: Direction) {
 90    console.log(`Moving ${direction}`);
 91}
 92
 93function rollDice(): DiceValue {
 94    return Math.ceil(Math.random() * 6) as DiceValue;
 95}
 96
 97console.log("\n=== 리터럴 타입 ===");
 98move("up");
 99move("left");
100console.log(`주사위: ${rollDice()}`);
101
102// ============================================
103// 5. any, unknown, never
104// ============================================
105
106// any: 모든 타입 허용 (타입 체크 비활성화, 사용 자제)
107let anything: any = "hello";
108anything = 42;
109anything = true;
110
111// unknown: 모든 타입 허용, 사용 시 타입 체크 필요
112let unknownValue: unknown = "hello";
113
114// unknown은 바로 사용 불가, 타입 확인 필요
115if (typeof unknownValue === "string") {
116    console.log(`unknown 값: ${unknownValue.toUpperCase()}`);
117}
118
119// never: 절대 발생하지 않는 타입
120function throwError(message: string): never {
121    throw new Error(message);
122}
123
124function infiniteLoop(): never {
125    while (true) {
126        // 무한 루프
127    }
128}
129
130console.log("\n=== any, unknown ===");
131console.log(`any 값: ${anything}`);
132
133// ============================================
134// 6. 타입 별칭 (Type Alias)
135// ============================================
136
137type Point = {
138    x: number;
139    y: number;
140};
141
142type ID = string | number;
143
144type UserRole = "admin" | "editor" | "viewer";
145
146type UserProfile = {
147    id: ID;
148    name: string;
149    role: UserRole;
150    location: Point;
151};
152
153const admin: UserProfile = {
154    id: "admin_001",
155    name: "관리자",
156    role: "admin",
157    location: { x: 0, y: 0 }
158};
159
160console.log("\n=== 타입 별칭 ===");
161console.log(`사용자: ${admin.name} (${admin.role})`);
162
163// ============================================
164// 7. 타입 가드 (Type Guards)
165// ============================================
166
167type Circle = { kind: "circle"; radius: number };
168type Rectangle = { kind: "rectangle"; width: number; height: number };
169type Shape = Circle | Rectangle;
170
171// 판별 유니온 (Discriminated Union)
172function getArea(shape: Shape): number {
173    switch (shape.kind) {
174        case "circle":
175            return Math.PI * shape.radius ** 2;
176        case "rectangle":
177            return shape.width * shape.height;
178    }
179}
180
181// in 연산자로 타입 가드
182function printShape(shape: Shape) {
183    if ("radius" in shape) {
184        console.log(`원: 반지름 ${shape.radius}`);
185    } else {
186        console.log(`사각형: ${shape.width} x ${shape.height}`);
187    }
188}
189
190console.log("\n=== 타입 가드 ===");
191const circle: Circle = { kind: "circle", radius: 5 };
192const rect: Rectangle = { kind: "rectangle", width: 10, height: 20 };
193
194console.log(`원 면적: ${getArea(circle).toFixed(2)}`);
195console.log(`사각형 면적: ${getArea(rect)}`);
196printShape(circle);
197printShape(rect);
198
199// ============================================
200// 8. 타입 단언 (Type Assertion)
201// ============================================
202
203// as 키워드로 타입 단언
204const input = document.getElementById("myInput") as HTMLInputElement;
205// 또는 angle-bracket 문법 (JSX에서 사용 불가)
206// const input = <HTMLInputElement>document.getElementById("myInput");
207
208// 주의: 타입 단언은 런타임에 영향 없음
209const maybeString: unknown = "hello world";
210const strLength = (maybeString as string).length;
211
212console.log("\n=== 타입 단언 ===");
213console.log(`문자열 길이: ${strLength}`);
214
215// ============================================
216// 9. 함수 타입
217// ============================================
218
219// 함수 타입 정의
220type MathOperation = (a: number, b: number) => number;
221
222const multiply: MathOperation = (a, b) => a * b;
223const divide: MathOperation = (a, b) => a / b;
224
225// 선택적 매개변수와 기본값
226function greet(name: string, greeting: string = "안녕하세요"): string {
227    return `${greeting}, ${name}님!`;
228}
229
230// 나머지 매개변수
231function sumAll(...numbers: number[]): number {
232    return numbers.reduce((acc, cur) => acc + cur, 0);
233}
234
235// 오버로드 시그니처
236function format(value: string): string;
237function format(value: number): string;
238function format(value: string | number): string {
239    if (typeof value === "string") {
240        return value.toUpperCase();
241    } else {
242        return value.toFixed(2);
243    }
244}
245
246console.log("\n=== 함수 타입 ===");
247console.log(`곱셈: 3 * 4 = ${multiply(3, 4)}`);
248console.log(`나눗셈: 10 / 3 = ${divide(10, 3).toFixed(2)}`);
249console.log(greet("홍길동"));
250console.log(greet("김철수", "반갑습니다"));
251console.log(`합계: ${sumAll(1, 2, 3, 4, 5)}`);
252console.log(`문자열 포맷: ${format("hello")}`);
253console.log(`숫자 포맷: ${format(3.14159)}`);
254
255// ============================================
256// 10. 열거형 (Enum)
257// ============================================
258
259// 숫자 열거형
260enum Direction2 {
261    Up = 1,
262    Down,
263    Left,
264    Right
265}
266
267// 문자열 열거형
268enum HttpStatus {
269    OK = "OK",
270    NotFound = "NOT_FOUND",
271    ServerError = "SERVER_ERROR"
272}
273
274// const enum (인라인됨)
275const enum Color {
276    Red = "#ff0000",
277    Green = "#00ff00",
278    Blue = "#0000ff"
279}
280
281console.log("\n=== 열거형 ===");
282console.log(`Direction.Up: ${Direction2.Up}`);
283console.log(`Direction.Right: ${Direction2.Right}`);
284console.log(`HttpStatus.OK: ${HttpStatus.OK}`);
285console.log(`Color.Red: ${Color.Red}`);
286
287// ============================================
288// 11. Null 체크
289// ============================================
290
291// strictNullChecks가 활성화된 경우
292function processValue(value: string | null | undefined) {
293    // 옵셔널 체이닝
294    const length = value?.length;
295
296    // Nullish 병합
297    const defaulted = value ?? "기본값";
298
299    // Non-null 단언 (확실할 때만 사용)
300    // const definite = value!.length;
301
302    console.log(`길이: ${length}, 값: ${defaulted}`);
303}
304
305console.log("\n=== Null 체크 ===");
306processValue("hello");
307processValue(null);
308processValue(undefined);
309
310// ============================================
311// 실행 예시
312// ============================================
313console.log("\n=== TypeScript 기초 완료 ===");
314console.log("컴파일: npx tsc basics.ts");
315console.log("실행: node basics.js");