ts.md

ref

const divRef = React.useRef<HTMLDivElement>(null);
const myRef = React.useRef<HTMLElement | null>(null)

call back

interface Events {
  on(eventName: string, callback: () => void):void;
  trigger(eventName: string):void;
}

function with generic type as argument

interface ModelAttributes<T> {
  set(value: T): void;
 }

telling ts that our generic type will have some attributes:

interface HasId {
 id?: number;
}

export class Model<T extends HasId>{ 
}

using React.FC

import React from 'react';

interface MobileNumberInputProps {
  text: string;
  type: ButtonTypes;
  options: number[];
  action: ()=> void;
  }
  
  const MobileNumberInput : React.FC<MobileNumberInputProps> = ({text, type, action}) => {
    return (
        <div>hi</div>
    )
}
export default MobileNumberInput;

fa or en

import React from 'react';

type Props = {
  lang: "en" | "fa";
};

const App2 = (props: Props) => {
    const { lang} = props;
    if (lang === "en") {
        return (<div>welcome</div>)
    }
    return (
        <div>
            خوش امدید
        </div>
    );
};

export default App2;

boolean

const testFunc = (value:boolean):void => {console.log(value)}

types on useState

 const [counter, setCounter] = React.useState<number>(0)

You can also use a union type like this <number | null> if you don't have an initial state.