Live Note

Remain optimistic

Numeric enums

1
2
3
4
5
6
7
8
9
10
11
12
enum Direction {
UP,
DOWN,
LEFT,
RIGHT,
}

function move(length: number, direction: Direction): void {
console.log(`move: ${direction} ${length}meters.`)
}

move(10, Direction.UP)

String enums

1
2
3
4
5
6
enum Direction {
UP = "UP",
DOWN = "DOWN",
LEFT = "LEFT",
RIGHT = "RIGHT",
}
Read more »

Reducer

Reducer 將多個 input fold 成一個 output.

1
2
3
4
const add = (a, b) => a + b
const multiply = (a, b) => a * b
const concatString = (a, b) => a + b
const concatArray = (a, b) => [...a, ...b]

Transducer

Transducer 做的事情大致相同,但是與普通的 reducer 不同的是,它可以通過多個 function 組合而成.而普通的 reducer 不能組合,因爲他們接受兩個參數,但是只返回一個值,所以不能將這次的結果傳入下一個 reducer:

1
2
3
4
5
6
7
// reducer
f: (a, c) => a
g: (a, c) => a

// transducer
f: (reducer) => reducer
g: (reducer) => reducer
Read more »

Time Picker Pnl in React Native

Why i write this component?
First, I found a lib called @react-native community/picker and wrote my code based on it. When I was done, it worked fine in ios, but when I turned on my android. Oh, my God, it’s not working. This component is platform based. It behaves differently on different platforms.

Then I found another library called react-native-picker, but it was too ugly and not customizable. My UI designer wouldn’t let me use this kind of thing, so I wrote my own component.

Note: This component is not perfect, but it works fine in my work. If you have any suggestion or issue, please let me know. You can build your own component based on this code.
If this code help you, please follow me on Github. XD(am greedy)

Requirements:

  • react-native-modal: pop up modal for time picker

Time Picker Pnl

Read more »

Generics

1
2
3
4
5
6
7
8
function foo<T>(arg: T): T {
return arg
}

function len<T>(arg: Array<T>): Array<T> {
console.log(arg.length)
return arg
}

Generics Types

1
2
3
4
5
6
7
8
9
10
11
function foo<T>(arg: T): T {
return arg
}

interface fooInterface<T> {
(arg: T): T
}

let myFunction: <T>(arg: T) => T = foo
let otherFunction: { <T>(arg: T): T } = foo
let interfaceFunction: fooInterface<number> = foo
Read more »

Function Types

Typing the function

1
2
3
4
5
6
7
function foo(x: number, y: string): string {
return x + y
}

let fo = function (x: number, y: string): string {
return x + y
}

Writing the function type

1
2
3
4
5
6
let foo: (x: number, y: string) => string = function (
x: number,
y: string
): string {
return x + y
}

Inferring types

1
2
3
let foo: (x: number, y: string) => string = function (x, y) {
return x + y
}
Read more »