typescript实战总结之实现一个互联网黑白墙

前言

笔者上一篇文章 TS核心知识点总结及项目实战案例分析 主要写了typescript的用法和核心知识点总结, 这篇文章将通过一个实际的前端案例来教大家如何在项目中使用typescript.

你将收获

• 如何使用umi快速搭建一个基于React + antd + typescript的前端项目

• 中后台前端项目的目录和ts文件划分

• 在React组件中使用typescript

• 在工具库中使用typescript

• 互联网黑白墙 案例分析

正文

在开始文章之前, 我们先看一下企业黑白墙项目的演示:

(注: 本文仅针对项目剖析和学习使用, 不做任何商业用途)

该项目是一个响应式网站, 针对PC端和H5均做了一定的适配, 接下来我们将正对该网站做一次typescript剖析.

由上面的gif可以看出网站的信息结构图大致如下:

接下来进入我们的正文.

1. 使用umi快速搭建一个基于React + antd + typescript的前端项目

umi是一个功能强大且开箱即用的企业级项目脚手架, 这里笔者直接采用umi来创建一个ts项目, 具体方式如下:

// 1.创建项目空目录
$ mkdir ts-react && cd ts-react

// 2.创建项目
yarn create @umijs/umi-app

// 3.安装项目依赖
yarn

复制代码

用umi开发只需要简单的3个命令即可, 值得注意的是, 在执行步骤2时会在命令行出现如下交互选项:

主要是让我们选择创建的项目类型的, 这里我们选typescript和antd即可, 有关如何创建可交互的命令行工具, 在笔者的 基于react/vue生态的前端集成解决方案探索与总结 中有介绍, 感兴趣的可以学习交流.

经过以上的步骤我们就初步搭建了一个支持react + typescript + antd技术栈的项目骨架.

2. 中后台前端项目的目录和ts文件划分

我们先看看本次研究的项目的目录划分:

ts-react
├─ src
│  ├─ assets
│  │  └─ yay.jpg
│  ├─ components
│  │  └─ PublicModal
│  │     ├─ index.css
│  │     ├─ index.tsx
│  │     └─ type.ts
│  ├─ layouts
│  │  ├─ __tests__
│  │  │  └─ index.test.tsx
│  │  ├─ index.css
│  │  └─ index.tsx
│  ├─ locales
│  │  └─ en-US.ts
│  ├─ models
│  ├─ pages
│  │  ├─ __tests__
│  │  │  ├─ __mocks__
│  │  │  │  └─ umi-plugin-locale.ts
│  │  │  └─ index.test.tsx
│  │  ├