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

初始化端项目

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

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

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

login页面

• 安装antd：npm install [email protected] -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 {
  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 (
      

        

          
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
              }
                type="password"
                placeholder="Password"
              />,
            )}
          
          
            
              Log in
            
          
        
      
    );
  }
}

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
}

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

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