如何在 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后，VSCode 中不再有智能感知。

我需要如何在 React/TypeScript 中重構這個幫助模塊，以便我再次在 VSCode 中獲得對這些方法的智能感知？

附錄：

Dauren 在下面的回答解決了上述問題，但缺點是您必須在文件底部顯式導出每個 function。 我發現這種改進的語法使您能夠導出任意數量的函數，而不必在最后再次指定每個函數。 但是，並不是說您顯然不能再使用箭頭語法了：

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

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