TypeScript Utility Types(2)

오늘은 지난번에 미쳐 다 끝내지 못한 TypeScript Utility Types을 마무리 해보자
거두절미 하고 바로 본문으로 들어가보자

ConstructorParamters<Type>

ConstructorParameters<Type>은 Js에서 class를 생성할때 작성하는 constructor 즉, 생성자의 parameter의 type을 tuple형식으로 반환하는 표현이다.

class ExamClass {
    name : string;
    email : string;

    constructor(name : string, email : string) {
        this.name = name;
        this.email = email;
    }
}

type exam1 = ConstructorParameters<typeof ExamClass>
//type exam1 = [name: string, email: string]

function ConstructorParameters() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

잘못된 Type이 들어왔을때는 never를 반환한다.
이미 이름부터 어려운데, 쓰임새는 더 어렵다;;

ReturnType<Type>

함수의 return값의 타입을 반환한다는 표현이다.

function ReturnTypeExamFunc1(a: string, b: number) {
    return {
        a,
        b,
    };
}

declare function ReturnTypeExamFunc2(arg: { c: number }): void;

type exam1 = ReturnType<typeof ReturnTypeExamFunc1>
// type exam1 = { a : string; b : number }
type exam2 = ReturnType<typeof ReturnTypeExamFunc2>
// type exam2 = void

function ReturnType() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

잘못된 Type이 들어왔을때는 any를 반환한다.
이건 굉장히 쓰임이 많을것 같다.

InstanceType<Type>

InstanceType<Type>은 생성자의 return값을 반환하는 표현이다. Js에서 class를 사용할때 new 키워드와 함께 instance를 생성하는데 그것의 타입이 바로 이것을 결과물이다.

class ExamClass {
    name: string;
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

type exam = InstanceType<typeof ExamClass>;
// type exam = ExamClass
const exmaInstance : exam = new ExamClass('jihoon', 'jihoon@gmail.com')

function InstanceType() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

용어 공부를 많이 해야겠다는 생각이 든다.
이것도 처음엔 이해를 못하다가 instance라는 용어를 알자마자 이해가 되었다.

ThisParameterType<Type>

ThisParameterType<Type> 함수형인 Type이 가지는 this 객체의 type을 반환하는 표현이다.

function ThisParameterTypeFunc1(this: { name: string; age: number }) {
    return this;
}

const ThisParameterTypeFunc2 = (this: { name: string; email: string }) => {
    return this;
}; // Error!!!

type exam = ThisParameterType<typeof ThisParameterTypeFunc1>;
// type exam = { name : string; age : number }


function ThisParameterType() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

화살표 함수에선 this를 쓰지못하니 주의하자.
사실 Ts에서 this를 쓰기위해서는 함수에 this 객체의 타입을 무조건 정해줘야하는데 왜쓰는지를 잘 모르겠다..ㅎㅎ

OmitThisParameter<Type >

OmitThisParameter<Type>은 함수형인 Type에서 this parameter를 제외한 함수 type을 반환하는 함수이다.

function OmitThisParameterExamFunc1(this : {a: string, b: number}) {
    console.log(this.a, this.b);
    return this;
}

type exam1 = OmitThisParameter<typeof OmitThisParameterExamFunc1>
// type exam1 = () => { a : string; b : number }

const logAandB : exam1  = OmitThisParameterExamFunc1.bind({a : 'hihi', b : 123})
// 새로운 함수 제작
logAandB();
// 사용법 -> this parameter가 없어졌다!!


function OmitThisParameters() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

즉, 함수를 바인딩하면 this 파라미터는 없어지고 새로운 함수가 만들어지기 때문에 OmitThisParameter<Type>이 반환하는 type값이 필요한것이다.
후...this는 너무 어렵다 ㅠㅠ 애초에 Js가 this를 잘 사용되도록 설게되어 있는가?

내장 문자열 조작 타입

내장 문자열 조작 타입은 문자열 type을 조작하여 새로운 type을 만들어낸다.
1. Uppercase<Type> : 대문자로바꾸기
2. Lowercase<Type> : 소문자로바꾸지
3. Capitalize<Type> : 첫글자를 대문자로 바꾸기
4. Uncapitalize<Type> : 첫글자를 소문자로 바꾸기

type examString = 'jihoon@Naver.com' | 'sDsD' | 'Jay'


type exam1 = Uppercase<examString>
// type exam1 = "JIHOON@NAVER.COM" | "SDSD" | "JAY"
type exam2 = Lowercase<examString>
// type exam2 = "jihoon@naver.com" | "sdsd" | "jay"
type exam3  = Capitalize<examString>
// type exam3 = "Jihoon@Naver.com" | "SDsD" | "Jay"
type exam4 = Uncapitalize<examString>
// type exam4 = "jihoon@Naver.com" | "sDsD" | "jay"

function ManipulateString() {
    return (
        <div className="App">
            <p>TypeScript Utility Types</p>
        </div>
    );
}

참으로 재미있는 기술이다.

이렇게 두번의 포스팅을 통해 TypeScript Utility types에 대해서 알아보았다.
양도 매우 많고 각각의 내용도 이해하기가 힘든 내용이 많아서 시간이 많이 걸리는 포스팅이였다.
사실 얼마나 많이 쓰일지는 모르겠지만 그것도 많이 써보면 깨닫지 않을까 생각이든다.
물론 이것을 안다고 TypeScript를 마스터하는것은 절대 아니다.
TypeScript는 이것말고도 더 넓은 세상이 존재하기 때문이다...ㅎㅎ
아마도 TypeScript는 개발자를 괴롭히기 위해 태어난 아이가 아닐까? ㅋㅋㅋ
그래도 한번쯤 정리하고 싶었던것을 시간내서 정리하고 나니 기분이 너무 좋다!

참조
https://www.typescriptlang.org/docs/handbook/utility-types.html
https://velog.io/@fepanbr/TS-%ED%83%80%EC%9E%85-%EA%B3%B5%EA%B0%84%EA%B3%BC-%EA%B0%92-%EA%B3%B5%EA%B0%84-%EC%8B%AC%EB%B2%8C-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0
https://velog.io/@padoling/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EC%99%80-this-%EB%B0%94%EC%9D%B8%EB%94%A9