Home > database >  Can I disable TypeScript Inference for imported JS Modules? (Or config it to always infer type: any)
Can I disable TypeScript Inference for imported JS Modules? (Or config it to always infer type: any)

Time:04-20

I'm trying to use a JS module in a TypeScript File. But, because the JS module does not have any type declarations I'm unable to use the JS module because of TypeScript errors

The problem happens because of a default argument in the JS imported function that TypeScript infers as being of one type when it is not.

I know the problem probably only exists because of stupid usage of the default argument, and of a badly written function. But I cannot edit the JS module to correct it.

The real problem is with a React Component that has a prop that defaults to false (const El = ({prop1, prop2 = false})=>{...}) but could also receive a number. Then, when calling the component in the TS file, and when setting that prop to a number (<El prop1={1} prop2={3}/>), TypeScript complains with "Argument of type 'number' is not assignable to parameter of type 'boolean | undefined'."

To simplify, here is an equivalent non-React example:

So, let's imagine one has a TypeScript project with "allowJS": true set so a JS module can be imported.

//externalModule.js 
//Can't edit this file
export const addOneOrMore = (a, b = false) => { 
  if(b == false)
    return a   1
  else
    return a   b
}

//typescriptFile.ts
import addOneOrMore from "./externalModule.js"

let one: number = 1
let three: number = 3

console.log(addOneOrMore(one,three)) // TS Error: "Argument of type 'number' is not assignable to parameter of type 'boolean | undefined'."

I know that what is happening is that the TS Compiler is inferring that, because the argument defaults to false, it is of the type boolean.. And because of that, I can't pass a number to it.

I think that in this case it doesn't make a lot of sense to infer that (at least for imported JS modules without type declarations)

So, my questions are:

  • Can I set TSConfig or TypeScript in any way so it overrides the JS inferring always with : any?
  • Does it make sense to infer boolean | undefined is that case? Why undefined? Why is more likely that someone would actively pass undefined specifically to a default argument than any other type? Why not boolean | null or anything else?
  • Is there any other way that allows me to use that module in a TS file?

Thanks a lot!

CodePudding user response:

The JS module does not have any type declarations. […] But I cannot edit the JS module to correct it. […] Is there any other way that allows me to use that module in a TS file?

Yes, there is: you can use a declaration file! Just create externalModule.d.ts file, put the proper type declarations in it, and you can use the library as-is.

CodePudding user response:

In TypeScript 3.7, type checking will be disabled on a file if it starts with the following comment:

// @ts-nocheck

As already mentioned, in previous versions you can disable checking on a single line by including the following comment on the previous line:

// @ts-ignore

In your case, you can try this:

//typescriptFile.ts
import addOneOrMore from "./externalModule.js"

let one: number = 1
let three: number = 3

// @ts-ignore
console.log(addOneOrMore(one,three))
  • Related