React 학습 4주차 — TypeScript 기본 타입부터 제네릭까지

let isDone: boolean = false

// 방식 1: 타입 뒤에 [] 붙이기
let list: number[] = [1, 2, 3]
 
// 방식 2: 제네릭 배열 타입
let list: Array<number> = [1, 2, 3]

let x: [string, number]
x = ["hello", 10]  // (O)
x = [10, "hello"]  // (X)
x[2] = "world"     // (X)

enum Direction {
    Up,    // 0
    Down,  // 1
    Left,  // 2
    Right  // 3
}

enum Direction {
    Up = 10,
    Down = 11,
    Left = 12,
    Right = 13
}

(function (Direction) {
    Direction[Direction["Up"] = 11] = "Up";
    Direction[Direction["Down"] = 12] = "Down";
    Direction[Direction["Left"] = 13] = "Left";
    Direction[Direction["Right"] = 14] = "Right";
})(Direction || (Direction = {}));

enum Direction {
    Up = 13,
    Down,     // 암시적으로 14
    Left = 14,
    Right = 14,
}
// Direction[14] → "Right"

enum Direction {
    Up = 10,
    Down = Up - 1,   // 9
    Left = 11,
    Right = Left + 1 // 12
}
 
enum Border {
    Top = Direction.Up,     // 10
    Bottom = Direction.Down // 9
}

let a: Direction.Up
 
a = 10          // (O)
a = Border.Top  // (X) Type 'Border.Top' is not assignable to type 'Direction.Up'

type Shape = 'circle' | 'square';
 
function getShapeArea(shape: Shape): number {
    switch (shape) {
        case 'circle':
            return Math.PI;
        case 'square':
            return 4;
        default:
            const _exhaustiveCheck: never = shape;
            throw new Error(`Unhandled case: ${shape}`);
    }
}

function throwError(message: string): never {
    throw new Error(message);
}
 
function infiniteLoop(): never {
    while (true) {}
}

type User = { name: string } | { id: number };
 
function handleUser(user: User) {
    if ('name' in user) {
        console.log(user.name);
    } else if ('id' in user) {
        console.log(user.id);
    } else {
        const unreachable: never = user; // 이 경로는 절대 발생하면 안 됨
    }
}

interface SquareConfig {
    color?: string;
    width?: number;
}
 
// 에러: colour는 SquareConfig에 없는 속성
let mySquare = createSquare({ colour: "red", width: 100 });

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

interface Person {
    name: string;
    age: number;
}
 
interface Job extends Person {
    skill: string
}
// 위 코드는 아래와 사실상 동일합니다.
// interface Job {
//     name: string;
//     age: number;
//     skill: string;
// }
 
const user: Job = {
    name: 'Soul',
    age: 1,
    skill: 'sleeping'
}

// 상품 탭에 대한 타입 제한 선언
export type StoreType = 'Luxury' | 'Sports' | 'Digital'
 
export type StoreInitType = {
    name: {
        kr: string
        en: StoreType
    }
    id: string
    order: {
        ranking: 'daily' | 'weekly' | 'monthly'
        store: 'recommend' | 'popular'
    }
}

function padLeft(value: string, padding: string | number) {
    // ...
}

function sampleFunc(a: string | number) {
    return a.length  // 에러: number에는 length가 없음
    // Property 'length' does not exist on type 'string | number'.
}

function sampleFunc(a: string | number) {
    if (typeof a === 'string') {
        return a.length
    }
    return a
}

interface Person {
    name: string;
    age: number;
}
 
interface Developer {
    name: string;
    skill: string
}
 
function introduce(someone: Person | Developer) {
    // 에러: Developer에는 age가 없음
    console.log(someone.age)
}

// 로그인 유형을 2가지로 제한 — 오탈자나 기타 오류를 사전에 방지
export type LoginType = 'crew' | 'user'

interface Person {
    name: string;
    age: number;
}
 
interface Developer {
    name: string;
    skill: string
}
 
function introduce(someone: Person & Developer) {
    // Person과 Developer를 모두 만족해야 하므로 age에 접근 가능
    console.log(someone.age)
}

function getText(text: string): string {
    return text
}
 
function getNumber(num: number): number {
    return num
}

function getText<T>(text: T): T {
    return text
}
 
// 매개변수를 string으로 넣으면 반환값도 string으로 추론
getText<string>('hi')
 
// 매개변수를 number로 넣으면 반환값도 number로 추론
getText<number>(2)