Typescript 操作创建者文档注释未显示

Typescript 操作创建者文档注释未显示,typescript,redux,redux-toolkit,Typescript,Redux,Redux Toolkit,正在考虑在我们的应用程序中使用redux工具包,但我似乎无法获得我们的行动创建者可以展示的文档评论 旧代码: const ADD_NAME = 'ADD_NAME'; /** * Sets the name for the user in our state. * @param name The updated name */ export function addName(name: string) { return { payload: name, type:

正在考虑在我们的应用程序中使用redux工具包,但我似乎无法获得我们的行动创建者可以展示的文档评论

旧代码:

const ADD_NAME = 'ADD_NAME';
/**
 * Sets the name for the user in our state.
 * @param name The updated name
 */
export function addName(name: string) {
   return {
     payload: name,
     type: ADD_NAME,
   };
}
在VSCode中,每当我分派
addName()
,将鼠标悬停在函数上方时,都会显示工具提示,其中包含预期的文档

使用redux toolkit重新创建此操作创建者:

/**
 * Sets the name for the user in our state.
 * @param name The updated name of the User
 */
export const addName = createAction<string>(ADD_NAME);
/**
*设置处于我们状态的用户的名称。
*@param name用户的更新名称
*/
export const addName=createAction(添加名称);
当我在分派期间将鼠标悬停在这个新的
addName
上,而不是看到我编写的文档时:

为我们所在州的用户设置名称。

我看到:

使用参数调用此{@link redux#ActionCreator}将返回类型为T的{@link PayloadAction},有效负载为p

这是redux toolkit typings文件中的
ActionCreatorWithPayload
的内部文档

显示为我的
addName
操作创建者添加的文档注释,而不是redux toolkit文档注释,我缺少什么


我意识到一个是我对函数的注释,另一个是对常量变量的注释,但是我希望我对
addName
const的注释会显示为工具提示,不是吗?

这是一个非常好的问题。这似乎取决于编辑器以及访问文档的上下文

在VSCode中,首先看起来是这样的:

当您只写
addName
时,直到它完成,您将从变量
addName
获得docblock。编写
)后,它会“查看”变量值,识别函数并从函数本身获取docblock,这就是动作创建者

我不认为你真的可以超越这种行为任何进一步,但我希望看到有人想出一个好办法


我做了更多的实验:虽然TypeScript确实会丢失大多数映射函数类型的注释,但您可以使用一个对象参数而不是位置参数,并使用docblocks注释各个属性。鉴于TypeScript目前提供的功能,这可能会为您提供尽可能多的信息(当然,自动完成“参数名”):


这肯定会让开发人员的体验变得不那么直观。我们有一群操作创建者,他们使用多个参数。当你调用调度解释每个参数及其用途时,工具提示中的文档就在那里。我知道你可以使用这些“准备”RTK中的函数处理具有多个参数的动作创建者,我们很可能必须将文档移动到该助手函数。但是,它仍然使我们的代码库使用起来不那么直观——即使它最终是更干净/更少的样板文件。是的,不幸的是TSServer的工作原理差不多——没有太多的工作要做我添加了一个选项来传递至少一点信息。是的,我认为prepare函数方式可能是最好的选择,尽管它仍然需要更多的输入。超级令人沮丧!感谢你对它的关注。我的意思是,我在这里的示例中使用了prepare函数,但我认为你可以只键入
PayloadAction的有效负载完全相同的方式。

const slice = createSlice({
  name: 'test',
  initialState: 0,
  reducers: {
    test: {
      prepare({name, age}: {
        /** The name! */
        name: string,
        /** The age! */
        age: number
      }
      ) {
        return { payload: { name, age } };
      },
      reducer(x, action: any) { }
    }
  }
})

// hovering over age or name will give you more info
slice.actions.test({ age: 5, name: "" })