ts

App.tsx

import React, { useState } from 'react'
import Counter from './Counter'

interface Props {
  name: string
}
const HelloWorld: React.FC<Props> = ({ name }) => {
  const [state] = useState < { fullname: string | null }>({fullname: ""})
  return <div>hello {name}</div>
}

interface FormProps<T> {
  values: T
  children: (values: T) => JSX.Element
}

const Form = <T extends {}> ({ values, children }: FormProps<T>) => {
  return children(values)
}

function App() {
  return (
    <div>
      <Form< { lastName: string | null }> values={{ lastName: '' }}>
        {values => <div>{values.lastName}</div>}
      </Form>
        {/* <TextField
          text="nice"
          handleChange={(e) => {
            e.preventDefault()
          }}
          person={{ firstName: 'bob', lastName: 'jim' }}
        /> */}
        <Counter>
          {({ count, setCount }) => (
            <div>
              {count}
              <button onClick={() => setCount(count + 1)}> + </button>
            </div>
          )}
        </Counter>
    </div>
  )
}

export default App

Counter.tsx

import React, { useState } from 'react'

interface Props {
  children: (data: {
    count: number
    setCount: React.Dispatch<React.SetStateAction<number>>
  }) => JSX.Element | null
}

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

export default Counter

TextField.tsx

import React, { useState, useRef } from 'react'

interface Person {
  firstName: string
  lastName: string
}

interface Props {
  text: string
  ok?: boolean
  i?: number
  fn?: (bob: string) => string
  person: Person
  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

interface TextNode {
  text: string
}

const TextField: React.FC<Props> = ({ handleChange }) => {
  const [count, setCount] = useState<TextNode>({ text: 'nice' })
  const inputRef = useRef<HTMLInputElement>(null)
  const divRef = useRef<HTMLDivElement>(null)

  return (
    <div ref={divRef}>
      <input ref={inputRef} onChange={handleChange} />
    </div>
  )
}

export default TextField

tmp.ts

const last = <T>(arr: T[]) => {
  return arr[arr.length - 1]
}

const l = last([1, 3, 4])

const l2 = last<string>(['1', 'fd'])

const makeArr = <X, Y = any>(x: X, y: Y): [X, Y] => {
  return [x, y]
}

const v = makeArr(5, 7)
const v2 = makeArr('a', 3)
const v3 = makeArr<string | null, number>(null, 3)

const makeFullMake = <T extends { firstName: string; lastName: string }>(
  obj: T
) => {
  return {
    ...obj,
    fullName: obj.firstName + ' ' + obj.lastName
  }
}

const v4 = makeFullMake({ firstName: 'Jam', lastName: 'jojo' })
const v5 = makeFullMake({ firstName: 'Jam', lastName: 'jojo', age: 88 })

interface Tab<T> {
  id: string
  position: number
  data: T
}

type NumberTab = Tab<number>
type StringTab = Tab<string>