first commit

This commit is contained in:
S.long 2020-05-08 16:48:49 +07:00
commit 6b641fd067

175
README.md Normal file
View File

@ -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 = {
}
```