electron+hooks+ts实现互动直播大班课（五）

//只允许赋值该类型（单个）
let str: string = 'hello';
let num: number = 1;
let bol: boolean = true;
let nul: null = null;
let un: undefined = undefined;

//只允许赋值该类型（多个）
let muchtype:string|number = '1';
muchtype = 2;

interface ChatMessage {
    account: string
    headImg?: string
    local: boolean
    readonly role: number
    text: string
    [k: string]: any
}

type ChatMessage = {
    account: string
    headImg?: string
    local: boolean
    readonly role: number
    text: string
    [k: string]: any
}

// 定义数组每个item的类型
let arr: number[] = [1, 2, 3];
let str: string[] = ['1', '2', '3'];
let an: any[] = ['1', 2, true];
let messages: ChatMessage = [{xxx}, {xxx}, ...]

const on = (name: string, cb: (...args: any[]) => void) => {
    cb(true, name, 1)
}

class Person {
  private name: string;
  protected age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public wark() {
    console.log(this.name);
  }
}

const muchtype:string|number = 1;
(muchtype as number).toString()

const muchtype:string|number = '1';
(muchtype as string).length

const ipc = (window as any).ipc;

function getCacheData(key: string): any {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData('tom') as Cat;
tom.run();

function getCacheData<T>(key: string): T {
    return (window as any).cache[key];
}

interface Cat {
    name: string;
    run(): void;
}

const tom = getCacheData<Cat>('tom');
tom.run();

import React from 'react';
interface ChildProps {
  onClick: (evt: any) => void
}
const Child: React.FC<ChildProps> = ({ onClick }) => {
  return (<span style={{ cursor: 'pointer' }} onClick={onClick}>Child</span>)
}
export default Child

import React, { useEffect, useRef, useCallback } from 'react';
import logo from 'logo.svg';
import { connect } from 'dva';
import { FunCompProps } from 'utils/types'
import Child from './Child';
import Child2 from './Child2';
import Context from 'hooks/useContext'
import useTitle from 'hooks/useTitle'

type Login = {
  current: number
  record: number
}
type Loading = {
  global: boolean
  models: Object
  effects: { [k: string]: boolean }
}
interface LoginProps extends Login, FunCompProps {
  loading: boolean
}
type LoginModel = {
  login: Login
  loading: Loading
}

const Login: React.FC<LoginProps> = ({ dispatch, loading, current }) => {
  const preProps = useRef<number>()
  const inputElement = useRef<HTMLInputElement>(null)
  const lock = useRef<boolean>(false)

  useTitle('Login')
  useEffect(() => {
    preProps.current = current
  }, [current])

  const change = async (type: string) => {
    if (lock.current) return
    const delay = (timeout: number) => new Promise((resolve) => {
      setTimeout(resolve, timeout);
    })
    lock.current = true
    await delay(2000)
    await dispatch({
      type: `login/${type}`
    })
    lock.current = false
  }

  const onClick = useCallback(() => {
    inputElement.current?.focus()
  }, [])
  return (
    <Context.Provider value={current}>
      <div className="App" >
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          {loading ? <p>Loading</p> : <p>{current} Page</p>}
          <div>Child: <Child /></div>
          <div>Child: <Child2 onClick={onClick} /></div>
          <div className="App-operate">
            <button className="App-btn" disabled={loading} onClick={() => change('addASync')}>Add</button>
            <button className="App-btn" onClick={() => change('minus')}>Minus</button>
          </div>
        </header>
      </div >
    </Context.Provider>
  )
}

export default connect(({ login, loading }: LoginModel) => ({
  current: login.current,
  loading: loading.effects['login/addASync']
}))(Login)

import H from 'history';
import {
  Dispatch,
} from 'redux';

export interface match<Params extends { [K in keyof Params]?: string } = {}> {
  params: Params;
  isExact: boolean;
  path: string;
  url: string;
}

export interface StaticContext {
  statusCode?: number;
}

export interface FunCompProps<
  Params extends { [K in keyof Params]?: string } = {},
  C extends StaticContext = StaticContext,
  S = H.LocationState
  > {
  dispatch: Dispatch<any>
  history: H.History<S>;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}