{@link name} is an inline tag: it goes inside the text of a comment, in braces, wherever you would mention another function, class or member. Since TypeScript 4.3, editors resolve the name, so it is clickable in hovers, and go to definition and find all references work on it.
The link is not checked. A {@link} to a name that does not exist produces no error; the editor just shows the text. TypeScript also accepts the variants {@linkcode}, which VS Code shows in code style, and {@linkplain}.
At a glance
| Use | JSDoc in a .js file | TypeScript in a .ts file |
|---|---|---|
| A link to a declaration | /** Read the total with {@link cartTotal}. */ | /** Read the total with {@link cartTotal}. */ |
| With link text | /** {@link cartTotal | the total} */ | /** {@link cartTotal | the total} */ |
| A class member | /** {@link Cart#add} */ | /** {@link Cart#add} */ |
| A web page | /** {@link https://developer.mozilla.org/ MDN} */ | /** {@link https://developer.mozilla.org/ MDN} */ |
Examples
/**
* A shopping cart. Add lines with {@link Cart#add}, read the total with
* {@link cartTotal | the cartTotal function}, and see
* {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes classes on MDN}.
*/
export class Cart {
/** @type {{ price: number, quantity: number }[]} */
lines = [];
/**
* @param {number} price
* @param {number} quantity
*/
add(price, quantity) {
this.lines.push({ price, quantity });
}
}
/**
* Same as {@linkcode Cart} lines summed. See also {@linkplain Cart}.
* @param {Cart} cart
*/
export function cartTotal(cart) {
return cart.lines.reduce((sum, line) => sum + line.price * line.quantity, 0);
}jsconfig.json for this example
{
"compilerOptions": {
"checkJs": true,
"noEmit": true,
"strict": true,
"target": "es2022",
"module": "nodenext",
"types": []
},
"include": ["*.js"]
}/**
* Empties the cart. Replaces {@link clearCart}, which was removed.
* @param {{ lines: unknown[] }} cart
*/
export function emptyCart(cart) {
cart.lines.length = 0;
}jsconfig.json for this example
{
"compilerOptions": {
"checkJs": true,
"noEmit": true,
"strict": true,
"target": "es2022",
"module": "nodenext",
"types": []
},
"include": ["*.js"]
}Forms
The target comes first, then optional link text after a space or a |: {@link cartTotal the total} and {@link cartTotal | the total} both show "the total" in the hover. A member is written Class#member (an instance member) or Class.member. A URL works too and shows as a web link.
TypeScript resolves the name from the scope of the comment, so imported names work. We checked with TypeScript's language service, the code editors call, that go to definition on a {@link} target lands on the declaration.
With other tags
{@link} is most useful inside @deprecated (to name the replacement), @see and the description. It works the same in .js and .ts files.
Gotchas
- A link to a renamed or deleted function goes stale silently. Rename symbols with the editor's rename command, which updates
{@link}targets too. {@link}is inline: on a line of its own it is still part of the surrounding text, not a block tag.
Questions
Does TypeScript check {@link} targets?
No. TypeScript 5.9 resolves them for editor features but reports nothing for a target that does not exist.
Sources
- TypeScript 4.3: editor support for @link tags · TypeScript release notes
- JSDoc Reference: @link · TypeScript handbook
- {@link} · JSDoc
Last reviewed 20 October 2026.