types.tsx

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

const TypedOne = <T extends {}>(props: T): React.ReactElement => (
  <span>
    {JSON.stringify(props)}
  </span>
)

function TypedTwo<T extends {}>(props: T) {
  return (
    <span>
      {JSON.stringify(props)}
    </span>
  )
}

interface TypedThreeProps<T> {
  children: (data: T) => React.ReactElement
}

const TypedThree = <T extends {}>({
  children,
}: TypedThreeProps<T>): React.ReactElement => {
  const data = {}

  return children(data as T)
}

interface TypedFourProps<T> {
  action: Promise<T>
  children: (data: T) => React.ReactElement
}

const TypedFour = <T extends {}>({
  action,
  children,
}: TypedFourProps<T>): React.ReactElement => {
  const [data, setData] = useState<T>()

  useEffect(() => {
    action.then(data => setData(data))
  }, [])

  return children(data as T)
}

interface TypedFiveProps<T> {
  action: Promise<T>
  loader?: () => React.ReactElement
  children: (data: T) => React.ReactElement
}

const TypedFive = <T extends {}>({
  action,
  loader: Loader,
  children,
}: TypedFiveProps<T>): React.ReactElement | JSX.Element | null => {
  const [data, setData] = useState<T>()

  useEffect(() => {
    action.then(data => setData(data))
  }, [])

  if (data) {
    return children(data as T)
  }
  return Loader ? <Loader /> : null
}

// --- //

type Foo<T> = T extends { a: infer U, b: infer V } ? U : never;
type Foo2<T, U, V> = T extends { a: U, b: V } ? U : never;

interface TypeAAA {
  a: string
  b: number
}
type AAA = Foo<TypeAAA>

interface TypeBBB {
  a: string
  b: number
}
type BBB = Foo<TypeBBB>


interface TypeAAA2 {
  a: string
  b: number
}
type AAA2 = Foo2<TypeAAA2, string, number>

interface TypeBBB2 {
  a: string
  b: number
}
type BBB2 = Foo2<TypeBBB2, number, string>

export {
  TypedOne,
  TypedTwo,
  TypedThree,
  TypedFour,
  TypedFive,
}



function getSomething<TIPINHO_MAROTO extends string, U = number>(
  param1: TIPINHO_MAROTO,
  param2: U,
) {
  return param1 + param2
}

// const a = getSomething(1, 'a') -- giving error
const b = getSomething('a', 1)
// const c = getSomething<number, string>(1, 'a') -- giving error

const myActionOne = function(): string {
  return 'aaa'
}
const myActionTwo = function(): number {
  return 123
}

function getValue<T>(action: () => T): T {
  return action()
}

const one = getValue<string>(myActionOne)
const two = getValue<number>(myActionTwo)

interface User {
  name: string
  email: string
  password: string
  phone: string
  avatar: string
  createdAt: Date
}

type UserDetaisOmit = Omit<User, 'email' | 'password'>

type UserDetailsPick = Pick<User, 'name' | 'phone' | 'avatar' | 'createdAt'>

type UserDetailsPartial = Partial<User>

function getDetails(user: User): UserDetailsPick {
  return user
}

const userdetails = getDetails({
  name: 'a',
  email: 'a',
  password: 'a',
  phone: 'a',
  avatar: 'a',
  createdAt: new Date(),
})

type SomethingNullable = string | null | undefined

function myFunc<T>(param: NonNullable<T>): NonNullable<T> {
  return param
}

function myFunc2<T>(param: Required<T>): T {
  return param
}

const u: User = {
  name: 'a',
  email: 'a',
  password: 'a',
  phone: 'a',
  avatar: 'a',
  createdAt: new Date(),
}

let u2: User | null = null
if (one === 'a') {
  u2 = u
}

myFunc(u)
// myFunc(u2) -- giving error

myFunc2(u)
// myFunc2(u2) -- giving error

// interface User {
//   name: string
//   email: string
//   password: string
//   phone: string
//   avatar: string
//   createdAt: Date
// }

// type UserDetails = Pick<User, 'name' | 'phone' | 'avatar' | 'createdAt'>

// function getDetails(user: User): UserDetails {
//   return user
// }

// const userDetails = getDetails({
//   name: 'a',
//   email: 'a',
//   password: 'a',
//   phone: 'a',
//   avatar: 'a',
//   createdAt: new Date(),
// })

// console.log({ userDetails })