React Typescript: Reflection(列出接口属性)

Question

我正在为神经网络编写一个基于节点的编辑器，(目前)使用tensorflow.js来创建网络本身。Tensorflow.js有一个带有不同工厂函数的分层api，每个工厂函数都有一个参数接口。例如

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

我的目标是自动加载所有这些工厂功能，并基于Args接口为每个功能创建一个菜单。由于无法访问在普通TS中未定义的属性，因此解决方案似乎是某种转换器库(例如。https://www.npmjs.com/package/ts-reflection)。但是我还没能让任何自定义的转换器在我的create-react-app中运行。

有没有人能够让React与自定义转换器一起工作，或者有一些其他的解决方案来从界面创建菜单?

欢呼

Answer 1

对于TypeScript的反射，我推荐使用test -reflect。

在README中，有一节如何开始。你必须使用。ttypescript使变压器工作。TypeScript不支持开箱即用的转换器，只能直接调用它们的编译器API。ttypescript是一种包装，允许您在tsconfig中定义变压器。

如何开始:

1. 安装包。

npm i tst-reflect && npm i tst-reflect-transformer -D

2. 为了使用transformer插件，你需要支持插件的TypeScript编译器。或者你可以手动使用TypeScript编译器API。

npm i ttypescript -D

3. 为tsconfig.json添加变压器

{
"compilerOptions": {
// your options...
// ADD THIS!
"plugins": [
{
"transform": "tst-reflect-transformer"
}
]
}
}

4. 现在只翻译你的代码ttsc而不是tsc

npx ttsc

和Webpack的用法:

修改webpack配置。使用ts-loader的options.compiler设置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...

Propertyis:

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>;
}