简体   繁体   中英

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM