Typescript爬虫实战(5) ---- 初始化前端项目和完成登陆页面

初始化端项目

通过react的脚手架create-react-app初始化一个前端项目：

//如果没有create-react-app，会直接先下载一个
npx create-react-app crowller-front --template typescript --use-npm

初始化完成之后，精简一下项目目录，并编写login页面。

login页面

安装antd：npm install antd@3.26.18 -S
将表单示例进行精简，并粘贴进项目

import React,{ Component } from 'react'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import './login.css'

interface Props{
  form:any
}

class NormalLoginForm extends React.Component<Props> {
  handleSubmit = (e:any) => {
    e.preventDefault();
    this.props.form.validateFields((err:any, values:any) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-wrapper">
        <Form onSubmit={this.handleSubmit} className="login-form">
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
              />,
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default WrappedNormalLoginForm;

效果：

image.png

对form组件的类型进行定义

按住command 点进源代码包进行类型的查看：

image.png

先找到from的类型
从类型文件中可以看出，WrappedFormUtils这个类型具备的方法正是form所具备的

image.png
将这个类型引入

import {WrappedFormUtils} from 'antd/lib/form/Form'

找validateCallback的类型

image.png

得出errors是一个any，而values是另一个泛型
而这个V是FormUtils这个类型所接受的

image.png

这样以来只要这么编写类型即可：

interface FormProps{
  password:string;
}

interface Props{
  form:WrappedFormUtils<FormProps>
}

class NormalLoginForm extends Component<Props> {
  handleSubmit = (e:any) => {
    e.preventDefault();
    this.props.form.validateFields((err:any, values:FormProps) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

这样登陆页面的组件就完成的差不多了