1. 项目搭建

软件开发5大流程：
需求分析 -> 系统设计 -> 开发 -> 测试 -> 上线

创建项目

npx create-react-app react-travel --template typescript

安装CSS模块化组件

npm install typescript-plugin-css-modules --save-dev

新建.vscode目录，新建settings.json文件

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

tsconfig.json中添加配置

{
  "compilerOptions": {
    "noImplicitAny": false,
     // ...
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  },
  //...
}

项目根目录新建custom.d.ts文件

declare module "*.css" {
  const css: { [key: string]: string };
  export default css;
}

修改App.css为App.module.css
将App.tsx中的css改为模块化引入

import React from 'react'
import logo from './logo.svg'
import styles from './App.module.css'
function App() {
  return (
    <div className={styles.App}>
      <header className={styles['App-header']}>
        <img src={logo} className={styles['App-logo']} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className={styles['App-link']}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}
export default App