TypeScript generi c с приведением типов - PullRequest
Новая
       99

TypeScript generi c с приведением типов

0 голосов
/ 31 марта 2020

Я использую декораторы для расширения компонентов класса React дополнительными опорами. Эти реквизиты доступны внутри компонента, но они не видны снаружи. Это прекрасно работает, используя приведение типов для экспортируемого класса. К сожалению, теперь мне нужен generi c для другого реквизита, и я могу настроить кастинг типов для поддержки generi c.

Вот упрощенный пример (декоратор был закомментированы, так как это не относится к функциональности примера кода): 

// --- My Component code ---

import * as React from 'react';

interface SelectionListItemDecoratorProps {
    i18n: { BLAH: string; }
}

interface SelectionListItemProps<D extends any = any> extends SelectionListItemDecoratorProps {
    data: D;

    // onClick(data: D);
}

// @Utils.withI18NProp
class SelectionListItem<D> extends React.PureComponent<SelectionListItemProps<D>> {
    render () {
        return <div>{this.props.i18n.BLAH}</div>;
    }
}

export const ExportedComponent = SelectionListItem as unknown as React.ComponentType<Omit<SelectionListItemProps, keyof SelectionListItemDecoratorProps>>;

// --- The code in the parent component ---

// TypeScript correctly complains about the type of the data-prop here:
const a = <SelectionListItem<string> data={1} />;

// TypeScript complains "Expected 0 type arguments, but got 1.", so the generic is lost here:
const b = <ExportedComponent<string> data={1} />;

https://www.typescriptlang.org/play/index.html?jsx=2&ssl=1&ssc=1&pln=31&pc=1#code / PTAEFpNBZBPUDCB7AtgByQOwKaYC6gDGSAJthJALABQNAlukgE4EBUoAhgM6gBK2HQgQBmTVKADkTAUIkBuGvXzYmwweQDK2ADbYhdLABk6XPAEk82FABE9zDnmYAFMWh4BvGgEg6ARgAcmABcoO6gAEKGAIIAEiGmTHSYAOZyoAC + NJm01EmWquqgWrr6RibmliguSG4APNag2AAelpgkPByY8AC8nF0AfI0tuO1FOnp4BpjGphZWtsRMDs6uHt4kDhwh1go5XiCgWAjadIQA1gAUG3hboNYAlLvZNAcAAgCqk9pcAHQA7nQ8AALMwBABy1TQNEI2m4PGKEymMwqVnqg2arVG-EEeB + TgArtJkIwcPhagjStNynMqqs0YNPNQvNI2ipQBd7qFvMzsHhCZhQLUSHQAG79dzAkw-NCrH5 + QI-SKxdK1YDCsW7LzZZ7UZoYFhELCmUAAUSa + ssJGJGFJBF6FMmZVmlU4PHxmDOmCQfwF3D4Mlx1qwuDwABVYGhsLUAPIoQHk8aU5E0yFcAA0oDO2FgSGEYxKjqpzvmdiWjiYqf6-V2LzAkHAoFDQPIxDIoCSoGB5DQHBZBGIJJDFHAimoB3DkY0hESaH7zGkQm08AHaFhSQ6ACMkPiCF3OxHyLnO83QNcOOAZTVQM3pEFoUaCBxQL0EwWkdTKrUEk lkoMz913F8dJQGAatR3HA8pxnOd0DXTAeAAIjNSMhGwEhQAABn3SNOCYZJ8RQEN01ADcd1AZIkAIXwfgQjMuCQY9yGSXAVFOdseG0JBjRvbA72oYh4IIDdn0FZDmEtINbS-PBEhSP9NgAoCQLA6ggA

1010 * В то время как в этом примере код a, машинопись правильно compains о типе данных-пропеллер, в примере код b, машинопись сетует «Ожидалось 0 аргументы типа, но получил 1 ", так что GENERI c теряется здесь: 1014 * Я думаю, что я нахожусь на правильном направлении с такой корректировки, как это: https://www.typescriptlang.org/play/index.html?jsx=2#code / PTAEFpNBZBPUDCB7AtgByQOwKaYC6gDGSAJthJALABQNAlukgE4EBUoAhgM6gBK2HQgQBmTVKADkTAUIkBuGvXzYmwweQDK2ADbYhdLABk6XPAEk82FABE9zDnmYAFMWh4BvGgEg6ARgAcmABcoO6gAEKGAIIAEiGmTHSYAOZyoAC + NJm01EmWquqgWrr6RibmliguSG4APNYAfKDYAB6WmCQ8xXp4BpjGphZWtsRMDs6uHt4kDhwh1go5XiCgWAjadIQA1gAUM3hzoNYAlIvZNCsAAgCqvdpcAHQA7nR4ABZmAQBy1Wg0hNpuF0dD0 + gMKlZ6k1Wu1OnwZHgHk4AK7SZCMHD4WrdUr9cpDKqTKFNTzULzSDoqUA7Y6hbzk7B4VGYUC1Eh0ABuDXc7xMDzQkwefkCD0isXStWA7K5iy82XO1DwsDQ5AAoi0MCxsCR0RhMXgACrK7BQ0AAXnhgkRuqwuENxtqAHkUK9sSDceCCb8uFCADSgLbYWBIYRFd29M qDSojeyOJjehoNRatTUEYiYUygdWp7U2-XmsMlCN4qNWTg8ZGYLaYJBPFncLMa5iWHWoPV2o0q2ocTCwJOKagrSDgUAGt7kYhkUBJUDvchoDgUtNt234CjgAcrTvYDSERJoZdMaRCbTwYjoQFJHgcABGSGRBDns + Nq1DT-2HHAApqoHH0i C -xYJmHAFm6RZgvilS1AkSTJE0H5mu4vjpKAwD9jkW7Gru + 7LheHBXqAABE2Y9NqoAAAzPiqnBMMkyIoHaXD + jeD6gMkSAEL4DyEf6XBILO45sbgKibNOPDaEgmZ-tgAHUOmmY3qB2bNrmK76tBeCJCk8GzIhyGoehQA 1019 * Но это еще не работа. 1021 * Кто-нибудь идея, как решить эту проблему?

Чего я стараюсь избегать: используя дополнительный класс / HO C, потому что это сделает декоратор бессмысленным. Может быть, весь мой подход неверен. Чего я пытаюсь достичь: компонент должен обеспечивать различные реквизиты снаружи, которые он использует внутри.

...