如何在 React/TypeScript 应用程序中的模块方法上获取 VSCode 智能感知？

Posted 2023-02-22

【中文标题】如何在 React/TypeScript 应用程序中的模块方法上获取 VSCode 智能感知？

【英文标题】：How to get VSCode intellisense on module methods in a React/TypeScript app?

【发布时间】：2020-12-10 12:01:09

【问题描述】：

我将一个 Node/javascript 网站转换为 React/TypeScript (create-react-app)。

我有一个字符串助手模块，我希望能够从任何组件访问它。

在 Node/JavaScript 中，文件为 qtools/qstr.js，如下所示：

exports.capitalizeFirstLetter = function (line) 
    return line.charAt(0).toUpperCase() + line.slice(1);

    
exports.replaceAll = function (text, search, replace) 
    return text.split(search).join(replace);

我可以从这样的任何文件中引用它：

const qstr = require('../qtools/qstr');

在 VSCode 中，智能感知就像这样工作得很好：

在我的 React/TypeScript 网站中，为了让这个帮助模块工作，我必须像这样重组它：

export const qstr = require('../qtools/qstr');

qstr.capitalizeFirstLetter = (line: string) => 
    return line.charAt(0).toUpperCase() + line.slice(1);


qstr.replaceAll = (text: string, search: string, replace: string) => 
    return text.split(search).join(replace);
;

而且我可以用 ES6 语法来引用它：

import  qstr  from '../qtools/qstr';

以及像这样的 CommonJS 语法：

const qstr = require('../qtools/qstr');

我可以像这样使用我的辅助方法：

const extra: string = qstr.capitalizeFirstLetter('test');

但在我输入 qstr 后，VSCode 中不再有智能感知。

我需要如何在 React/TypeScript 中重构这个帮助模块，以便我再次在 VSCode 中获得对这些方法的智能感知？

附录：

Dauren 下面的回答解决了上述问题，但缺点是您必须在文件底部显式导出每个函数。我发现这种改进的语法使您能够导出任意数量的函数，而不必在最后再次指定每个函数。但是，并不是说您显然不能再使用箭头语法了：

export function capitalizeFirstLetter (line: string) 
    return line.charAt(0).toUpperCase() + line.slice(1);


export function replaceAll (text: string, search: string, replace: string) 
    return text.split(search).join(replace);
;

然后你引用这个模块：

import * as qstr from '../qtools/qstr';

智能感知有效。

第二个附录：

事实证明，箭头函数也可以使用，语法如下：

import * as qstr from '../qtools/qstr';

export const capitalizeFirstLetter = (line: string) => 
    return line.charAt(0).toUpperCase() + line.slice(1);


export const replaceAll = (text: string, search: string, replace: string) => 
    return text.split(search).join(replace);
;

【参考方案1】：

大概是这样的：

qstr.ts

const capitalizeFirstLetter = (line: string) => 
  return line.charAt(0).toUpperCase() + line.slice(1);
;

const replaceAll = (text: string, search: string, replace: string) => 
  return text.split(search).join(replace);
;

export default  capitalizeFirstLetter, replaceAll ;

【讨论】：

谢谢，这对我有用。但是请注意，此解决方案的缺点是您必须在文件底部显式导出每个函数。由于这个帮助模块实际上是一个不断增长的 50 多个函数的集合，因此我找到了另一个导出每个函数的解决方案，因此您不必在导出语句的末尾列出它们。我在上面的问题的附录下添加了。