How to enable optional chaining with Create React App and TypeScript

在使用Create React App（CRA）与TypeScript项目中启用可选链（Optional Chaining）的方法相对直接。首先，确保您已经安装了合适版本的TypeScript，因为可选链是在TypeScript 3.7及以上版本中引入的。以下是详细步骤：

1. 创建一个新的React项目并集成TypeScript: 如果您从头开始，可以直接使用Create React App创建一个支持TypeScript的新项目。在终端中运行以下命令：

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

   这个命令会创建一个名为 my-app 的新目录，里面包含了使用TypeScript配置的React项目的初始结构。

2. 确认TypeScript版本: 打开项目中的 package.json 文件，查看 devDependencies 部分确认 typescript 的版本。如果版本低于3.7，您需要更新TypeScript版本。可以通过运行以下命令来更新：

   bash
   npm install typescript@latest --save-dev

3. 使用可选链: 在项目中，您现在可以在TypeScript文件中直接使用可选链语法。例如，假设我们有一个接口和一个可能没有全部属性的对象：

   typescript
   interface User {
     name: string;
     age?: number; // 可选属性
     address?: {
       city: string;
       zipCode?: string; // 可选属性
     };
   }
   
   const user: User = {
     name: "张三",
     address: {
       city: "北京"
     }
   };
   
   // 使用可选链安全地访问 zipCode
   console.log(user.address?.zipCode);

   在这个例子中，user.address?.zipCode 将安全地访问 zipCode，如果 address 不存在，则返回 undefined 而不是抛出错误。

4. 编译并运行项目: 使用Create React App的默认设置，您可以直接开始开发并在本地运行项目，TypeScript编译器会自动处理可选链的正确转译。

   bash
   npm start

通过以上步骤，您可以在使用Create React App创建的React + TypeScript项目中自由使用可选链功能，提升代码的安全性和可读性。