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