如何让TypeScript识别JS文件的d.ts类型及实现React组件类型提示？

首先得提个小细节——你当前的b.d.ts里函数名写成了fnc，但实际b.js导出的是func，这会导致TypeScript没法正确关联类型。先把这个小错误修正，再按下面的步骤操作：

1. 修正并完善b.d.ts的内容
   要让TS把声明文件和b.js绑定起来，有两种简洁的写法：

   • 方式一：显式声明模块路径

     // b.d.ts
     declare module './b.js' {
       export function func(arg: string): boolean;
     }
     

   • 方式二：如果声明文件和b.js在同一目录，直接导出类型（TS会自动关联同目录的JS文件）

     // b.d.ts
     export function func(arg: string): boolean;
     

2. 确保TS能识别到声明文件

   • 如果你项目里有tsconfig.json，检查include数组是否包含了这个文件所在的目录（默认create-react-app的include是["src/**/*"]，只要文件在src下就没问题）；
   • 没有tsconfig的话，TS也会自动扫描同一目录下的.d.ts文件，不用额外配置。

修改完成后，你在a.js里引入b.js时，TS就会自动应用b.d.ts的类型定义——调用moduleb.func时会校验参数是否为string，同时能识别返回值是boolean类型。

Create React App对TS的支持已经很成熟了，不管你是TS项目还是JS项目，都能轻松实现Props智能提示，分两种情况说明：

如果你用TypeScript编写组件（.tsx文件） #

直接在组件文件里定义Props类型，配合React的内置类型即可：

import React from 'react';

// 先定义组件的Props类型
type CardProps = {
  title: string;
  content: string;
  onClose?: () => void; // 可选属性标记
};

// 用React.FC泛型传入Props类型，编辑器会自动提供智能提示
const Card: React.FC<CardProps> = ({ title, content, onClose }) => {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
      {onClose && <button onClick={onClose}>Close</button>}
    </div>
  );
};

export default Card;

当你在其他地方使用Card组件时，输入props就能看到对应的提示，TS还会自动校验属性类型和必填项。

如果是类组件，同样可以通过泛型指定Props和State类型：

import React, { Component } from 'react';

type CounterProps = {
  initialValue: number;
};

type CounterState = {
  currentValue: number;
};

class Counter extends Component<CounterProps, CounterState> {
  state = { currentValue: this.props.initialValue };

  render() {
    return <div>Current: {this.state.currentValue}</div>;
  }
}

如果你的项目是JavaScript（.jsx文件） #

给组件创建对应的.d.ts声明文件，放在同一目录下即可：
比如你有一个Button.jsx组件，创建Button.d.ts：

// Button.d.ts
import React from 'react';

// 定义Props类型
export type ButtonProps = {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary'; // 限定可选值范围
};

// 声明组件的类型
declare const Button: React.FC<ButtonProps>;

export default Button;

这样VS Code等编辑器会自动识别这个声明文件，使用Button组件时就能获得Props的智能提示，同时也能做基本的类型校验。

内容的提问来源于stack exchange，提问作者Aminadav Glickshtein