Meetup Paris TypeScript #17 - Functional Programming

Do you want to take a look on Functional Progamming with TypeScript?
In this speech, we are going to introduce the paradigm basics with this language.

1. Paris TypeScript January 8th 2018
2. Premier Field Engineer @spontoreau In ❤️ with Co-organizer
6. type MyFunctionType = { (value: string): boolean; }; // or interface MyFunctionInterface { (value: string): boolean; };
8. let total = 0; let add = (nb: number) => total += nb; add(1); // total equals 1 add(2); // total equals 3 add(3); // total equals 6
9. let total = 0; let isNegative = () => total < 0; let result1 = isNegative(); // false total--; let result2 = isNegative(); // true
10. let add = (nb1: number, nb2: number) => nb1 + nb2; let result1 = add(1, 2); // result1 equals 3 let result2 = add(result1, 3); // result2 equals 6 let result3 = add(result2, 4); // result3 equals 10 let result4 = add(result2, 4); // result4 equals 10
12. const total = 0; const add = (nb: number) => total += nb; type Person = { firstName: string, lastName: string }; const p: Person = { firstName: "Sylvain", lastName: "Pontoreau" }; p.firstName = "anotherFirstName";
13. type Person = Readonly<{ firstName: string, lastName: string }>; const p: Person = { firstName: "Sylvain", lastName: "Pontoreau" }; p.firstName = "anotherFirstName";
14. const personArray: ReadonlyArray<Person> = [{ firstName: "Sylvain", lastName: "Pontoreau" }, { firstName: "Bill", lastName: "Gates" }]; personArray.push({ firstName: "Satya", lastName: "Nadella" });
15. type Person = Readonly<{ firstName: string, lastName: string }>; const person: Person = { firstName: "Sylvain", lastName: "Pontoreau" }; const clone: Person = { ...person, firstName: "anotherFirstName" }; https://github.com/facebook/immutable-js
16. const sum = (numbers: ReadonlyArray<number>) => { let result = 0; numbers.forEach((n: number) => { result += n; }); return result; }; const result = sum([1, 2, 3, 4]); // result equals 10
17. const sum = (numbers: ReadonlyArray<number>): number => { return numbers.length ? numbers[0] + sum(numbers.slice(1)) : 0; }; const result = sum([1, 2, 3, 4]); // result equals 10
18. const handleCase1 = () => "Returns a result for case 1"; const handleCase42 = () => "Returns a result for case 42"; const handleDefaultCase = () => "Returns a default result"; const valueToCheck = Math.random() * 42; const result = ((check) => { switch(check) { case 1: return handleCase1(); case 42: return handleCase42(); default: return handleDefaultCase(); } })(valueToCheck);
19. type Condition<TValue> = { (value: TValue): boolean; }; type Execute<TValue, TResult> = { (value: TValue): TResult; }; type Pattern<TValue, TResult> = { condition: Condition<TValue>, execute: Execute<TValue, TResult> }; const when = <TValue, TResult>( condition: Condition<TValue>, execute: Execute<TValue, TResult>) => { return { condition, execute }; };
20. const match = function<TValue, TResult>( value: TValue, defaultExecute: Execute<Tvalue, TResult>, ...patterns: Pattern<TValue, TResult>[]): TResult { if (patterns.length > 0) { const when = patterns[0]; return !when.condition(value) ? match( value, defaultExecute, ... patterns.slice(1)) : when.execute(value); } else { return defaultExecute(value); } }
21. const handleCase1 = () => "Returns a result for case 1"; const handleCase42 = () => "Returns a result for case 42"; const handleDefaultCase = () => "Returns a default result"; const valueToCheck = Math.random() * 42; const result = match( valueToCheck, handleDefaultCase, when((v) => v === 1, handleCase1), when((v) => v === 42, handleCase42) );
22. const result = case (valueToCheck) { when 1 -> { return handleCase1(); } when 42 -> { return handleCase42(); } when value if (value !== 1 && value !== 42) -> { return handleDefaultCase(); } };
23. const post = <TValue>(url: string) => { return (value: TValue) => { return fetch(url, { headers: { "Accept": "application/json", "Content-Type": "application/json", }, method: "POST", body: JSON.stringify(value), }); }; }; type Person = { firstName: string, lastName: string, } const postPerson = post<Person>("url"); postPerson({ firstName: "Sylvain", lastName: "Pontoreau", }).then((response) => { // Do something }); const promise = post("url")(person);
24. interface FormatResult { (n: number): string; } interface Square { (n: number): number } const formatResult = (n: number) => `Result is ${ n }`; const square = (n: number) => n * n; const pipe = (format: FormatResult, square: Square) => { return (n: number) => format(square(n)) }; const result = pipe(formatResult, square)(42);
25. declare global { interface Object { pipe<T, TResult>(this: T, next:(value:T) => TResult): TResult; } } Object.prototype.pipe = function<T, TResult>(this:T, next:(value:T) => TResult): TResult { return next(this); }; const nb = Math.random() * 100; const pipeResult = nb.pipe(square).pipe(formatResult);
26. const nb = Math.random() * 100; const result = nb |> square |> formatResult;
27. const compose = <TValue, TFirstReturn, TSecondReturn>( function1: (value: TFirstReturn) => TSecondReturn, function2: (value: TValue) => TFirstReturn ) => (value: TValue) => function1(function2(value)); const kebabToSnakeCase = (s: string) => s.replace("-", "_"); const toUpper = (s: string) => s.toUpperCase(); const toScreamingSnakeCase = compose(kebabToSnakeCase, toUpper); const result = toScreamingSnakeCase("kebab-case"); // result: KEBAB_CASE
28. class Composition<TValue, TResult> { private constructor(private readonly func : (x : TValue) => TResult) { } static compose<TValue, TResult>(func : (x : TValue) => TResult) { return new Composition(func); } compose<TNextValue>(f : (x : TNextValue) => TValue) : Composition<TNextValue, TResult> { return new Composition(x => this.func(f(x))) } execute(value: TValue) : TResult { return this.func(value); } } const result = Composition.compose(kebabToSnakeCase).compose(toUpper).execute("kebab-case");