The synergy between JSDoc and type mapping

I am in search of a comprehensive and reliable source that provides detailed information on how TypeScript's JSDoc interacts with types, their mappings, and modifications.

It is widely known that Pick and Omit maintain the original JSDoc:

const any: any = {};
type A = {
    /** FOO */ foo: 1,
    /** BAR */ bar: 2
}
let A: A = any;
A.foo
// ^# FOO
let A2: Pick<A, 'foo'> = any;
A2.foo
// ^# FOO
let A3: Omit<A, 'bar'> = any;
A3.foo
// ^# FOO

A more complex scenario involves mapped types retaining the JSDoc:

type B = { [K in keyof A]: false }
let B: B = any;
B.foo
// ^# FOO

Hence, I am seeking a thorough list of strategies for manipulating JSDoc and understanding how JSDoc functions within TypeScript. This includes techniques beyond those mentioned above.

Specifically, but not limited to:

  • Is it feasible to change { /** foo */ a: 1 } to { /** foo */ b: 1 }?
  • Can JSDoc be added using a wrapper like
    function addJsdoc<T, ?>(fnWithoutJsdoc: T): <?<T>>
    ?

For more information, refer to:

(Github)/TypeScript Feature Request: Documented Utility Type #41165 

Answer №1

When working with Typescript, it tries to maintain annotations for the same key but discards them in all other scenarios, leaving little control in your hands.


I initially thought that key remapping could solve this issue, however, even in a straightforward scenario, the annotations get discarded.

This example demonstrates the retention of annotations:

type B = { [K in keyof A]: false }
declare const B: B;
B.foo // # FOO

On the contrary, this instance showcases the loss of annotations:

type B = { [K in keyof A as `${K}`]: false }
declare const B: B;
B.foo // no annotation

In this case, K is transformed into ${K}, which should technically result in the same outcome for string properties. However, due to not directly utilizing K, the annotations break.


Typescript lacks APIs to access and manage these types of annotations. It simply carries them forward in basic cases where possible.

Unfortunately, the answers to your queries are as follows:

Can you convert { /** foo */ a: 1 } to { /** foo */ b: 1 }` ?

No.

Is it feasible to incorporate JSDoc with a function

addJsdoc<T, ?>(fnWithoutJsdoc: T): <?<T>>
wrapper?

No.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

New feature in Next.js 13: Utilizing a string within className

Looking for a way to dynamically generate radio buttons in Next.js using a list of strings? Utilizing Tailwind CSS classes, you can modify the appearance of these buttons when checked by leveraging the peer/identifier classname. But how do you include th ...

Ensure that missing types are included in a union type following a boolean evaluation

When working with typescript, the following code will be typed correctly: let v: number | null | undefined; if(v === null || v === undefined) return; // v is now recognized as a `number` const v2 = v + 2; However, if we decide to streamline this process ...

Guide to creating numerous separate subscriptions in angular 6

Can you explain the differences between flatMap(), switchmap(), and pipe()? Which one would be most suitable for the given scenario? I need to call the next method once both responses are received. this.jobService.getEditableText('admins', compar ...

Encountered an issue with JSON serialization while using getServerSideProps in Next.js and TypeScript to retrieve products from the Stripe Payments API

Encountered Issue on Localhost Error: The error occurred while serializing .products returned from getServerSideProps in "/". Reason: JSON serialization cannot be performed on undefined. Please use null or exclude this value. Code Sample import ...

Is there a way to retrieve keys of the object from this combination type?

Can someone please help me understand how to retrieve keys from this union type? The Value is currently being assigned as a never type. I would like the Value to be either sno, key, or id type Key = { sno: number } | { key: number } | { id: number }; typ ...

Having trouble locating the 'tsc-watch' module due to the missing 'typescript/bin/tsc' when running the TypeScript compiler

Encountering the error "Cannot find module 'typescript/bin/tsc' when attempting to run tsc-watch yarn tsc-watch --noClear -p tsconfig.json yarn run v1.22.19 $ /Users/jason/Work/VDQ/VDQApp/node_modules/.bin/tsc-watch --noClear -p tsconfig.json Ca ...

Using *ngFor to dynamically update the DOM when an array is modified via ngrx

Currently, I am utilizing *ngFor to present values from an array: [ { id: 1, name: 'item1' }, { id: 2, name: 'item2' } ] In the html: <div *ngFor="let item of (items$ | async); trackBy: trackById;&quo ...

`A bug in my Angular 4 application causes a TypeError when hosted on IIS`

After hosting an Angular 4 app on IIS, it seems there is an issue when accessing the app from machines other than the ones used for development. An error message " 'Uncaught TypeError: undefined is not a function' common.es5.js:3084" appears on t ...

Getting the readonly-item type from an array in TypeScript: A step-by-step guide

Is it possible to create a readonly item array from a constant array? const const basicValueTypes = [{ value: 'number', label: 'Number' },{ value: 'boolean', label: 'Boolean' }]; type ReadonlyItemArray = ??? ...

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

Passing a value to a property with a dynamically passed name in TypeScript

I'm encountering an eslint/typescript error message: errorUnsafe member access .value on an any value @typescript-eslint/no-unsafe-member-access when attempting to assign a value to a dynamically named property: selectChange(name: string, value: stri ...

Expanding the global object in ES6 modules to include TypeScript support for extensions like `Autodesk.Viewing.Extension`

I created a custom forge extension and now I am looking to incorporate typescript support as outlined in this blog post. However, I am facing an issue where typescript cannot locate the objects like Autodesk.Viewing.Extension and Autodesk.Viewing.ToolInter ...

What are the best ways to troubleshoot my Angular 2 project?

I've been searching for my TypeScript files in the console, but they're not showing up. I've tried everything to debug my Angular 2 project, but no luck. I can't move forward without debugging, can anyone lend a hand? ...

Creating fixtures with Playwright is a simple process that can greatly enhance

I have a requirement to set up fixtures where the first fixture is always available (acting as a base class) and the second fixture will vary in different test files (like a derived class). I've implemented the following code which seems to be working ...

Store Angular 17 control flow in a variable for easy access and manipulation

Many of us are familiar with the trick of "storing the conditional variable in a variable" using *ngIf="assertType(item) as renamedItem" to assign a type to a variable. This technique has always been quite useful for me, as shown in this example: <ng-t ...

Assigning a specific data type to an object in TypeScript using a switch case statement

I am currently developing a React Native app using TypeScript. As part of my development, I am creating a handler with a switch case structure like the one below: export const handleMessageData = (dispatch: Dispatch, messageData: FCMMessage): void => ...

Using Typescript types or a linter can help avoid mistakenly rendering the raw function in JSX instead of its executed return value

Seeking a resolution to prevent the recurring mistake I often make, as shown below: export function scratch_1 (props: scratch_1Props): ReactElement | null { function renderA (): string { return "A"; } function renderB (): string { ...

The rendering of the Angular 2 D3 tree is not functioning properly

Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component. Below is the code snippet from tree.component.ts: import { ...

How can I generate codegen types using typeDefs?

I have been exploring the capabilities of graphql-codegen to automatically generate TypeScript types from my GraphQL type definitions. However, I encountered an issue where I received the following error message: Failed to load schema from code file " ...

The error message "Theme does not include property 'navHeight'" is indicating that the 'navHeight' property is not defined within the 'Theme' type. This issue occurs when using MUI v5 syntax with Types

When attempting to incorporate MUI with new props declared in the Interface inside the theme.ts file (as suggested by the MUI docs), I encountered the error mentioned above while theme.palette.primary.main does work. Despite trying various solutions like i ...