IntelliSense allows to specify type information explicitly via JSDoc annotations for cases where type inference doesn’t provide the desired type information, e.g. for complex objects.
The following example reflects a configuration for gsoft-inc/craco, a tool that allows overriding/customizing Create React App’s Webpack configuration.
The configuration of this tool is done using a file called craco.config.js, so a plain JavaScript file. As we can see, the IntelliSense suggestions when customizing the Webpack configuration object in there are rather not helpful. Thus it’d be great to have the proper typing of allowed Webpack configuration properties.
To do so, we can make use of the JSDoc tag @type to give a specific type to a partially declared object as shown in the following example.
Here, Configuration is a named export of the webpack package/typing, so any exported typing of both packages and local files can be imported. In general, @type can be used both for function/method parameters (i.e. inline) as well as variable declarations (i.e. prepended).
configure: (/** @type import('webpack').Configuration */ webpackConfig) => {
// `webpackConfig` now has proper IntelliSense suggestions
}
/** @type import('webpack').Configuration */
const webpackConfig = {
// Proper IntelliSense suggestions in here
};
As this is based on JSDoc annotations, it’d also be possible to create types via @typedef and @property annotations in comments in JavaScript files without ever having to touch TypeScript. However, if you need to have type annotations, it makes much more sense to create those typings directly within TypeScript in order to not only have the types for documentation and IntelliSense but also for compilation.
