Compact type annotation syntax that converts to JSDOC AST

[ftaiolivista]

Suggestion

🔍 Search Terms

jsdoc

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

I regularly use Typescript to check my vanilla JS with the help of JSDOC blocks.

But I find JDOC syntax, especially when grows in complexity, very bloated. If you extensively use it, easy that JSDoc rows outnumber by 2x ore more code rows.

My suggestion is implement in TS parser a convention to annotate types in a more compact way

📃 Motivating Example

Even for simple cases like this:

/**
 * @type {string}
 */
var s;
 
/** @type {Window} */
var win;
 
/** @type {PromiseLike<string>} */
var promisedString;
 
/** @type {HTMLElement} */
var myElement = document.querySelector(selector);
element.dataset.myData = "";

/**
 * And arrow function expressions
 * @param {number} x - A multiplier
 */
let myArrow = (x) => x * x;

/** @type {(s: string, b: boolean) => number} TypeScript syntax */
var sbn2;

I think a more compact and efficient sintax can help to make the code more readeable, something like this:

//: string
var s;
 
//: Window
var win;
 
//: PromiseLike<string>
var promisedString;
 
//: number => number
let myArrow = (x) => x * x;

//: (string, boolean) => number
var sbn2;

One can take the convention that the shortcut "::" (for example) means @type ....

One other nice to have would be the possibility to directly embed d.ts code block in the .js file. I think this would be better than have complex JSDoc blocks like @typedef or @extends.

/*::
    export type ArrayMetadata<ArrType> = {
        length: number;
        firstObject: ArrType | undefined;
    };
    export function getArrayMetadata<ArrType>(
        arr: ArrType[]
    ): ArrayMet
*/

This could be implemented in Typescript parser. The new compact definition blocks could be parsed and automatically transformed to the corrispondend JSDOC AST.

💻 Use Cases

Write better readeble JS type hints and declaration
do not have separate d.ts for JS

P.S. interesting discussion for JS proposal

[MartinJohns]

IMO it's a duplicate of #9694. Just a different syntax.

[andrewbranch]

Also, at this point, the solution we’re pursuing is bringing type annotations to JS. We’d like to avoid inventing a brand new bespoke comment syntax while that proposal is alive.

[ftaiolivista]

Also, at this point, the solution we’re pursuing is bringing type annotations to JS. We’d like to avoid inventing a brand new bespoke comment syntax while that proposal is alive.

Personally I don't like the proposal. The TS like inline syntax make the codebase less clear to me. I'm more for keep type hints apart form code. But probably it's only my preference

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.