inflearn logo
강의

Course

Instructor

[Code Factory] [Beginner] Complete Typescript Course from Code Factory in Just 8 Hours

12_experimental_decorator, class decorator

Resolved

131

kdm376037605562

10 asked

0

1) 가장 먼저 궁금한 것은 decorator 자체에 대한 부분입니다. 일단 class decorator로 한정지어서 질문드리자면 아래 코드에서 ChangeClass라는 함수는 결국 어떤 이름도 없는 class 자체를 반환할 뿐인데 어떻게 이 ChangeClass가 기존의 Idol 클래스를 덮어쓰는지 자체가 의문입니다. 그냥 그게 class decorator의 역할이라고 한다면 납득해야겠지만 뭔가 찝찝한 구석이 남아있는 듯한 느낌입니다...

function ChangeClass<T extends { new (...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        groupName = "아이브";

        constructor(...params: any[]) {
            super(...params);

            console.log("constructor instantiated");
        }
    };
}

 

2) ChangeClass에 대한 질문입니다.

아래 코드는 에러가 납니다. ChangeClass라는 함수를 class decorator로써 사용했다면 결국 실제로 인스턴스를 생성할 때 이 ChangeClass에서 리턴한 클래스에 따라서 인스턴스가 생성된다는 것인데 왜 groupName 이란 프로퍼티에 값을 미리 초기화시키는 것은 괜찮고 인스턴스 생성시에 추가적인 프로퍼티에 대한 입력을 받는 것은 왜 불가능한지 의문입니다.

function ChangeClass<T extends { new (...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        groupName: string;

        constructor(...params: any[], groupName: string) {
            super(...params);
            this.groupName = groupName;

            console.log("constructor instantiated");
        }
    };
}

 

 

typescript

Answer 1

0

codefactory

안녕하세요!

상세한 질문 감사합니다.

하나씩 답변 드리도록 하겠습니다.

질문을 제가 이해한대로 정리해봤는데 혹시 잘못 이해했다면 말씀부탁드립니다.

 

1) Class Decorator가 도대체 어떻게 적용된 클래스의 정의를 덮어쓰는가?

어디서 헷갈리신건지 문맥에선 정확히 이해가 어려워서 클래스 데코레이터 정의부타 다시한번 가도록 하겠습니다.

아래 링크를 참고해보시면 공식 문서의 Class Decorator 정의가 있습니다.

https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators

현재 질문 문맥에서 가장 중요한 문장은 아래로 보입니다.

 

If the class decorator returns a value, it will replace the class declaration with the provided constructor function.

 

만약에 Class Decorator가 "값을 반환한다면" 제공된 생성자 함수로 "클래스 정의를 대체한다"

 

직역보단 의역을 했지만 충분히 의미는 전달될거라 생각합니다.

결국 질문하신 "어떻게 Class Decorator가 클래스의 정의를 대체하냐?"는 Class Decorator 자체의 정의입니다. 그렇게 할 수 있도록 만들어진거죠.

 

2) 왜 constructor에 파라미터 추가가 불가능한가?

Class Decorator에서 반환한 클래스는 mixin 적용으로 인식되며 mixin에는 원래 하나의 spread 파라미터만 받을 수 있다는 룰이 있습니다. 하지만 TS 룰일 뿐이기 때문에 아마 suppress 하시면 실행에는 문제가 없을걸로 보이며 따로 groupName을 받을 필요 없이 어차피 spread이기 때문에 원하는 값을 필터링해서 받으실 수 있을겁니다.

감사합니다!

ts강의 42. override 마지막즘 질문

0

42

1

25. js array의 문제점 4:55쯤 질문입니다

0

31

1

union 기본기 7분 53초 질문 드립니다.

0

117

2

Equality Narrowing 관련 질문

0

117

2

tsconfig.json 설명

0

124

2

환불 관련 질문 드립니다.

0

179

1

재너릭이랑 any 차이가 뭔가요?

0

221

2

리플렉션과 데코레이터 사용시 의문점

0

135

2

변수의 선언이 중복되었다고 할 때

0

162

2

type 으로 함수의 형식을 정의하고 함수를 정의할 때

0

144

1

declare 키워드가 가끔 나오던데 이건 뭔가요?

0

150

2

class가 값이 될 수 있다는 말을 이해하기 어렵습니다.

0

127

1

null값의 타입은 object 아닌가요?

0

188

1

타입? 인터페이스? 질문있습니다

0

147

1

type functionOnly = Extract<string| (()=> void), Function> 의 의미

0

171

2

npm install cache error

0

205

1

9_class/7_override.ts, super 키워드 질문

0

211

2

강의 계획이 궁금합니다!

0

289

1

instantiator 질문

0

151

1

따라하는데 에러 생기네요

1

390

2

webstorm에서 ts-node 설치해도 문제가 발생하고 있습니다.

0

485

3

infer를 사용한 type의 쓰임새

0

131

1

혹시 수업하면서 작성된 코드는 따로 받아 볼 수 없나요?

0

203

1

object intersection에서 유니언으로 타입 질문

1

129

1