first commit

README.md

@@ -0,0 +1,175 @@
+# 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 = {
+
+}
+```
+