Type Script로 static factory method 만들기

7361 단어 TypeScript

운영 환경

$ tsc --version                                                                                                                                                                                                                
Version 2.7.2

코드


interface IUser {
  name: string;
}

class BaseUser implements IUser {
  name: string;

  constructor(initial: Partial<IUser>) {
    (<any>Object).assign(this, initial);
  }

  static createCollection<T extends BaseUser>(
    this: {new(initial): T},
    collectionData
  ): T[] {
    const collection: T[] = [];
    collectionData.forEach(data => {
      const initialData = data as IUser;
      collection.push(new this(initialData));
    });
    return collection;
  }

}

class Manager extends BaseUser {
}

class Programmer extends BaseUser {
}

const array = [
  {name: 'test1'},
  {name: 'test2'},
]

const managers = Manager.createCollection(array)
console.log(managers) // => [ Manager { name: 'test1' }, Manager { name: 'test2' } ]

const programmers = Programmer.createCollection(array)
console.log(programmers) // => [ Programmer { name: 'test1' }, Programmer { name: 'test2' } ]

User의 초기값의 대상의 배열 등을 교부하면 User 등급 실례의 배열이 되돌아올 때 사용하고 싶은 물건입니다.
관건적인static방법은createCollection기초반 등에서 이 방법을 배웠다면 학급을 하나씩 교부하지 않고 기초반의 선배 승계 사례로 돌아가 편리했다.

뭐 해요?

this: {new(initial): T}
this와 그 유형을function의 첫 번째 매개 변수에 전달함으로써this의 유형을 스스로 확정할 수 있습니다.
https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters
또한, 구조기 서명을 사용하여 T라는 concerete class 실례를 되돌려 주는 구조기의 대상형을this 형식으로 지정합니다.
간단하게 this: T하면 error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.라는 착오가 생겨서 빙빙 도는 느낌이 든다.

참조


이 쓰기 방법은 Type Script의 issues를 참조합니다.
https://github.com/Microsoft/TypeScript/issues/5863
issue가 너무 길어서 static에서 this를 사용하기가 힘들 것 같은데...

다른 해석

  static createCollection<T extends BaseUser>(
    this: new (initial) => T,
    collectionData
  ): T[] {

이런 표기법도 같은 결과new (initial) => T인 부분이 어떻게 쓰였는지, 왜 이렇게 됐는지 모르겠다... 아시는 분 있으면 알려주세요

좋은 웹페이지 즐겨찾기