JSDoc Typescript Checking of Named Default Params

Question

Given the following

/**
 * @param {{bar?: string|null}} [param0]
 */
const foo = ({bar = null} = {}) => bar;

Typescript 3.7.2 reports

var bar: string | null Binding element 'bar' implicitly has an 'any' type.ts(7031)

The JavaScript code works how I want it to, but how can I write the jsdoc hint so that TypeScript understands that the destructured bar variable is string|null not any ?

Answer 1

Update with correct answer

The problem found is actually your tsconfig and how the JavaScript type checking works with it. The option that is causing the difference between your config and mine is the strict property. According to the config documentation :

Enabling --strict enables --noImplicitAny , --noImplicitThis , --alwaysStrict , --strictBindCallApply , --strictNullChecks , --strictFunctionTypes and --strictPropertyInitialization .

Adding each of those options to my tsconfig , I discovered that disabling two of those options would get rid of the reported error. Those options are:

• --strictNullChecks
• --strictPropertyInitialization (because it can't be enabled without the --strictNullChecks option)

When I disabled those two, it was finally happy with the result.

I copied the example into a TypeScript file to see if it had a similar problem. The TypeScript version reported no errors with the same exact type signature, but the JavaScript version was ignoring the JSDoc altogether. However, looking at the rest of the code, it still was registering the bar variable as being of type string|null .

Coming to this conclusion, it is likely a bug in the JavaScript type checking and how it works with those options despite neither of those options seemingly being related to this case.

EDIT:

I've checked and it looks like there is a bug already logged for this on the TypeScript repo:

https://github.com/microsoft/TypeScript/issues/31372

Previous solution (which didn't work)

You should be able to do this easily. Maybe remove the square brackets from the param name in the jsdoc comment. This example works fine:

/**
 * @param {{bar?: number|null}} _
 */
const foo = ({ bar = null } = {}) => {
    // do stuff with bar
}

The tsconfig that I have looks like this:

{
    "compilerOptions": {
        "checkJs": true,
        "allowJs": true,
        "outDir": "node_modules/.tmp/",
        "noImplicitAny": true
    },
    "include": [
        "index.js"
    ]
}

Here is the repo that has this code you can use to check on your side, too: https://github.com/cwadrupldijjit/js-typescript-checking

The version of TypeScript that this was tested in is 3.7.2

EDIT: Checked out the square brackets vs non-square brackets and it looks like it doesn't matter. TSC is fine with it either way.