유추 된 일반 유형 (반응식 구성 요소)

Question

Typescript는 추론 된 제네릭 유형에 대해 꽤 좋습니다. 나는 다음과 같은 코드를 작성하는 경우 예를 들어, :

class AwesomeClass<T> { 
    constructor(public val: T) { 
     // ... 
    } 

    public getVal(): T { 
     return this.val; 
    } 
} 

const inst = new AwesomeClass("Hello World"); 
const result = inst.getVal(); 

result 자동으로 string에 입력됩니다. 맵시 있는! 나는 React와 함께 한 발 더 나아가고 싶습니다.

내가 정말 좋아 value이 onClick의 result 인수와 같은 유형이해야한다는 것을 유추 할 것

interface IProps<T> { 
    value: T; 
    onClick: (result: T) => void; 
} 
interface IState { } 

class AwesomeComponent<T> extends React.Component<IProps<T>, IState> { 
    // ... 
} 

추적 구성 요소를 확인합니다. 내가

<AwesomeComponent 
    value="Hello World" 
    onClick={(v) => { console.log(v); }} />; 

와 구성 요소를 초기화 할 때 대신 내가 컴파일 오류 error TS2322: Type 'string' is not assignable to type 'T'를 얻을.

React 요소의 소품에서 일반적인 유형을 추론 할 수 있습니까?

내가 JSX가 React.createElement의 호출에 transpiles 실현 (I 위 내 AwesomeClass 예제처럼이 직접 클래스를 초기화하지 않는 경우)이 과정을 복잡하게 할 수 있음 - 거래 살인자이다? 그렇다면 JSX 구문을 사용하여 제네릭 형식의 이름을 명시 적으로 지정할 수 있습니까?

Answer 1

이것은 아직 가능하지 않습니다. 문제에 대한 설명은 Using lookahead to detect generic JSX elements?입니다. 지금 당신이해야 할 것입니다 무엇을 위해

은 다음과 같습니다

interface IProps<T> { 
    value: T; 
    onClick: (result: T) => void; 
} 
interface IState { } 

class AwesomeComponent<T> extends React.Component<IProps<T>, IState> { 
    // ... 
} 

class ConcreteAwesomeComponent extends AwesomeComponent<string> {} 

<ConcreteAwesomeComponent 
    value="Hello World" 
    onClick={(v) => { console.log(v); }} />;