Functional programming in TypeScript

Functional Programming
in TypeScript
: @binDebug
binDebug WorkSpace
hello@binDebug.io

Agenda
What is
Functional
Programming?
3 Tenets of
Functional
Programming
Features for
Functional
Programming in
TypeScript

What is Functional Programming?

The Functional Paradigm Buzzwords
 Immutability, or Purity.
 Higher Order Functions, or Functions as First-class citizens.
 Pipelining.
 Map-Reduce
 Expressions.
 Tail-call optimizations (available in ECMA 2015).
 Parallelization.
 Lazy evaluation.
 Determinism, or Predictability.

“
”
OO makes code understandable
by encapsulating moving parts.
FP makes code understandable
by minimizing moving parts.
https://twitter.com/mfeathers/status/29581296216
- Michael Feathers

What exactly are “moving parts” here?
 The disposition of a functional system is to change its state. If a system is
functional, then its state, for the most part, is changing.
 Managing the state of an application while structuring it is one of the more
difficult things in software development. This is especially true when the
application can execute code asynchronously.
 There are two parts to code we write –
 Code that computes results (Business Logic)
 Code that performs actions (Persistence Logic)
 Any and every code that contributes towards the changing of state is a
“moving” part.

And how have we dealt with them?
 In the beginning of time there was the procedural world, where everything
was mixed.
 The Objected oriented paradigm brought attention to the individuality of
entities, and thus focused on encapsulation of the “moving” parts.
 Functional Programming, which is in many ways a form of Declarative
Programming, encourages us to focus on computing results rather than
performing actions, thus minimizing the number of “moving” parts, i.e. the
parts that cause the state of the system to change.

A Guide Rope
 Immutable data, first class functions and tail call optimization are language
features that aid functional programming.
 Mapping, reducing, pipelining, recursing, currying and the use of higher order
functions are programming techniques used to write functional code.
 Parallelization, lazy evaluation and determinism are advantageous properties
of functional programs.

The idea is…
 Absence of side effects, i.e. our code doesn’t rely on data outside the current
function, and it doesn’t change data that exists outside the current function.
 Make our code more readable, and thus more maintainable.
Further reading:
Mary Rose Cook: A practical introduction to Functional Programming.
http://bit.ly/2hDmuEs

Tame Side Effects
In Software parlance a side effect is anything that happens to the state of the
system when invoking a function.
The state of a system is shared. So be careful.
Side effects imply dependency, thus difficult to test. That is why mocks exist.
Purely Functional are those functions not allowed to alter state.
System thus becomes predictable. Unit testing is all that much easier.
A natural corollary of pure functions is that since state isn’t being changed, they
are conducive for parallel processing.

Expressions and Statements
Anything that evaluates to a value is referred to as an expression.
2+2 is an expression.
10 > 4 is an expression.
1 === 1 is an expression.
All expressions in JavaScript will return a value and that value will have a type. A
value’s type tells us what kind of thing it is.
A statement is any set of expressions that has an impact on the program in such
that it alters the state. For e.g. assigning a value to a variable, updating the
database, writing to a log file.
Statements are executed to cause some effect. Expressions are executed for
their result. Statements usually update the state. Expressions return a value.

Higher Order Function
Function that does at least one of the following:
accept another function(s) as parameter(s),
and return a function as a result.
Higher order functions enable composition of functionality not through complex
inheritance structures, but through substituting behaviour according to a strict
definition – the function signature.

Suppose we want to double the numbers in an array, and throw away the even
numbers. (Code source: http://bit.ly/2ptSnaV)
The non-functional way:
The functional way:

Purity of Function
https://staltz.com/is-your-javascript-function-actually-pure.html

Understanding ES5, ES2015 and
TypeScript
 ES5 is what most of us have used for years.
 The new version of JavaScript is ES2015, also known as “ES6”, and offers a
multitude of new features around scoping, modules, arrow functions etc. ES6
is not widely supported in today's browsers, so it needs to be transpiled to
ES5.
 TypeScript is a superset of ES6, which means all ES6 features are part of
TypeScript, but not all TypeScript features are part of ES6.

Evolution of TypeScript
 In the 4 years since it went from an internal to a public open source, open
design project, the combination of static type checking, transpiling and
tooling in TypeScript has become something of a behind-the-scenes success,
especially on large projects.
 Like with C# and the .NET framework, one would expect Microsoft projects
like Visual Studio Code (and the Office Online apps) to be written in
TypeScript. But now, even frameworks like Angular and Ionic have been
written in TypeScript.

Features for Functional Programming in
TypeScript

The Functional TypeScript
TypeScript itself is written entirely in functional style code with no classes at all.
 Spread/Rest Operators.
 Lambda expressions (also introduced in ES2015).
 Tagged Union Types.
 Type Safety (duh!).
 Type Inference.

Spread/Rest Operator
A Spread syntax allows in-place expansion of an expression for the following
cases:
1. Array
2. Function call
3. Multiple variable destructuring
Rest parameters works in the opposite direction of the spread syntax, it collects
an indefinite number of comma separated expressions into an array.

Spread/Rest Operator: Syntax
function add(...numbers) {
return numbers[0] + numbers[1];
}
add(3, 2);

Angular 2 Pipes: PipeTransform Interface

Angular 2 Pipes: A Pipe Implementation

Lambda expressions
Or the fat arrow. “=>”
JavaScript does offer anonymous functions, but then we do have to write the
function keyword a lot.
Lambda concentrates on the expressions at the soul of a function, thus making
the code more readable.
So what was
Is now

Union Type
A union type specifies several valid types for a value. If we have a value that has
a union type, we can only access members that are common to all types in the
union.
For example, Car | Plane | Tank can only be a car or a plane or a tank.
This offers a typesafe alternative to every time we use the any keyword when we
do not know the type of a variable at design time.
We use the vertical bar (|) to separate each type.
Essentially,
function MyCar(): Car | Plane | Tank {
//Can be a car or a Plane or a Tank.
//Who am I kidding, it can only be a car.
}

Tagged Union Types
 Tagged Union Types, which in other functional programming languages are
referred to as Discriminant Union Types, is a Union Type whose member types
all define a discriminant property of a literal type.

Type Inference
 TypeScript does not need you to explicitly describe types at every possible
opportunity.
 TypeScript has a rich type inference system that will "fill in the blanks" for us.
let numbers = [2, 3, 5, 7, 11];
numbers = ['this will generate a type error'];
 Type inference can also work through context, which is handy with callbacks.

You, the developer!
Last, but not the least, we are the biggest feature as far as Functional aspects
go.
Thinking of in terms of what to do, of composability, of computing, and
abstracting out persistence is really an approach. Languages merely offer the
tools.

Functional programming in TypeScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Functional programming in TypeScript (20)

Recently uploaded (20)

Functional programming in TypeScript