"Quick start TypeScript" TypeScript functional programming

Posted by formlesstree4 on Thu, 11 Nov 2021 04:51:05 +0100

catalogue

1, Functional programming style

  1. The variable type can be a function

  2. The literal can be a function

  3. The field of the object can be a function

  4. The argument to a function can be a function

  5. The return value of a function can be a function

  6. Parameters and return values are functions

  7. Higher order function

2, No side effects

3, Reference transparency

4, Lazy evaluation

1, Functional programming style

1. The variable type can be a function

We learned a lot of data types in the previous basic part. In functional programming, variable types can also be functions.

This is a common variable type:

let Number: number = 100
//use
console.log(100)

By analogy, this is a function type:

let comparnNumber = function comparnNumber(a: number, b: number){  //Arrow function (A: number, B: number) = > A - B
    return a - b
}
//Using, suppose a is an array
a.sort(conparnNumber)

At this point, comparnNumber is a function type

2. The value (literal) can be a function
//The literal can be a function
//When using functions, we can directly use data types, so can functions

//console.log(5) can also be equivalent to the following:
let exp = 5
console.log(exp)

//let comparnNumber1 = (a: number, b: number) => a - b
//let arr1 = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
//arr1.sort(comparnNumber1) can be equivalent to the following:
let arr1 = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
arr1.sort((a: number, b: number)=> a- b)
3. The field of the object can be a function

The field of an object can also be a function. In fact, what we are talking about here is the method of the object. The method belongs to the field of the object, and the method itself is a function

console.log(arr)
//Object emp1
const emp1 = {
    name: 'join',
    salary: 8000,
    //The field of the object can be a function
    increaseSalary: function(p: number){
        this.salary *= p
    }
}
emp1.increaseSalary(1.1)
console.log(emp1)

//Output results:
{
  "name": "join",
  "salary": 8800
} 
4. Function parameters can be functions

The parameter of the function can also be a function. Let's see below:

let arr = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
function comparnNumber(a: number, b: number){
    return b - a
}
console.log(arr.sort(comparnNumber))  //Here, comparnNumber directly returns data, and () is not required
5. The return value of a function can be a function
//The return value of a function can be a function
function CreatComparn(p: {smallerfirst: boolean} ){  //When there is a boolean type, we'd better use the object field as the parameter
    if(p.smallerfirst){
        return (a: number, b: number) => a - b
    }else{
        return (a: number, b: number) => b - a
    }

}
let arr = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
arr.sort(CreatComparn({smallerfirst: true}))
console.log(arr)

//Output results:
 [1, 3, 3, 5, 5, 6, 66, 88, 98, 100] 
 [100, 98, 88, 66, 6, 5, 5, 3, 3, 1] 
6. Both parameters and return values are functions
//Parameters and return values are functions
function logginComparer(comp: (a: number, b: number) => number) {
    return (a: number, b: number) => {
        //console.log('comparing', a, b)
        return comp(a, b)
    }
}

function comparer(a: number, b: number){
    return a- b
}

function CreatComparer(p: {smallerfirst: boolean} ){
    if(p.smallerfirst){
        return (a: number, b: number) => a - b
    }else{
        return (a: number, b: number) => b - a
    }

}

let arr = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
let cmp = CreatComparer({smallerfirst: true})
arr.sort(logginComparer(cmp))
console.log(arr)

//Output results:
[1, 3, 3, 5, 5, 6, 66, 88, 98, 100] 
7. High price function

Higher order function: a function is a new function superimposed by two or more functions, such as:

  1. The argument to a function can be a function

  2. The return value of a function can be a function

  3. Parameters and return values are functions

    The types inside belong to higher-order functions

2, No side effects

When we need to count the number of function comparisons, the first idea is to define a global variable compCount for statistics. When multiple calls are made, we set the value of compCount to zero. Here is the code:

let compCount = 0
function loggingComparer( comp: (a: number, b:number) => number ){
    return (a: number, b:number) => {
        //Reference global variable compCount
        compCount++
        return comp(a, b)
    }
}
function createComparer(p: {smallerFirst: boolean}){
    if( p.smallerFirst){
        return (a: number, b:number) => a - b
    }else{
        return (a: number, b:number) => b - a
    }
}
let a = [5,2,1,6,7,10,5,25,16,23,11]
const comp = createComparer({smallerFirst: true})
a.sort( loggingComparer(comp))
//If you need to execute again, you need to set the global variable to null
compCount = 0 
a.sort(loggingComparer(comp))
console.log(a)
console.log('compare count', compCount)

However, this method is easy to forget to reset the compCount, so we need to use "closure" (use closure to solve the problem of resetting global variables) to realize the statistics of comparison times:

function logginComparer(logger: (
    a: number, b: number) => void, 
    comp: (a: number, b: number) => number) {

    return (a: number, b: number) => {
        logger(a, b)
        return comp(a, b)
    }
}

function comparer(a: number, b: number){
    return a - b
}

function CreatComparer( p: {smallerfirst: boolean} ){
    if(p.smallerfirst){
        return (a: number, b: number) => a - b
    }else{
        return (a: number, b: number) => b - a
    }

}

function processArray(a: number[]){
    let compCount = 0
    const logger = (a: number, b: number) => {
        console.log('comparing', a, b) //Print log
        compCount++                    //record
    }
    const cmp = CreatComparer({smallerfirst:true})
    arr.sort(logginComparer(logger, cmp))
    return compCount
}

let arr = [1, 3, 5, 3, 6, 5, 88, 66, 98, 100]
let CompCount1 = processArray(arr)
let CompCount2 = processArray(arr)
console.log(arr)
console.log('count comparing', CompCount1, CompCount2)

//Output results:
/*
[log]: "comparing",  3,  1 
[LOG]: "comparing",  5,  3 
[LOG]: "comparing",  3,  5 
[LOG]: "comparing",  3,  3 
[LOG]: "comparing",  3,  5 
[LOG]: "comparing",  6,  3 
[LOG]: "comparing",  6,  5 
[LOG]: "comparing",  5,  3 
[LOG]: "comparing",  5,  6 
[LOG]: "comparing",  5,  5 
[LOG]: "comparing",  88,  5 
[LOG]: "comparing",  88,  6 
[LOG]: "comparing",  66,  5 
[LOG]: "comparing",  66,  6 
[LOG]: "comparing",  66,  88 
[LOG]: "comparing",  98,  5 
[LOG]: "comparing",  98,  66 
[LOG]: "comparing",  98,  88 
[LOG]: "comparing",  100,  5 
[LOG]: "comparing",  100,  88 
[LOG]: "comparing",  100,  98 
[LOG]: "comparing",  3,  1 
[LOG]: "comparing",  3,  3 
[LOG]: "comparing",  5,  3 
[LOG]: "comparing",  5,  5 
[LOG]: "comparing",  6,  5 
[LOG]: "comparing",  66,  6 
[LOG]: "comparing",  88,  66 
[LOG]: "comparing",  98,  88 
[LOG]: "comparing",  100,  98 
[LOG]: [1, 3, 3, 5, 5, 6, 66, 88, 98, 100] 
[LOG]: "count comparing",  21,  9 
*/

In this way, there will be no unnecessary side effects on our whole program, and the program is more conducive to maintenance.

3, Reference transparency

function add(a: number, b: number): number{
    return a + b
}

//The following code is equivalent in terms of reference
//The return value of add(2, 3) is 5, which is no different from the direct use of 5 in console.log(5)
console.log(5)
console.log(add(2, 3))

4, Lazy evaluation

function add(a: number, b: number):number{
    return a + b
}
//Lazy calculation refers to 3 + 4 below. The value of the expression will be calculated only when it is actually called, that is, 7
//javascript does not support lazy calculation, so when calling the add function, the value of 3 + 4 will be passed into the parameter of the add function as a parameter
add(2, 4+3)

Topics: Front-end TypeScript Vue.js