first commit
This commit is contained in:
commit
6b641fd067
|
@ -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 = {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
Loading…
Reference in New Issue
Block a user