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? Whyundefined
? Why is more likely that someone would actively passundefined
specifically to a default argument than any other type? Why notboolean | 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))