How to enable optional chaining with Create React App and TypeScript

Enabling Optional Chaining in Create React App (CRA) and TypeScript projects is relatively straightforward. First, ensure you have installed the correct version of TypeScript, as Optional Chaining was introduced in TypeScript 3.7 and later versions. Here are the detailed steps:

1. Create a new React project and integrate TypeScript: If you're starting from scratch, you can directly create a new project with TypeScript support using Create React App. Run the following command in your terminal:

   bash
   npx create-react-app my-app --template typescript

   This command creates a new directory named my-app containing the initial structure of a React project configured with TypeScript.

2. Confirm TypeScript version: Open the package.json file in your project and check the devDependencies section to confirm the version of typescript. If the version is below 3.7, you need to update the TypeScript version. You can update it by running the following command:

   bash
   npm install typescript@latest --save-dev

3. Use Optional Chaining: In your project, you can now directly use Optional Chaining syntax in TypeScript files. For example, assume we have an interface and an object that may not have all properties:

   typescript
   interface User {
     name: string;
     age?: number; // Optional property
     address?: {
       city: string;
       zipCode?: string; // Optional property
     };
   }
   
   const user: User = {
     name: "张三",
     address: {
       city: "北京"
     }
   };
   
   // Safely access zipCode using Optional Chaining
   console.log(user.address?.zipCode);

   In this example, user.address?.zipCode safely accesses zipCode; if address does not exist, it returns undefined instead of throwing an error.

4. Compile and run the project: With the default settings of Create React App, you can directly start development and run the project locally; the TypeScript compiler automatically handles the correct transpilation of Optional Chaining.

   bash
   npm start

By following these steps, you can freely use Optional Chaining in React + TypeScript projects created with Create React App, enhancing the safety and readability of your code.