Declare Variable

Every Declaration on typescript have 2 part {VAR_NAME}:{TYPE} = VALUE TYPE : is type of what we declare , it can be interface or type

const product : Product = {
    name: "Product One",
    creator: { id: 1, username: "user_one"}
}

and can declare enum that is easy on recognize type

enum PRODUCT_TYPE {
    PRODUCT,
    SERVICE
}

Interface can see it like object we declare name and its type

interface User {
    id: number,
    username: string
}

Type Type can be create with join many value and type (string , number, interface) and make developer can choose one what they want

type Color = "red" | "blue" | {
    r: number,
    g: number,
    b: number
}

Creation of Interface

interface Product {
    // each sub of interface is equal to creation of type
    name: string,

    // Question mark(?) mean it optional ,
    // when create product , no need implement "qty"
    qty?: number,

    // it can be interface
    creator: User,

    // or it can be type
    color?: Color

    // or it can be direct declare  like interface
    price?: { currency: string , value: number },

    // or direct declare like type
    level?: 1 | 2 | 3,

    // or Array
    details: Array<string>

    // or Enum
    productType: PRODUCT_TYPE
}

Declare Function

On Create Function create from constant structure is

const {name} = (...params) : {ReturnType} => { ...action }

const func = ( colorType: Color, UserInterface?: User, direct?: {name: string} , type?: "1"| "2"): string => {
    return "Hello World"
}

on Function Default

function {name} (...params) : {Return Type} => { ...action }

function func2 ( colorType: Color, UserInterface?: User, direct?: {name: string} , type?: "1"| "2"): string  {
    return "Hello World"
}

React Component

import React from "react"

type TypescriptComponentProps = {
    qty: string
    price: {}
}

interface TypescriptComponentState {
    data: []
}

For Class Component when we call , we use React.Component<Prop, State>
so when we use this.props under class , we will see what we defined in Props ( interface || type ) and when we use this.state under class , we will see what we defined in State ( interface || type )

class TypescriptClass extends React.Component<TypescriptComponentProps, TypescriptComponentState> {
    render(){
        return (
            <div>Hellow</div>
        )
    }
}

Function Component we use type as React.FunctionComponent
so when we call "props" , we will see what we defined in Props compare with old :

const TypescriptComponent = (props) => {
    return (
        <div>Name is {props.qty}</div>
    )
}

It just different on : React.FunctionComponent

const TypescriptComponent: React.FunctionComponent<TypescriptComponentProps> = (props) => {
    
    return (
        <div>Name is {props.qty}</div>
    )
}

Another Advantage of Typescript is when use React Component dont need to declare propTypes any more when we declare type above it will create propTypes for us and information is more clear than use propTypes

No Here :

TypescriptComponent.propTypes = { }

In Function or Class Componennt when we want declare defaultProps it can have intellisense better what in props

TypescriptComponent.defaultProps = {

}