Nextjs摸魚進階二： React中使用Typescript類型校驗

時間 2019-12-01

標籤 nextjs 摸魚進階 react 使用 typescript 類型校驗欄目 React 简体版

原文原文鏈接

通過第一章的Nextjs摸魚進階一：Typescript編譯環境後，我們開始結合Typescript+React進行開發。react

附上Typescript文檔教程連接：ts.xcatliu.com/git

1、編寫一個tsx組件

1.1 Simple Example

在下面小例子中，經過定義一個簡單的interfase接口，給組件添加泛型。組件內部使用props和state屬性值的時候，編譯器就會校驗類型是否正確。

在開發時須要花時間去整理類型接口。一些複用的接口能夠建立一個接口共用文件經過導入/繼承的方式實現複用。

import { PureComponent, ReactNode } from 'react';
interface PropsAttr {
  theme: string
}
interface StateAttr {
  total: number
}
//組件泛型<props,state>
export default class Home extends PureComponent<PropsAttr,StateAttr> {
  // ---- getInitialProps只會在服務端執行 ----
  static async getInitialProps(context: any) {
    return {};
  }
  // --- default state value ---
  state:StateAttr = {
    total:100
  }
  constructor(props:PropsAttr){
    super(props);
  }
  render(): ReactNode {
    return (<section className="home-container"> Home Page --- Show Total: {this.state.total} </section>);
  }
}
複製代碼

—— 補充一下 ——github

1.2 nextjs 的 `getInitialProps`方法

Nextjs 的 getInitialProps方法運行在服務端，用於在服務端請求接口數據返回給組件的props，最終在render函數中渲染從請求拿到的數據.（SSR - 優化）
子組件的getInitialProps不會執行，只有在pages目錄下最終export導出提供Nextjs輸出頁面的組件，纔會執行一次服務端getInitialProps方法。

1.3 Typescript的聲明文件

假如你須要引入Nextjs的Container內置組件，若是在沒有導入@types/next聲明文件時編譯器會報找不到模塊|Cannot find moduleapp

import { Container } from 'next/app';
複製代碼

TS文檔說明：當使用第三方庫時，咱們須要引用它的聲明文件，才能得到對應的代碼補全、接口提示等功能

能夠在這裏搜索你須要的文件聲明是否已提供：microsoft.github.io/TypeSearch/

若是引入對應聲明文件以後編譯器仍是報錯，嘗試重啓VSCode編譯器 -> 1: Ctrl+Shift+P 2: Reload Window 從新加載窗口

2、編寫無狀態組件

無狀態組件則是最基礎的組件形式，因爲沒有狀態的影響因此就是純靜態展現的做用，有狀態組件則是在無狀態組件的基礎上擁有組件生命週期less

2.1 普通函數式

export default (props) => {
  return (
    <section>loading...</section>
  );
}
複製代碼

2.2 Typescript SFC寫法

SFC(Stateless Functional Components) 表示「無狀態」的函數式組件，其實就是狀態組件的 TS 寫法async

import { ReactNode } from 'react';
interface IProps {
    showLoading:boolean
}
const Loading: SFC<P> = (props):ReactNode => {
  return (
    <section className={props.showLoading?'show':'hide'}>
        loading...
    </section>
  );
}
export default Loading;
複製代碼