Home > OS >  Typescript thinks that an object parameter in a function is a string
Typescript thinks that an object parameter in a function is a string

Time:06-14

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?

CodePudding user response:

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}`)
}
  • Related