Ensuring javascript files are cognizant of their corresponding typescript definition files

Question

Ensuring javascript files are cognizant of their corresponding typescript definition files

You can utilize Typescript to create .d.ts definition files for your local javascript files. Consider the following file structure:

src/
  main.js
  imported.js
  imported.d.ts

main.js

import { func } from './imported';
console.log(func("1", "1"));

imported.js

export const func = (numVal, strVal) =>
  `The number is ${numVal}, the string is ${strVal}`;

imported.d.ts

export const func: (numVal: number, strVal: string) => string;

When using the noImplicitAny option, you may encounter errors like:

src/imported.js(1,22): error TS7006: Parameter 'numVal' implicitly has an 'any' type.
src/imported.js(1,30): error TS7006: Parameter 'strVal' implicitly has an 'any' type.
src/main.js(3,18): error TS2345: Argument of type '"1"' is not assignable to parameter of type 'number'.

The last error ensures type safety by preventing passing a string instead of a number as required. However, in the imported javascript file, the parameters' types are not recognized, hindering the use of noImplicitAny and potentially leading to errors when passing incorrect types.

Is there a way to enable javascript files to acknowledge their definitions in Typescript without altering the original javascript code?

javascript typescript .d.ts

Answer 1

Answer №1

While JavaScript files cannot automatically recognize their definition files, Typescript 2.3 introduced a feature to enable type checking using JSDoc comments.

Consider the following project structure:

src/
  main.js
  imported.js

imported.js

/**
 * @return {string} 
 * @param {number} numVal 
 * @param {string} strVal 
 */
export const func = (numVal, strVal) =>
  `The number is ${funcs.func3(numVal)}, the string is ${strVal}`;

main.js

import { func } from './imported';

/**
 * Works fine
 * @param {number} number 
 */
const mainFunc1 = (number) =>
  func(number, "Hello");      

/**
 * Argument of type 'string' is not assignable to parameter of type 'number'
 * @param {string} string 
 */
const mainFunc2 = (string) =>
  func(string, "Hello");

The TypeScript compiler now recognizes that numVal is a number and strVal is a string, preventing errors when passing incorrect types to functions. The @return in func may be redundant, but it promotes consistency in code documentation.

Although modifying original JavaScript code is necessary, only comments are used for type checking.

Limitations

While this approach doesn't provide all features of full TypeScript type checking, it covers most scenarios. For instance, when a module returns an object with typed keys:

/**
 * @param {number} num 
 */
const func1 = (num) => num * 2;

export default {
  func1,
}

When consuming this module:

import imported from './module';

imported.func1(3);    // No error
imported.func1("3");  // Error
imported.func2(3);    // No error, should be flagged

In JavaScript files, missing types for default exports can lead to undetected issues like calling undefined properties. In contrast, TypeScript would accurately point out such problems without explicit type declarations.

Typescript 2.5

Version 2.5 also introduced support for type assertion using JSDoc comments, as shown here:

// Argument of type 'string | number' is not assignable to parameter of type 'number'.
const func1 = () =>
  func(funcReturnsNumberOrString(true), "Hi");

// Fine
const func2 = () =>
  func(/** @type {number} */ (funcReturnsNumberOrString(true)), "Hi");

/**
 * @returns { number | string }
 * @param {boolean} bool
 */
const funcReturnsNumberOrString = (bool) =>
  bool ? 2 : "2";

In this case, by applying JSDoc annotations correctly, TypeScript can infer and enforce types more effectively.

Answer 2

While JavaScript files cannot automatically recognize their definition files, Typescript 2.3 introduced a feature to enable type checking using JSDoc comments.

Consider the following project structure:

src/
  main.js
  imported.js

imported.js

/**
 * @return {string} 
 * @param {number} numVal 
 * @param {string} strVal 
 */
export const func = (numVal, strVal) =>
  `The number is ${funcs.func3(numVal)}, the string is ${strVal}`;

main.js

import { func } from './imported';

/**
 * Works fine
 * @param {number} number 
 */
const mainFunc1 = (number) =>
  func(number, "Hello");      

/**
 * Argument of type 'string' is not assignable to parameter of type 'number'
 * @param {string} string 
 */
const mainFunc2 = (string) =>
  func(string, "Hello");

The TypeScript compiler now recognizes that numVal is a number and strVal is a string, preventing errors when passing incorrect types to functions. The @return in func may be redundant, but it promotes consistency in code documentation.

Although modifying original JavaScript code is necessary, only comments are used for type checking.

Limitations

While this approach doesn't provide all features of full TypeScript type checking, it covers most scenarios. For instance, when a module returns an object with typed keys:

/**
 * @param {number} num 
 */
const func1 = (num) => num * 2;

export default {
  func1,
}

When consuming this module:

import imported from './module';

imported.func1(3);    // No error
imported.func1("3");  // Error
imported.func2(3);    // No error, should be flagged

In JavaScript files, missing types for default exports can lead to undetected issues like calling undefined properties. In contrast, TypeScript would accurately point out such problems without explicit type declarations.

Typescript 2.5

Version 2.5 also introduced support for type assertion using JSDoc comments, as shown here:

// Argument of type 'string | number' is not assignable to parameter of type 'number'.
const func1 = () =>
  func(funcReturnsNumberOrString(true), "Hi");

// Fine
const func2 = () =>
  func(/** @type {number} */ (funcReturnsNumberOrString(true)), "Hi");

/**
 * @returns { number | string }
 * @param {boolean} bool
 */
const funcReturnsNumberOrString = (bool) =>
  bool ? 2 : "2";

In this case, by applying JSDoc annotations correctly, TypeScript can infer and enforce types more effectively.

Ensuring javascript files are cognizant of their corresponding typescript definition files

Answer №1

Limitations

Typescript 2.5

Similar questions

Javascript SVG object reference

Retrieve the header tag from API using Nuxt

Exploring the Interplay of Classic ASP and AJAX Variables References

How can JavaScript be effectively reused across two JSP pages for improved efficiency?

Exploring the features of useEffect and setState in hook functions

Pause for a brief moment before proceeding to the next task within the map

Converting an array of arrays into an object with an index signature: A step-by-step guide

Ways to prevent a single element from being included in the selection of the entire

Assigning a prop value in Vue using JavaScript

Ensure form input security by implementing jQuery validation with reCAPTCHA

Saga Redux fails to pass parameters during post requests

When attempting to access an object within an array in JavaScript, an error is thrown stating: "TypeError: Cannot read property 'data' of undefined."

What is the best way to extract the text between the @ symbol and the next space using JavaScript or React?

Issue with useEffect function not loading correctly in Gatsby production environment

Guide to generating external source maps for using the Chrome debugger in Vscode with Typescript and Gulp for web development

Is it possible to simultaneously toggle buttons and submit a form?

Preventing page reload by using event.preventDefault() does not work with Ajax Form

Executing jQuery script on dynamically loaded content

The form post request cannot recognize the undefined variable

Using Jquery to detect changes in a Datalist element in an HTML5 document