Function in javascript file can't detect its own type with declaration file

Question

Is it possible for a file that has a corresponding declaration file to detect its own type in vscode?

Other files can get the typings, but not the file itself.

note the any

but this has proper typing

Reproduction

Create a folder
Run npm init
Hit enter through everything
Create 3 files index.js index.d.ts import.js

index.js

async function test(input) {
    return null
}

index.d.ts

type input_type = {
    name: string,
    salary: number
}

export function test(input : input_type) : Promise<null>

import.js

import * as t from './index'

t.test()

When you mouse over the test function in index.js it doesn't know its parameter type. But in import.js it knows it.

How can I get the index.js test function to know its own type.

This typescript issue seems to be exactly about your problem: github.com/Microsoft/TypeScript/issues/14342. (With the resolution seeming to be essentially what TUTAMKHAMON mentioned in their answer.) — mihi
– mihi, Commented Apr 26, 2021 at 20:51

TUTAMKHAMON · Accepted Answer · 2021-04-21 16:16:30Z

9

+100

From what I understand, VSCode won't be able to infer the type since that type doesn't exist in the scope of index.js. However, it is imported into import.js.

The only workaround I can think of would be to help VSCode infer the type by using JSDoc, and even then we have to import the type:

/**
 * @typedef {import(".").input_type} input_type
 * @param {input_type} input 
 */
async function test(input) {
    return null
}

Shown working:

edited Apr 21, 2021 at 16:16

answered Apr 21, 2021 at 16:02

TUTAMKHAMON

6204 silver badges9 bronze badges

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

3 Comments

divillysausages Over a year ago

To get it to work, I think you'd straight up need to using typescript (index.ts). You're already halfway there with the declaration file, and as an added bonus, you don't need to keep 2 separate files up to date

A. L Over a year ago

@divillysausages typescript still needs plugins and addons and some packages still don't play nice with typescript. It's nice, but I find that it's sometimes more limiting and annoying than helpful. But that's partially because I'm not as familiar with it.

divillysausages Over a year ago

@A.L yeah, the setup can be a pain at times, but it's definitely worth it, especially for a project of any size. Manually writing d.ts files can't be easy :D

Andrei Chernikov · Accepted Answer · 2021-04-28 01:57:16Z

The answer by TUTAMKHAMON should work without import if you want to just see the type name on hover. You won't be able to CTRL+click to go to the type in the declaration file, though. In this case, you should specify something like this:

/**
 * @typedef {{anything:any}} input_type
 * @param {input_type} input 
 */
async function test(input) {
    return null
}

There are several ways if you want to see the actual contents of the object and not just type name. You can provide a complete object breakdown inside the curly brackets:

/**
 * @param {{name:string,salary:number}} input 
 */
async function test(input) {
    return null
}

It has a disadvantage though, you would need to specify this structure in multiple places.

An alternative way of doing this:

/**
 * @param {object} input 
 * @param {string} input.name
 * @param {number} input.salary
 */
async function test(input) {
    return null
}

You can also make use of the parameters destructuring feature:

/**
 * @param {object} input 
 * @param {string} input.name
 * @param {number} input.salary
 */
async function test({ name, salary }) {
    return null
}

If this is a normal javascript type, you can just specify it directly inside the curly brackets:

You might be wondering what this weird syntax is. This is jsdoc syntax, this is not typescript, although it has some overlap in syntax. You can learn more about jsdoc here: https://jsdoc.app/about-getting-started.html

EDIT

You can also specify return types like this:

/**
 * @param {object} input 
 * @param {string} input.name
 * @param {number} input.salary
 * @returns {Promise<string>}
 */
async function test(input) {
    return `The salary of ${input.name} is ${input.salary}`
}

async function foo() {
    const bar = await test({ name: "A", salary: 1000 })
}

Collectives™ on Stack Overflow

Function in javascript file can't detect its own type with declaration file

Reproduction

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Reproduction

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related