What does `/// <reference types="react-scripts" />` mean? What other xml like syntax can we use in *.d.ts?

Question

In normal *.d.ts file (definition files for typescript), we can normally use

declare ***

export interface ***

but there is also this

/// <reference types="react-scripts" />

generated by create-react-app, what does it mean and can we actually use xml like syntax in *.d.ts files and what other syntax can we use?

Answer 1

A /// <reference types="..." /> directive declares a dependency on a package.

The process of resolving these package names is similar to the process of resolving module names in an import statement. An easy way to think of these triple-slash-reference-types directives is as an import for declaration packages.

For example, including /// <reference types="node" /> in a declaration file declares that this file uses names declared in @types/node/index.d.ts and thus, this package needs to be included in the compilation along with the declaration file.

Use these directives only when you’re authoring a d.ts file by hand. More information: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

In your case, /// <reference types="react-scripts" /> imports various names declared in the node_modules/react-scripts/lib/react-app.d.ts file.

Hope this helps.