For many years, TypeScript has become an integral part of JavaScript development. It adds a type system based on JavaScript, enhancing the readability and maintainability of the code. However, the additional syntax and compilation steps of TypeScript can sometimes increase the development burden. Fortunately, the TypeScript team supports type checking of pure JavaScript code using JSDoc, taking into account both type safety and development efficiency.

Project Settings

To start type checking with JSDoc, you need NodeJS and npm. Create a new project and run npm init . This article will use VS Code as the code editor. Install TypeScript:

 npm i -D typescript

Create a tsconfig.json file and add the following configuration:

 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true
  },
  "include": ["script", "test"],
  "exclude": ["node_modules"]
}

The key configurations are allowJs and checkJs , both set to true , allowing TypeScript to check JavaScript code. We also specified the /script directory as the location of the code.

Simple example

Create an index.js file and write a simple addition function:

 /**
 * Add two numbers together
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
function add(x, y) {
  return xy;
}

We specify the types of parameters and return values ??through JSDoc annotations @param and @return . Try calling the function with the error type, VS Code will prompt an error.

JSDoc annotations are equivalent to TypeScript code:

 /**
 * Add two numbers together
 */
function add(x: number, y: number): number {
  return xy;
}

JSDoc supports a variety of built-in types, such as string , object , Array , and DOM types such as HTMLElement , MutationRecord .

JSDoc also allows adding type constraints to objects, such as WeakMap :

 /** @type {WeakMap<object string> } */
const metadata = new WeakMap();

const object = {};
const otherObject = {};

metadata.set(object, 42); // An error is reported because the value is not the string metadata.set(otherObject, 'Hello world');</object>

Custom Type

JSDoc allows custom types to be defined, such as Person types:

 /**
 * @typedef Person
 * @property {string} name - The person's name
 * @property {number} age - The person's age
 * @property {string} [hobby] - An optional hobby
 */

Use @typedef to define types, use @property or @prop to define properties.

Use custom types:

 /** @type {Person} */
const person = { name: 'John Doe', age: 30, hobby: 'reading' };

A limited set of options can be defined using union types:

 /**
 * @typedef {'cat'|'dog'|'fish'} Pet
 */

Generics

JSDoc supports generics, such as identity functions:

 /**
 * @template T
 * @param {T} target
 * @return {T}
 */
function identity(target) {
  return target;
}

Use @template to define generic types.

Type conversion

Sometimes type conversion is required, such as processing event listeners:

 document.getElementById('input').addEventListener('input', event => {
  console.log(/** @type {HTMLInputElement} */(event.target).value);
});

Use /** @type {類型} */ for type conversion.

Summarize

JSDoc provides a way to get type checking and code prompts while writing pure JavaScript code, which is useful for projects that want to improve code quality without introducing additional syntax and compilation steps. While the TypeScript compiler is powerful, JSDoc provides a flexible alternative.

The above is the detailed content of TypeScript, Minus TypeScript. For more information, please follow other related articles on the PHP Chinese website!