# 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
```ts
const product : Product = {
    name: "Product One",
    creator: { id: 1, username: "user_one"}
}
```

and can declare enum
that is easy on recognize type
```ts
enum PRODUCT_TYPE {
    PRODUCT,
    SERVICE
}
```
Interface 
can see it like object 
we declare name and its type 
```ts
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
```ts
type Color = "red" | "blue" | {
    r: number,
    g: number,
    b: number
}
```


Creation of Interface
```ts
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
}

```ts
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
> }
```ts
function func2 ( colorType: Color, UserInterface?: User, direct?: {name: string} , type?: "1"| "2"): string  {
    return "Hello World"
}
```

# React Component
```ts
import React from "react"
```

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

```ts
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 )
```ts
class TypescriptClass extends React.Component<TypescriptComponentProps, TypescriptComponentState> {
    render(){
        return (
            <div>Hellow</div>
        )
    }
}
```



Function Component 
we use type as  React.FunctionComponent<Props>  
so when we call "props" , we will see what we defined in Props
compare with old :
```jsx
const TypescriptComponent = (props) => {
    return (
        <div>Name is {props.qty}</div>
    )
}
```

It just different on : React.FunctionComponent<TypescriptComponentProps> 
```ts
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 : 
```ts 
TypescriptComponent.propTypes = { }
```

In Function or Class Componennt
when we want declare defaultProps 
it can have intellisense better what in props
```ts
TypescriptComponent.defaultProps = {

}
```