Nextjs摸鱼进阶二： React中使用Typescript类型校验经过第一章的Nextjs摸鱼进阶一：Typescr

经过第一章的Nextjs摸鱼进阶一：Typescript编译环境后，咱们开始结合Typescript+React进行开发。

附上Typescript文档教程链接：ts.xcatliu.com/

一、编写一个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>);
  }
}

—— 补充一下 ——

1.2 nextjs 的 `getInitialProps`方法

Nextjs 的 getInitialProps方法运行在服务端，用于在服务端请求接口数据返回给组件的props，最终在render函数中渲染从请求拿到的数据.（SSR - 优化）
子组件的getInitialProps不会执行，只有在pages目录下最终export导出提供Nextjs输出页面的组件，才会执行一次服务端getInitialProps方法。

1.3 Typescript的声明文件

假如你需要引入Nextjs的Container内置组件，如果在没有导入@types/next声明文件时编译器会报找不到模块|Cannot find module

import { Container } from 'next/app';

TS文档说明：当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能

可以在这里搜索你需要的文件声明是否已提供：microsoft.github.io/TypeSearch/

如果引入对应声明文件之后编译器还是报错，尝试重启VSCode编译器 -> 1: Ctrl+Shift+P 2: Reload Window 重新加载窗口

二、编写无状态组件

无状态组件则是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用，有状态组件则是在无状态组件的基础上拥有组件生命周期

2.1 普通函数式

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

2.2 Typescript SFC写法

SFC(Stateless Functional Components) 表示「无状态」的函数式组件，其实就是状态组件的 TS 写法

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;

三、Event事件类型

参考：juejin.cn/post/684490…

☺-End-☺

由于是个人很小的一个摸鱼项目，Typescript的语法大多数用在变量的类型和props/state属性校验，不得不说运行代码控制台报错率大大降低，而且代码结构看着非常美观。

持续关注和学习Typescript - 感谢阅读.

Nextjs摸鱼进阶二： React中使用Typescript类型校验