使用 TypeScript 语法

Modern.js 同样对 TypeScript 提供了一等公民、开箱即用的支持。

这一小节，我们将当前为 ES6+ 语法的 Demo 修改为 TypeScript 语法。

在项目根目录下执行：

macOS

mv src/App.jsx src/App.tsx

pnpm add typescript @types/react @types/react-dom @types/node -D

touch tsconfig.json

Windows

mv src/App.jsx src/App.tsx

pnpm add typescript @types/react @types/react-dom @types/node -D

ni tsconfig.json

注

接下来所有章节的项目，都会使用 TS 来进行开发。

tsconfig.json 内容如下：

{
  "extends": "@modern-js/tsconfig/base",
  "compilerOptions": {
    "declaration": false,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", "shared", "config"]
}

打开 src/App.tsx，把代码改成以下内容：

import React from 'react';

const getAvatar = (users: Array<{ name: string; email: string }>) =>
  users.map(user => ({
    ...user,
    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
  }));

const mockData = getAvatar([
  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
]);

function App() {
  return (
    <ul>
      {mockData.map(({ name, avatar, email }) => (
        <li key={name}>
          <img src={avatar} width={60} height={60} /> ---
          <span>{name}</span> ---
          <span>{email}</span>
        </li>
      ))}
    </ul>
  );
}

export default App;

可以看到，跟 ES6+ 的代码相比有以下不同：

1. 由于 TS 还不支持 Pipeline Operator 语法，需要把 mockData 的生成过程改成普通的函数调用语法。
2. 需要声明 getAvatar 参数的类型。

在 VS Code 里，把鼠标悬停在 mockData 上，可以看到它的类型已经被自动推导出来。如果把 key={name} 改成 key={name * 2}，可以看到 TS 的报错。

运行 pnpm run dev，可以看到一样的运行结果。

注

更简单、开箱即用的方式，是在创建项目的时候，开发语言选择 TS，会自动生成上述样板代码，源代码文件也会自动默认采用 .ts 和 .tsx。

---

本小节的代码可以在这里查看。