176 lines
3.3 KiB
Markdown
176 lines
3.3 KiB
Markdown
|
# 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 = {
|
||
|
|
||
|
}
|
||
|
```
|
||
|
|