React Typescript: отражение (перечисление свойств интерфейса)

#reactjs #typescript #reflection #abstract-syntax-tree #react-typescript

Вопрос:

я пишу редактор на основе узлов для нейронных сетей, который (в настоящее время) использует tensorflow.js для создания самих сетей. Tensorflow.js имеет API слоев с различными фабричными функциями, каждая из которых имеет интерфейс для своих аргументов. Например.

 interface DenseLayerArgs {
    units: number, 
    useBias?: boolean, 
    ...
}
const dense(args: DenseLayerArgs): {
...
}
 

Моя цель — автоматически загрузить все эти заводские функции и создать меню для каждого, основанное на интерфейсе Args. Поскольку невозможно получить доступ к свойствам, которые могут быть неопределенными в простых TS, решением, по-видимому, является какая-то библиотека transformer (например. https://www.npmjs.com/package/ts-reflection ). Но я не смог запустить какой-либо пользовательский преобразователь с моим create-react-app с настройкой typescript.

Кто-нибудь смог заставить React работать с пользовательскими преобразователями или имеет какое-либо другое решение для создания меню из интерфейса?

приветствия

Ответ №1:

Я рекомендую tst-reflect для отражения TypeScript.

В README есть раздел, как начать. Вы должны использовать, например. ttypescript чтобы заставить трансформаторы работать. TypeScript не поддерживает готовые трансформаторы, только путем прямых вызовов их API компилятора. ttypescript это своего рода обертка, которая позволяет вам определять трансформаторы в tsconfig.

Копия того, как начать:

  1. Установите пакеты.
 npm i tst-reflect amp;amp; npm i tst-reflect-transformer -D
 
  1. Для использования плагина transformer вам нужен компилятор TypeScript, который поддерживает плагины, например. упакуйте ttypescript или вы можете использовать API компилятора TypeScript вручную.
 npm i ttypescript -D
 
  1. Добавить преобразователь в tsconfig.json
 {
    "compilerOptions": {
        // your options...

        // ADD THIS!
        "plugins": [
            {
                "transform": "tst-reflect-transformer"
            }
        ]
    }
}
 
  1. Теперь просто транспилируйте свой код с помощью ttsc вместо tsc
 npx ttsc
 

И использование с Webpack:

Измените конфигурацию вашего webpack. Использование options.compiler ts-loader для установки ttypescript компилятора.

 ({
    test: /.(ts|tsx)$/,
    loader: require.resolve("ts-loader"),
    options: {
        compiler: "ttypescript"
    }
})
 

И как перечислить свойства интерфейса с tst-reflect помощью?

 import { getType, Property} from "tst-reflect";

interface DenseLayerArgs {
    units: number, 
    useBias?: boolean, 
    // ...
}

const properties: Array<Property> = getType<DenseLayerArgs>().getProperties();
// Do something with properties...
 

Property является:

 interface Property
{
    /**
     * Property name
     */
    readonly name: string;
    /**
     * Property type
     */
    readonly type: Type;
    /**
     * Optional property
     */
    readonly optional: boolean;
    /**
     * Access modifier
     */
    readonly accessModifier: AccessModifier;
    /**
     * Accessor
     */
    readonly accessor: Accessor;
    /**
     * Readonly
     */
    readonly readonly: boolean;
    /**
     * Returns array of decorators
     */
    getDecorators(): ReadonlyArray<Decorator>;
}