iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
2
自我挑戰組

Typescript 初心者手札系列 第 24

【Day 24】在 React 專案中使用 TypeScript - 建置開發環境

今天開始來探討如何使用 TS 結合 React 進行開發,要開發一個專案,最重要的就是建置開發環境。這裡我們會介紹兩種React + TypeScript 建置環境的方式,第一種是使用 create-react-app ,另一種是使用 Webpack 自建開發環境。如果想了解純 TS開發環境建置可以參考 Day02的文章

create-react-app

1. 使用 create-react-app 創建全新 TypeScript 專案

npx create-react-app my-project --typescript

一行指令很迅速地就把開發環境建好了!資料夾結構如下:

備註:如果之前曾使用 npm install -g create-react-app 全域安裝 create-react-app ,建議先卸除安裝npm uninstall -g create-react-app以確保 npx 是最新的版本。

2. 在既有的 create-react-app 專案安裝 TypeScript

若原本使用 create-react-app 建置專案,想要切換成 TS 進行開發,則可以進行下面步驟:

步驟一:安裝 TypeScript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest


這時候,所有檔案仍然維持是原本 JS 版本

步驟二:將所有檔案重新命名,並修復錯誤

接下來,將.js結尾檔名手動改成.tsx,再重新啟動開發伺服器。這時候,所有的型別錯誤都會顯示在開發面板的終端機上,需要修復所有型別錯誤,才能繼續開發。

倘若是原本使用 TS 進行開發,想要回到原本 JS 寫法,也可以參考此部落格文章

資料來源: create-react-app官網說明


使用 Webpack 自建 TS 開發環境

步驟一:創建專案資料夾進行初始化專案設定

npm init -y

這時候會創建一個package.json檔案

步驟二:安裝 webpack 及相關套件

npm install --save-dev webpack webpack-cli
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

Webpack 工具可以將所有程式碼壓縮成一個JS檔案。@type 前綴字表示要額外獲取 React 和 React-DOM 的聲明文件,通常當 import "react" 路徑時,TS 會查看 react 資料夾; 但不是所有資料夾都有聲明文件,所以 TS 還會檢查 @types/react 資料夾。

步驟三:安裝ts-loader和source-map-loader套件

npm install --save-dev typescript ts-loader source-map-loader

這些套件可以讓 TS 和 Webpack 很好的結合使用。ts-loader 幫助 webpack 使用 TS 標準設定文件 tsconfig.json 進行編譯,而 source-map-loader 可以幫助除錯。

什麼是 source map 呢? 簡單來說,source map 是儲存程式碼轉換前後對應的位置的檔案,由於 webpack 會將程式碼打包和壓縮,而透過 source map 可以在程式碼出錯時,方便我們找到錯誤的程式碼在哪一隻檔案。

使用 source-map-loader 在最後輸出文件 debug 時就像在原本的 TS 程式碼中 debug 一樣。

ts-loader 不是唯一可使用的 loader,awesome-typescript-loader 也可以達到類似效果。兩者差異說明在此

步驟四:創建 TS 設定文件 tsconfig.json

在 tsconfig.json 檔案中進行編譯設定,更多編譯設定請參考Day 03的文章

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

步驟五:開始寫程式碼囉!

來創建幾個檔案吧!首先在跟 node.js 資料夾同層創建 src 資料夾,之後在 src 資料夾下再創建一個資料夾名稱叫 components,裡面放所有的元件。而後在 components 資料夾下創建 Hello.tsx 檔案

首先,來創一個functional component:

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

上面的程式碼也可以改成class component

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export class Hello extends React.Component<HelloProps, {}> {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}

HelloProps 定義了 props 的資料型別,而因為沒有 State,所以使用 {} 型別

接著在 src 下再創建一個 index.tsx 檔案如下:

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("example")
);

這邊要注意的是,ReactDom.render 中要設定編譯器 TypeScript 和 framework React。

另外,我們還需要一個 html 檔來顯示 Hello 元件,在專案根目錄創建一個 index.html 檔案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>

        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>

步驟五:創建 webpack 設定文件

在根目錄下創建 webpack.config.js 檔案

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // 幫助webpack輸出檔案debug
    devtool: "source-map",

    resolve: {
        // 加入'.ts' and '.tsx' 結尾
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
             // 所有有.ts和.tsx結尾的檔案都可以被awesome-typescript-loader處理
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // 所有結尾為.js檔案會被source-map-loader處理
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

最後面的 externals 主要用來避免將所有的 React 都打包放到同一個資料夾下,因為這會增加編譯時間,更多說明請參考webpack官網

步驟六:執行 webpack

執行

webpack

在瀏覽器打開index.html就可以看到 Hello from TypeScript and React!囉

參考資料:typescript官網


上一篇
【Day 23】TypeScript - 類別存取器(Accessors)
下一篇
【Day 25】在 React 專案中使用 TypeScript - 模組(Module)觀念(上)
系列文
Typescript 初心者手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言