【2021-05-04】ts在ReactClass和ReactHooks的应用

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 全局变量，如有：
declare global {
  interface Window {
    API: any,
    _store: any
  }
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  // HTMLElement 接口：
  document.getElementById('root') as HTMLElement
);

const App: React.FC = () => null

// 这个没什么好说的，写到烂了
export class ClassTS extends React.Component {
  public render(): React.ReactNode {
    return null
  }
 }

// 1，直接写：
export const TextField: React.FC<{ text: string }> = () => {
  return <div><input type="text"/></div>
}

// 2. 将 { text: string } 独立为接口类：
interface Props {
  text: string
}
export const TextField: React.FC<Props> = () => {
  return <div><input type="text"/></div>
}

interface Person {
  firstName: string
  lastName: string
}

interface Props {
  text: string
  ok?: boolean
  i?: number
  fn?: (bob: string) => string
  // 
  person: Person
}

// 1，直接写, 两个参数间用逗号或分号隔开均可：
export class ClassTS extends React.Component <{ text: string, age?: number }> { }
 
// 2. 将props的参数独立为接口类：
interface IProps {
  text: string
  age?: number
}

// 3. 顺带一提state，只有interface的写法：
interface IState {
  email: string
  name: string
}

export class ClassTS extends React.Component <IProps> {
  state: IState = {
    name: '',
    email: ''
  }
}

handleChange = ( e : React.FormEvent<HTMLInputElement> ) => {
  const { name, value } : any = e.target
  this.setState({ [name]: value })
}

// 或用 | ，不用 ||
const [count, setCount] = useState < string | null | { text: string } >({ text: 'hello' })

// 或 独立为接口：
interface TextNode {
  text: string
}
const [count, setCount] = useState < number | TextNode >(5)

// 因为ref的目标是一个input框，所以用 <HTMLInputElement>
// 如果打上ref的是<div></div>, 则用 <HTMLDivElement>
const inputRef = useRef<HTMLInputElement>(null)

// 如果是Props传过来，并且定义了interface接口，则要注明：
interface Props {
  handleChange: ( event: React.ChangeEvent<HTMLInputElement> ) => void
  // 或者如下定义为any，但不建议，因失去了检查的作用：
  // handleChange: ( event: any ) => void
}

interface Todos {
  text: string
  complete: boolean
}

// type State = Array<Todos>
// 或下面这种，更形象化：
type State = Todos[]
type Actions = { type: 'add', text: string } | { type:'remove', idx: number }

const TodoReducer = ( state: State, action: Actions ) => {
  switch (action.type) {
    case 'add':
      return [...state, { text: action.text, complete: false }]
    case 'remove':
      return state.filter((_, i) => action.idx !== i)
    default:
      return state;
  } 
}

const [todos, dispatch] = useReducer(TodoReducer, [])

interface Props {
  children:(
    count: number,
    // 将`setCount`作为props进行传参：
    setCount: React.Dispatch<React.SetStateAction<number>>
    // 返回值为React独有的：JSX.Element
  ) => JSX.Element | null
}

export const Counter: React.FC<Props> = ({ children }) => {
  const [count, setCount] = useState(0)
  return <div>
    {children(count, setCount)}
  </div>
}