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

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

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

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>);
  }
}
复制代码

—— 补充一下 ——

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、编写无状态组件

无状态组件则是最基础的组件形式，因为没有状态的影响因此就是纯静态展现的做用，有状态组件则是在无状态组件的基础上拥有组件生命周期

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;
复制代码

3、Event事件类型

参考：juejin.im/post/5bab4d…

☺-End-☺

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

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