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

Question

我将一个 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.

我需要如何在 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);
};

标签： reactjstypescriptvisual-studio-code

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