TypeScripts的基础开发|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第3天。今天预习了js课程，恰好工作室给了个小任务，就是当小预习作业啦！

一、本节课重点内容:

今天的课程安排了Javascripts的基础复习，通过一个小案例复习了js/ts中的基础时间。
学习了React中DOM的操作。JS中拥有很多小技巧:包括字符串的整理，map（）方法等。

二、课堂知识点纪要:

Typescript中的接口

Typescript是一种基于js开发的超集，通过将程序语言编译为JS脚本语言执行，
在Javascript的基础上拓展出了许多功能，interface接口就是其中一种

在TS中，变量的显示值会受到严格的限制:
interface的作用在于声明数据结构中变量类型，例：

interface infomation{
    name:string,
    ismale:boolen,
    age:number，
    address：any
    hair：undefined
}

代码中可以发现，typescript中多出any数据类型，any表示任意数据类型，当
数据结构中不需要严格限制类型时可以使用。

props参数申明

   当在使用组件的props传参时,若不声明数据类型，TS会认为该数据不安全报未定义。
   正确的使用方法是在声明组件参注释其类型,声明的类型可以是基础的数据类型，也可以是接口定义的结构，还可以是class类。 例：

interface类：

   interface idcard{
      name:string,
      ismale:boolen,
      age:number
   }

   class Numb extends React.Component<any,idcard> {
       constructor(props:any){
           super(props);
       }
       render() {
           return (
               <span>name:{this.idcard.name} </span>
               <span>gender:{this.idcard.ismale？male:female} </span>
               <span>age:{this.idcard.age} </span>
           )
       }
   }

class类、普通数据类型申明：

   class noteData {
       notice:string
       status:number
       key:string
       constructor(notice:string,
                   status:number,
                   key:string) {
           this.notice = notice ;
           this.status = status ;
           this.key = key
       }
   }


   class Notes extends React.Component<any, {dataList:noteData[],temp:string}>{
       constructor(props:any) {
           super(props);
           this.state = {
               dataList:[
                {notice: '今天去吃饭', status:0 ,key:"sub-0-1"},   //状态码0 未完成
                {notice: '吃完吃雪糕', status:1 ,key:"sub-0-2"},   //状态码1 亟待完成
                {notice: '吃完吃雪糕', status:2 ,key:"sub-0-3"},     //状态码2 已完成
               ],
               temp:' '
           }
       }
       render(){
           return{ 
           }
       }
   }

函数组件申明变量

        const AC =(props:any)=>{
           return(
               <button className={"square"} onClick={props.onClick}>AC</button>
           )
       }

使用js定时函数时，需要回调函数
```
  getTime(val?:any){
      var now:any =  new Date();
      var endTime = val[1]._d
      var delta = (endTime - now)/1000;
      var D:number = delta / 60 / 60 / 24;
      var H:number = delta / 60 / 60 % 24;
      var M:number = delta / 60 % 60;
      this.setState({D,H,M,end:String(endTime)})
  }
```
- 对于上面这个函数做一个定时轮询，使用第一种写法是不可行的，会导致getTime找不到this.state.dateValue
```
   setInterval(this.getTime(this.state.dataValue), 2000)
```
- 必须构造一个回调函数，这里可以用箭头函数实现回调。
```
setInterval(()=>{
    this.getTime(this.state.dataValue)
}, 2000)
```
- 请教了工作室的师兄，这个问题就出在当直接调用state里的变量作函数参数时，this.state 的this 指向的并不是state，而是指向了界面windows，就找不到这个函数下的所有state。
- 在定时器函数里想用this需要靠箭头函数的特性借用this或者通过call apply bind绑定this。

三、实践练习案例:

今天基于React和Style.js实现一个基本功能的计算器：

Styled-Component样式

//Authored by iiru
//powerby styled.js
import styled from "styled-components";
//主体容器盒子
export const MainContain =styled.div`   
   width:100%;
   height:1000px;
   background-image: linear-gradient(to right, #f49ecb,#d94bcc);
  
  .monitor{
   margin:5% 25% 0 25%;
   width:500px;
   height:16%;
   background:#391a33;
  }
  .keyboard{
   margin:0 25% 5% 25%;
   height:50%;
   width:500px;
   background:#efefef;
  }
`//显示器样式
export const Monitor =styled.div`
  .formula{
    margin:4%;
    font-size:28px;
    color:#ffffff;
  }
  .equation{
     margin:4%;
     float:right;
     font-size:32px;
     color:#efefef;
  }
`
//键盘样式
export const Keyboard =styled.div`
    .cubic{
     font-size:28px;
     margin:0.5%;
     width:24%;
     height:19%;
     background:#fae1f2;
     border:none;
    }
    .square{
    font-size:28px;
    margin:0.5%;
     width:49%;
     height:19%;
     background:#fae1f2;
      border:none;
    }
    
`

Typecripts 代码注意引入依赖哦代码以及做好模块化封装

//Authored by iiru
//powerby styled.js
import React  from "react";
import { MainContain,Monitor,Keyboard} from "./caculate";

export function Caculator() {

    interface numb{
        num:any
    }

    const AC =(props:any)=>{
        return(
            <button className={"square"} onClick={props.onClick}>AC</button>
        )
    }
    const Delete =(props:any)=>{
        return(
            <button className={"cubic"}  onClick={props.onClick}>清除</button>
        )
    }
    const Plus =(props:any)=>{
        return(
            <button className={"cubic"}  onClick={props.onClick}>+</button>
        )
    }
    const Sub =(props:any)=>{
        return(
            <button className={"cubic"}  onClick={props.onClick}>-</button>
        )
    }
    const Times =(props:any)=>{
        return(
            <button className={"cubic"}  onClick={props.onClick}>*</button>
        )
    }
    const Devide =(props:any)=>{
        return(
            <button className={"cubic"}  onClick={props.onClick}>/</button>
        )
    }
    const Equal =(props:any)=>{
        return(
            <button className={"square"}  onClick={props.onClick}>=</button>
        )
    }

    class Numb extends React.Component<any,numb> {
        constructor(props:any){
            super(props);
        }
        render() {
            return (
                <button className={"cubic"} onClick={this.props.onClick}>{this.props.numb}</button>
            )
        }
    }
    //显示器显示计算结果
    class Equation extends React.Component<any> {
        constructor(props:any){
            super(props);
            console.log(props)
        }
        render() {
            return (
                <span>{this.props.equation}</span>
            )
        }
    }
    
    //显示器显示计算公式
    class Formula extends React.Component<any> {
        constructor(props:any){
            super(props);

        }
        render() {
            return (
                <p className={"formula"} >{this.props.formula}</p>
            )
        }
    }
    class Caculators extends React.Component{
        //声明一个私有类
        private ans: { equation: number; formula: string };
        constructor(props:any){
            super(props);
            this.ans={
                formula:"hhhhh",
                equation: 0
            }
        }
        //清空公式
        handleAC(){
            console.log("AC")
            this.ans.formula=""
            this.ans.equation= 0
            this.setState({})
        };
         //回退一格
        handleDel(){
            this.ans.formula=this.ans.formula.substr(0,this.ans.formula.length - 1)
            this.setState({})
        };
        //计算求结果
        handleEqual(){
            this.ans.equation= eval((this.ans.equation?String(this.ans.equation):"0+")+this.ans.formula)
            this.ans.formula= " "
            this.setState({})
        };
         //处理显示器公式
        handle(e:any){
            console.log(typeof e)
            this.ans.formula=this.ans.formula+e;
            this.setState({})
        };

        render() {
            return (
                <MainContain>
                    {/*显示器*/}
                    <Monitor className={"monitor"}>
                        <Formula formula={this.ans.formula}></Formula>
                        <p className={'equation'}>
                            <span>= </span>
                            <Equation equation={this.ans.equation}></Equation>
                        </p>
                    </Monitor>
                    {/*键盘区*/}
                    <Keyboard className={"keyboard"}>
                        <AC onClick={() => this.handleAC()}></AC>
                        <Delete onClick={() => this.handleDel()}></Delete>
                        <Devide onClick={() => this.handle("/")}></Devide>

                        <Numb numb={"1"} onClick={() => this.handle("1")}></Numb>
                        <Numb numb={"2"} onClick={() => this.handle("2")}></Numb>
                        <Numb numb={"3"} onClick={() => this.handle("3")}></Numb>
                        <Times onClick={() => this.handle("*")}></Times>

                        <Numb numb={"4"} onClick={() => this.handle("4")}></Numb>
                        <Numb numb={"5"} onClick={() => this.handle("5")}></Numb>
                        <Numb numb={"6"} onClick={() => this.handle("6")}></Numb>
                        <Plus onClick={() => this.handle("+")}></Plus>

                        <Numb numb={"7"} onClick={() => this.handle("7")}></Numb>
                        <Numb numb={"8"} onClick={() => this.handle("8")}></Numb>
                        <Numb numb={"9"} onClick={() => this.handle("9")}></Numb>
                        <Sub onClick={() => this.handle("-")}></Sub>

                        <Numb numb={"."} onClick={() => this.handle(".")}></Numb>
                        <Numb numb={"0"} onClick={() => this.handle("0")}></Numb>
                        <Equal onClick={() => this.handleEqual()}></Equal>
                        //使用回调函数props传入onClick事件给button
                    </Keyboard>
                </MainContain>  )
        }
    }

    return (
        <>
            <Caculators></Caculators>
        </>
    );
};

实现效果:

四、参考文献:

React计算器参考：使用React实现计算器_傲娇小公举吖
Style-Component中文文档:styled-components 中文文档翻译

五、心得体会:

通过今天的学习加深了对React组件封装的认识，实现了一个基于Typescript语法的小项目，发现了很多问题，有幸得以及时解决。学习前端需要及时总结归纳，将问题转化为经验。

TS中的基础开发|青训营笔记

TypeScripts的基础开发|青训营笔记