How to get VSCode intellisense on module methods in a React/TypeScript app?

Question

I converted a Node/JavaScript website to React/TypeScript (create-react-app).

I have a module of string helpers that I want to be able to access from any component.

In Node/JavaScript, the file was qtools/qstr.js and looked like this:

exports.capitalizeFirstLetter = function (line) {
    return line.charAt(0).toUpperCase() + line.slice(1);
}
    
exports.replaceAll = function (text, search, replace) {
    return text.split(search).join(replace);
}

I was able to reference it from any file like this:

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

And in VSCode intellisense worked nicely like this:

In my React/TypeScript website, to get this helper module to work, I had to restructure it like this:

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

And I am able to reference it with ES6 syntax:

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

as well as the CommonJS syntax like this:

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

and I can use my helper methods like this:

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

but I no longer have intellisense in VSCode after I type qstr.

How do I need to restructure this helper module in React/TypeScript so that I get intellisense on these methods in VSCode again?

ADDENDUM:

Dauren's answer below solved the above problem, but has the disadvantage that you have to export every function explicity at the bottom of the file. I found this improved syntax which enables you to export any number of functions without having to specify each one again at the end. However, not that you apparently can't use the arrow syntax anymore:

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

And then you reference this module with:

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

Intellisense works.

SECOND ADDENDUM:

It turns out that arrow functions work as well, with this syntax:

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

Dauren Akilbekov Dauren Akilbekov · Accepted Answer · 2020-08-21T07:17:06

Probably something like this:

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

How to get VSCode intellisense on module methods in a React/TypeScript app?

ADDENDUM:

SECOND ADDENDUM:

1 Answers