Typescript thinks that an object parameter in a function is a string

Question

A bit of context first. The following code was previously written in javascript and is slowly being migrated to typescript. Changes cannot be made to the checkRecordsExists function that require typescript as the file needs to remain in JS to avoid it breaking everything else that we use it in.

I've got the following function (express middleware) written in a js file:

module.exports.checkRecordsExists = (Model, { idName = 'id', paramLocation = 'path', optional = false, checkSource = true, additionalChecks, idDbField = 'id' } = {}) => { 
    ...
};

and according to VSCode the functions object parameter which should fall back to an empty object are of type string

(alias) checkRecordsExists(Model: object, { idName, paramLocation, optional, checkSource, additionalChecks, idDbField }?: string): (req: any, res: any, next: any) => Promise

This is causing the typescript compiler to complain when I try to call it like so in a ts file:

checkRecordsExists(dbService.CustomPage, { checkSource: false })

with the following error message:

Argument of type '{ checkSource: boolean; }' is not assignable to parameter of type 'string'. ts(2345)

Any ideas on how to fix this weird error without using //@ts-ignore?

how do you import module that declare checkRecordsExists function ? — jeremy-denis
– jeremy-denis, Commented Jun 14, 2022 at 11:50
FYI you don't need to keep a file in Javascript to also use it in Javascript files, see Migrating from Javascript in the Typescript docs. — Etheryte
– Etheryte, Commented Jun 14, 2022 at 11:53
@jeremy-denis importing it using import { checkRecordsExists } from '../../middleware/auth'; — Joel Adams
– Joel Adams, Commented Jun 14, 2022 at 11:58
@Etheryte ah sorry should've specified that the file that uses checkRecordExists is in Typescript but thanks for linking the documentation anyways :). Will update the post — Joel Adams
– Joel Adams, Commented Jun 14, 2022 at 11:58
Why don't you update checkRecordExists to have the correct types? — Keith
– Keith, Commented Jun 14, 2022 at 12:00

Keith · Accepted Answer · 2022-06-14 12:48:42Z

1

Knocking up a declaration file for existing JS files is not as hard as it seems. I must admit when first using Typescript it wasn't obvious how I could mix TS & JS together, so I though I'd knock up a very very simple example..

Ok, let's start.

Lets assume we have a very simple hello function inside a file called test.js

export function hello(a) {
  console.log(`hello ${a}`)
}

Now lets assume we always want parameter a to be a string, and for it not to return anything void.

all we have to do is create a file called test.d.ts in the same directory, the declaration would then be as simple as.

declare namespace JS {
  function hello(a:string):void;
}

export = JS;

And now when we import test into another TS file, you will get this->

import {test} from "./test"

hello('there'); /*this is fine*/
hello(123); /*Argument of type 'number' is not assignable to parameter of type 'string'.*/

Without the .d.ts file the type for hello would be function hello(a:any):void..

Another option, if you was allowed to change the JS file, but were not allowed to convert to Typescript,. Typescript can use JSDoc syntax. So doing the following would have the same effect.

/** @type {function(string):void} console logs hello + param*/
export function hello(a) {
  console.log(`hello ${a}`)
}

edited Jun 14, 2022 at 12:48

answered Jun 14, 2022 at 12:28

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel Adams Over a year ago

Is there any way to more this types file to another directory for consistency? I've currently got a directory called @types with a index.d.ts file for some things required in express that I use. I've already specified in the tsconfig to point to that folder

Keith Over a year ago

@JoelAdams The problem would be module resolution, I think it might be possible with some tsconfig settings, but it's not something I've ever wanted to do. For me having the types next to what your typing for is way simpler, there is no tsconfig settings you need to change etc, so makes the code much easier to share / port. I wish all 3rd party libs did it this way too, having to do thing like npm install @types/react, always feels clunky too me. ps. react module resolution works here, as there is a direct mapping from @types/react to react..

Collectives™ on Stack Overflow

Typescript thinks that an object parameter in a function is a string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related