類型即正義：TypeScript 從入門到實踐（序章）

時間  2020-07-06
標籤 類型 正義 typescript 入門 實踐 简体版
原文   原文鏈接

image.png

做者：一隻圖雀

倉庫： Github 、 Gitee

圖雀社區主站（首發）： 圖雀社區

博客： 掘金、 知乎、 慕課

公衆號： 圖雀社區

聯繫我：關注公衆號後能夠加圖雀醬微信哦

原創不易，❤️點贊+評論+收藏 ❤️三連，鼓勵做者寫出更好的教程

準備代碼


由於須要儘量全且精煉的講解 TypeScript 語法知識，因此咱們須要一個恰到好處的實戰項目，這一小節主要是用於講解咱們準備初始 TypeScript 版本的 React 項目代碼的過程，在下一個小節中咱們將會結合 React 項目代碼，真正開始 TypeScript 語法的講解。
javascript

本文所涉及的源代碼都放在了 Github  或者 Gitee 上，若是您以爲咱們寫得還不錯，但願您能給 ❤️這篇文章點贊Github 或 Gitee 倉庫加星❤️哦~
此教程屬於 React 前端工程師學習路線的一部分，歡迎來 Star 一波，鼓勵咱們繼續創做出更好的教程，持續更新中~

前提條件

  1. 確保你已經安裝了 Node.js，能夠訪問官網安裝：官網地址。
  2. 確保你已經瞭解基本的 React 開發知識，圖雀社區有一篇很好的 React 入門教程，你能夠經過學習它很快的上手 React。
  3. 確保你有必定的命令行使用基礎，包括使用 Npm （Node.js 包管理工具）來安裝包。

初始化應用


初始一個 React 應用的最佳方式那麼必定是 React 官方維護的 Create React App 腳手架了，咱們打開終端，運行以下命令來初始化一個 TypeScript 版本的 React 應用：
css

$ npx create-react-app typescript-tea --template typescript


運行如上命令，命令行裏面應該會有一系列輸出，等待幾分鐘，就會提示已經初始化完成，並提供了對於的命令來幫助你開啓項目，咱們根據提示輸入以下命令來開啓項目：
前端

$ cd typescript-tea
$ npm start


運行如上命令以後，會自動開啓 Webpack 開發服務器，並打開瀏覽器窗戶，訪問 http://localhost:3000/ 來展現你的應用初始界面：





若是看到這個界面，恭喜你🥳！成功建立一個 TypeScript 版本的 React 應用！
java

提示
在下文中，爲了簡化語言，咱們統一稱 TypeScript 爲 TS。

引入 antd 組件庫


實戰驅動的技術學習能帶給咱們成就感，便捷好用的包能夠加快咱們的開發效率，好看的界面能夠提升咱們的審美能力，緩解學習疲勞。在這篇教程的講解過程當中，咱們將經過 Ant Design 對應的 React 組件庫 antd 來輔助咱們項目的編寫，使得咱們能夠專一於講解 TS 的核心知識，而不被繁雜的界面語言所幹擾，還能作出對應相應完成的目標功能。
node

提示
Ant Design 是螞蟻金服孵化的一套企業級產品設計體系，提供了完備的 TS 類型定義，使得咱們能夠很方便的在 TS 項目中使用，在最近發佈了 4.0 版本，致力於創造高效愉悅的工做體驗。
除此以外 Ant Design 的周邊生態也很豐富：react

  • 包括新一代數據可視化解決方案：AntV
  • 一個基於 Preact / React / React Native 的 UI 組件庫：Ant Design Mobile
  • 開箱即用的中臺前端/設計解決方案：Ant Design Pro
  • 插畫設計：海兔
  • 一款爲設計者提高工做效率的 Sketch 工具集 ： Kitchen

後面圖雀社區計劃圍繞 Ant Design 生態撰寫一系列教程，幫助你們提升設計、開發效率，敬請期待！✌️git

安裝依賴


好了，大體介紹了 antd 組件庫及 Ant Design 周邊以後，咱們立刻來寫代碼引入 antd，打開命令行，在其中輸入以下命令：
github

$ npm install antd


運行上面的命令安裝完依賴以後就能夠在項目中使用了，可是爲了更好的定製樣式和按需引用以減少打包以後的包體積，咱們還須要作一點定製化的操做，打開命令行，依次安裝以下依賴：
typescript

$ npm install react-app-rewired customize-cra babel-plugin-import less less-loader


注意到上面咱們安裝了不少包，咱們來依次解釋一下上面各類包的意思：
npm

  • react-app-rewired：用來定製化 Create React App （CRA)腳手架的一些配置，好比 Webpack、Babel 等，由於 CRA 它是一個封閉的黑盒，不容許開發者直接定製，但有時候咱們須要對配置作一些修改，好比這裏須要配置 antd 的按需引用。
  • customize-cra：是 CRA 在發佈 2.0 以後出來的一個輔助 react-app-rewired 更方便定製 CRA 的 Webpack 配置的一個庫，它提供了一些開箱即用的 API。
  • babel-plugin-import：是配置可供開發者按需引用 antd 組件的一個 Babel 插件
  • less 和 less-loader：是咱們用於定製化 antd 的主題須要的 Webpack loader，由於 antd 使用 less 做爲樣式化語言。


最後咱們安裝一個在 Ant Design 4.0 拆分出去的 icons 包，能夠用來按需引用 icons，進一步減小最後的打包體積，繼續在命令行運行以下命令：

$ npm install @ant-design/icons


大功告成！如今咱們全部的依賴以及安裝完成。接下來就須要改寫一下 CRA 以前經過 react-scripts  跑開發構建的流程，用咱們安裝的 react-app-rewired  腳原本替換它，當安裝完了因此依賴，以及用react-app-rewired   替換 react-scripts  以後，咱們的 package.json  文件應該是下面的樣子：

// ...
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.0.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "antd": "^4.0.0",
    "babel-plugin-import": "^1.13.0",
    "customize-cra": "^0.9.1",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "react": "^16.13.0",
    "react-app-rewired": "^2.1.5",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...

修改配置


安裝完依賴以後，咱們要確保對應改寫 CRA 流程的配置生效，咱們須要根據 react-app-rewired 的文檔說明在根目錄下創建 config-overrides.js 文件，並在其中編寫以下的內容：

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
const darkThemeVars = require("antd/dist/dark-theme");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      hack: `true;@import "${require.resolve(
        "antd/lib/style/color/colorPalette.less"
      )}";`,
      ...darkThemeVars,
      "@primary-color": "#02b875"
    }
  })
);


能夠看到，上面的代碼主要是導出一個用於修改 Webpack 配置的對象，使用 override API，接收兩個修改配置的函數調用，fixBabelImports 用於配置 antd 的按需引用，addLessLoader 用於配置 antd 的主題，這裏咱們使用了 Ant Design 4.0 新帶來的 Dark Mode（暗色模式），而後配置了主題色爲圖雀社區的主題色：#02b875 ，表明但願的綠色。😆


自此，咱們就引入了 antd 組件庫，並進行了按需配置使用以及配置主題色和使用了 Ant Design 最新的暗色主題 -- Dark Mode。

編寫初始代碼

準備邏輯部分


接下來，咱們將使用 antd 幫助咱們快速的編寫一下咱們即將實現的待辦事項的界面，打開 src/App.tsx ，對其中的代碼作出對應的修改以下：

import React, { useState, useRef } from "react";
import {
  List,
  Avatar,
  Button,
  Typography,
  Form,
  Input,
  Select,
  DatePicker,
  Menu,
  Dropdown,
  Tabs
} from "antd";
import { DownOutlined } from "@ant-design/icons";

import "./App.css";
import logo from "./logo.svg";

const { Title } = Typography;
const { Option } = Select;
const { TabPane } = Tabs;

const todoListData = [
  {
    content: "圖雀社區：匯聚精彩的免費實戰教程",
    user: "mRcfps",
    time: "2020年3月2日 19:34",
    isCompleted: false
  },
  {
    content: "圖雀社區：匯聚精彩的免費實戰教程",
    user: "pftom",
    time: "2020年3月2日 19:34",
    isCompleted: false
  },
  {
    content: "圖雀社區：匯聚精彩的免費實戰教程",
    user: "Holy",
    time: "2020年3月2日 19:34",
    isCompleted: false
  },
  {
    content: "圖雀社區：匯聚精彩的免費實戰教程",
    user: "crxk",
    time: "2020年3月2日 19:34",
    isCompleted: false
  },
  {
    content: "圖雀社區：匯聚精彩的免費實戰教程",
    user: "Pony",
    time: "2020年3月2日 19:34",
    isCompleted: false
  }
];

const userList = [
  {
    id: "666666666",
    name: "圖雀社區",
    avatar: "https://avatars0.githubusercontent.com/u/39240800?s=60&v=4"
  },
  {
    id: "23410977",
    name: "mRcfps",
    avatar: "https://avatars0.githubusercontent.com/u/23410977?s=96&v=4"
  },
  {
    id: "25455350",
    name: "crxk",
    avatar: "https://avatars1.githubusercontent.com/u/25455350?s=96&v=4"
  },
  {
    id: "23410977",
    name: "pftom",
    avatar: "https://avatars0.githubusercontent.com/u/23410977?s=96&v=4"
  },
  {
    id: "58352313",
    name: "holy",
    avatar: "https://avatars0.githubusercontent.com/u/58352313?s=96&v=4"
  }
];

const menu = (
  <Menu>
    <Menu.Item>完成</Menu.Item>
    <Menu.Item>刪除</Menu.Item>
  </Menu>
);

const TodoInput = ({ value = {} }) => {
  return (
    <div className="todoInput">
      <Input type="text" placeholder="輸入待辦事項內容" />
      <Select style={{ width: 80 }} size="small" defaultValue="666666666">
        {userList.map(user => (
          <Option value={user.id}>{user.name}</Option>
        ))}
      </Select>
      <DatePicker
        size="small"
        style={{ marginLeft: "16px", marginRight: "16px" }}
      />
    </div>
  );
};

function TodoList() {
  return (
    <List
      className="demo-loadmore-list"
      itemLayout="horizontal"
      dataSource={todoListData}
      renderItem={item => (
        <List.Item
          actions={[
            <Dropdown overlay={menu}>
              <a key="list-loadmore-more">
                操做 <DownOutlined />
              </a>
            </Dropdown>
          ]}
        >
          <List.Item.Meta
            avatar={
              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            }
            title={<a href="https://ant.design">{item.user}</a>}
            description={item.time}
          />
          <div>{item.content}</div>
        </List.Item>
      )}
    />
  );
}

function App() {
  const callback = () => {};

  const onFinish = () => {};
  const ref = useRef(null);

  return (
    <div className="App" ref={ref}>
      <div className="container header">
        <img src={logo} alt="" />
        <Title level={3}>圖雀社區：匯聚精彩的免費實戰教程</Title>
      </div>
      <div className="container">
        <Form onFinish={onFinish}>
          <Form.Item name="todo">
            <TodoInput />
          </Form.Item>
        </Form>
      </div>
      <div className="container">
        <Tabs onChange={callback} type="card">
          <TabPane tab="全部" key="1">
            <TodoList />
          </TabPane>
          <TabPane tab="進行中" key="2">
            <TodoList />
          </TabPane>
          <TabPane tab="已完成" key="3">
            <TodoList />
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
}
 // ...


上面的代碼主要就是一系列初始數據的準備，antd 組件的使用，編寫起來的大體輪廓，尚未涉及到任何的 TS 語法，但這個是咱們開始項目的基礎，讀者只須要進行簡單的複製放進現有的 typescript-tea 項目中對應的 src/App.tsx  中便可。

準備樣式部分


準備了邏輯代碼以後，爲了讓咱們最後的待辦事項在樣式上更美觀一點，也利於咱們講解時的操做，咱們須要給項目加一點樣式，打開 src/App.css 對其中的代碼作出對應的修改以下：

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
}

.container {
  width: 600px;
}

.header {
  text-align: center;
  margin-bottom: 56px;
}

.header img {
  width: 160px;
  height: 160px;
  margin-bottom: 24px;
}

.todoInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  border: 1px solid #434343;
}

.todoInput input {
  border: none;
}


這個時候若是你的服務器還在運行，那麼你應該能夠看到以下效果：


image.png


好了！全部的準備工做已經就緒，在開始下一節真正的 TS 學習以前，咱們先來回顧一下咱們在這個小節中所完成的工做：

  • 使用 CRA 的 TypeScript 腳本初始化了一個 TS 版的 React 項目
  • 安裝了 antd 組件庫，並使用 react-app-rewired 替換默認的 react-scripts 來完成對 CRA 的 Webpack 配置進行修改，以是咱們能夠得到 antd 組件的按需引用和主題定製的功能
  • 準備了初始待辦事項代碼的邏輯部分和樣式部分


咱們在前面鋪墊了大量的 TypeScript 的優勢以及花了很多筆墨來準備初始代碼，想必讀到這裏的讀者們可能已經等不及要立刻見識一下 TS 的廬山真面目了吧！立刻就來啦！

想要學習更多精彩的實戰技術教程？來 圖雀社區逛逛吧。

本文所涉及的源代碼都放在了 Github  或者 Gitee 上，若是您以爲咱們寫得還不錯，但願您能給❤️這篇文章點贊Github 或 Gitee 倉庫加星❤️哦~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程