如何在JavaScript文件中配置类型以获取自动建议？

Question

在Javascript文件中获取自动建议（带有类型）应该配置什么？换句话说，给定一个用JS编写的组件，如何获得其道具的自动建议（这是可能的，请阅读所有问题）。我正在尝试获取简单按钮组件的自动建议（以获取“红色”或“蓝色”的建议），类似于MUI中的组件。// Would like the IDE so suggest "red" or "blue" on changing color propconst App = () => {  return <Button color="red" />;};// Button.jsimport React from "react";const Button = ({ color }) => <button style={{ color }}>Button</button>;export default Button;// ButtonTypes.d.tsexport interface Button {  color: "red" | "blue";}

Answer 1

在此处查看更改。

// Button.d.ts

import * as React from "react";

declare const Button: React.FC<{

  color: "red" | "blue";

}>;

export default Button;

// App.js

const App = () => {

  return (

    <>

      {/* Auto-suggests "red" and "blue" */}

      <Button color="red" />

    </>

  );

};

您需要使用与 相同的名称来命名该文件。此外，您需要声明，而不仅仅是道具。.d.ts.jsButton

Answer 2

在JSDoc中使用类型脚本有另一种选择，它允许在javascript文件中出现语义错误：

// App.js

// @ts-check

const App = () => {

  return (

    <>

      <Button color="red" />

      {/* Shows a WARNING! */}

      <Button color={null} />

    </>

  );

};

// types.ts

import type { CSSProperties, FunctionComponent } from "react";

export type ButtonComponent = FunctionComponent<{color: CSSProperties["color"]}>;

// Button.js

import React from "react";

/**

 * @type {import("./types").ButtonComponent}

 */

const Button = ({ color }) => <button style={{ color }}>Button</button>;

export default Button;