{
{Agenda
Agenda}
}
Type
Systems
TypeScript
Flow
Q&A
4
Slide 8
Slide 8 text
What is a Type System?
5 . 1
Slide 9
Slide 9 text
5 . 2
Slide 10
Slide 10 text
{
{What is a Type System?
What is a Type System?}
}
Set of rules that assigns a property called type to the
various constructs of a computer program, such as
variables, expressions, functions or modules.
5 . 3
Slide 11
Slide 11 text
{
{Nominal vs Structural
Nominal vs Structural}
}
Nominal: compatibility and equivalence of data types is determined
by explicit declarations and/or the name of the types.
Structural: type compatibility and equivalence are determined by the
type's actual structure or de nition.
5 . 4
Slide 12
Slide 12 text
{
{Static vs Dynamic
Static vs Dynamic}
}
Static type checking is the process of verifying the type safety of a
program based on analysis of a program's text (source code).
Dynamic type checking is the process of verifying the type safety of
a program at runtime.
5 . 5
Slide 13
Slide 13 text
5 . 6
Slide 14
Slide 14 text
5 . 7
Slide 15
Slide 15 text
6 . 1
Slide 16
Slide 16 text
{
{What is TypeScript?
What is TypeScript?}
}
Language created by
Microsoft.
Has optional static typing.
Compiles to JavaScript.
Inherits concepts from C#.
Provides language service API.
6 . 2
Slide 17
Slide 17 text
It's always better to catch errors at compile time rather
that at runtime.
6 . 3
Slide 18
Slide 18 text
{
{Benefits of TypeScript
Benefits of TypeScript}
}
Due to static typing, it's more predictable.
Due to modules, namespaces and stronger
OOP, it scales better for larger apps.
Due to compilation step, some errors are caught
compile-time, not run-time.
6 . 4
Slide 19
Slide 19 text
6 . 5
Slide 20
Slide 20 text
{
{Installing TypeScript
Installing TypeScript}
}
Using the Node Package Manager.
npm install --global typescript
6 . 6
Slide 21
Slide 21 text
{
{Compiling TypeScript
Compiling TypeScript}
}
TypeScript is written in .ts les, which can't be used
directly in the browser.
It need to be compiled to vanilla .js rst.
tsc main.ts
6 . 7
Slide 22
Slide 22 text
{
{tsconfig.json
tsconfig.json}
}
Speci es the way TS is compiled.
(autogeneratable with tsc --init)
{
"compilerOptions": {
"target": "es5", // Sets the output JS's version
"module": "commonjs", // Sets the module loader
"outDir": "dist", // Sets output JS files' location
"sourceMap": true, // Allows debugging
"noEmitOnError": true // Do not compile if errors
}
}
6 . 8
Slide 23
Slide 23 text
{
{Language Features
Language Features}
}
6 . 9
Slide 24
Slide 24 text
{
{Static Type System
Static Type System}
}
“Strongly typed languages reduce bugs by 15%.”
6 . 10
Slide 25
Slide 25 text
{
{Basic Types
Basic Types}
}
prede ned in the language:
number, string, boolean, Array, enum,
undefined, null, tuples, any, void, never
6 . 11
Slide 26
Slide 26 text
{
{Live Demo
Live Demo}
}
6 . 12
Slide 27
Slide 27 text
{
{Complex Types
Complex Types}
}
created by the developer
6 . 13
Slide 28
Slide 28 text
{
{Classes
Classes}
}
class Employee {
name: string;
constructor(name: string) {
this.name = name;
}
greet(): string {
return `Hi, my name is #{this.name}`;
}
}
6 . 14
{
{Generics
Generics}
}
Class
Creating a component that can work over a variety of
types rather than a single one.
6 . 17
Slide 32
Slide 32 text
{
{Live Demo
Live Demo}
}
6 . 18
Slide 33
Slide 33 text
{
{Modules
Modules}
}
import / export
6 . 19
Slide 34
Slide 34 text
{
{Live Demo
Live Demo}
}
6 . 20
Slide 35
Slide 35 text
{
{EcmaScript Next
EcmaScript Next}
}
6 . 21
Slide 36
Slide 36 text
{
{Live Demo
Live Demo}
}
6 . 22
Slide 37
Slide 37 text
{
{More than a language
More than a language}
}
TypeScript also provides tooling and language services
for autocompletion, code navigation and refactoring.
6 . 23
Slide 38
Slide 38 text
{
{tssserver
tssserver}
}
Plugins for:
Tide(Emacs)
VS Code TypeScript Support
TypeScript-Sublime-Plugin(Sublime
Text)
6 . 24
Slide 39
Slide 39 text
{
{Type Definition Files
Type Definition Files}
}
{lib}.d.ts
Distributed via NPM
npm install --save @types/jquery
6 . 25
Slide 40
Slide 40 text
{
{TypeScript and Angular
TypeScript and Angular}
}
6 . 26
Slide 41
Slide 41 text
7 . 1
Slide 42
Slide 42 text
Flow is a static type checker for JavaScript.
7 . 2
Slide 43
Slide 43 text
{
{Flow
Flow}
}
Developed by Facebook
Not a compiler, but
checker
Goal: No runtime errors
7 . 3
Slide 44
Slide 44 text
Flow checks your code for errors through static type
annotations.
// @flow
function square(n: number): number {
return n * n;
}
square('2'); // Error!
7 . 4
Slide 45
Slide 45 text
A lot of the time, Flow can understand your code
without any types at all.
TypeScript doesn't catch this without the "noImplicitAny" ag.
// @flow
function square(n) {
return n * n;
}
square('2'); // Error!
7 . 5
Slide 46
Slide 46 text
Type annotations can also be written as comments.
// @flow
function strLen(x) /* : string */ {
return x.length;
}
strLen('Hello, world!');
7 . 6
Slide 47
Slide 47 text
{
{Live Demo
Live Demo}
}
7 . 7
Slide 48
Slide 48 text
Flow only does type checking and relies on Babel or
ow-remove-types or some other tool to remove type
annotations.
TypeScript implements both a type checker and a
compiler that emits plain JavaScript.
7 . 8
Slide 49
Slide 49 text
When developers argue about Static vs Dynamic
Typing.
8
Slide 50
Slide 50 text
{
{Should I use a type checker?
Should I use a type checker?}
}
initial effort to introduce a checker is low
but: a type system is a complex thing
there seems to be little or no impact on
productivity
9
Slide 51
Slide 51 text
{
{My recommendation
My recommendation}
}
if your project does not live for long: no
if your project is really simple: no
if there is a chance you will need to refactor the
thing: yes
if your system is very important or even crucial for
the success of your company: yes
if people enter or leave your team frequently: yes
10