왜 타입스크립트에서 Generic 을 사용해야하는지와 타입스크립트 Generic 을 쓰게 되는 이유에 대한 사유

why-we-need-to-use-typescript-and-generic.ts

// 타입스크립트 기본강좌는 아래를 참조해주시기 바랍니다. 
// https://typescript-kr.github.io/pages/basic-types.html

// 기본 예시입니다.
let a = 'blabla'

// 타입스크립트를 이용해서
// 문자열 형식만 넣을 수 있는
// 변수를 선언한 예시입니다.
let b: string

// 예시용 데이터 입니다.
let address = {
    user1: { get: () => { return 'user1' } },
    user2: { get: () => { return 'user2' } }
};

// 객체의 타입을 따 오는 방법입니다.
let somesome1: typeof address

// 임의의 객체의 타입을 지정하는 방법입니다.
let somesome2: {
    [blabla in string]: number
}

//  객체의 목록을 따서 타입으로 연결하는 방법입니다.
let somesome3: {
    [blabla in keyof typeof address]
};

// ! 타입 반환이 없는 안 좋은 사용 사례입니다.
(() => {

    const getAllAddress_X = (data) => {
        return data
    }
    const data = getAllAddress_X(address)

});

// * 제네릭 사용을 통한 타입 반환을 하는 좋은 사용 사례입니다.
(() => {

    const getAllAddress = <SomeData>(data: SomeData) => {
        return data
    }
    const data = getAllAddress(address)

});

// ! 제네릭을 씀에도 타입 반환이 없는 안 좋은 함수 사례입니다.
(() => {

    const getAllUsers_X = <SomeData>(data: SomeData) => {
        // ! 값을 변형해서 담았는데 이과정에서 타입 추론 연결 실패
        let parsed: any = {}

        for (let key of Object.keys(data)) {
            let item = data[key]
            parsed[key] = item.get()
        }
        return parsed
    }

    const data = getAllUsers_X(address)
});

// * 제네릭 사용을 통한 타입 반환을 하는 좋은 함수 사례입니다.
(() => {

    const getAllUsers = <SomeData>(data: SomeData): {
        [somesome in keyof SomeData]
    } => {
        let parsed: any = {}

        for (let key of Object.keys(data)) {
            let item = data[key]
            parsed[key] = item.get()
        }
        return parsed
    }

    const data = getAllUsers(address)

});

// * 반환 객체의 key 뿐만 아니라 value 도 타입 반환하는 더 좋은 사례입니다.
(() => {

    const getAllUsers = <SomeData>(data: SomeData): {
        [somesome in keyof SomeData]: SomeData[somesome]
    } => {
        let parsed: any = {}

        for (let key of Object.keys(data)) {
            let item = data[key]
            parsed[key] = item.get()
        }
        return parsed
    }

    const data = getAllUsers(address)

});

타입스크립트의 제네릭을 고급지게 쓰는 방법과 타입스크립트의 제네릭을 쓸 수 밖에 없는 예시 사례를 간략하게 정리해보았습니다.

위에부터 적혀있는 내용들은 최종적으로 이 제네릭을 이해하기 위한 초석들입니다.

좋은 정보 감사합니다.
근데 혹시 vscode 테마 뭐 쓰시는지 공유될까요...하핫,,!

@poburi synthwave 84 입니다 ㅎㅎ

https://www.notion.so/Typescript-9ad1a897277b45f0a61f1c49c8ccc94a