Assembling IKEA Furniture

Strengthen Your Code With Types

by Jon Nahum

#f2e18-ts-workshop

Jon Nahum

Senior Web Applications Engineer

SBSEG - Counterpart Portal*

Web Technology Enthusiast

Wait, Can or Jon?

Easy...

var C = {
    pronounce: function(language) {
        if (language === 'Turkish') {
            return 'J';
        }
    }
};

function pronounceThisGuysName(lang) {
    return C.pronounce(lang) + 'a' + 'n';
}

pronounceThisGuysName('Turkish');

Jon Nahum

Senior Web Applications Engineer

SBSEG - Counterpart Portal*

How did I get here?

  • 2008 - 2012 - Brandeis University
    • Economics & Business
  • 2012 - 2014 - First Job!
    • Investment Analyst
    • BOOORING - not something I want to do every day.
    • But, our software is cool! 
  • 2014 - 2016 - Brandeis University
    • Computer Science MA program for non-CS undergrads
  • 2016 Move to Israel
    • September 2016 - Web Developer @ Fortis Labs
    • December 2017 - Web Applications Engineer @ Intuit

Agenda

  1. Why Are We Talking About TypeScript
  2. TypeScript Intro
  3. Simple Example
  4. Let's Get Our Hands Dirty

Agenda

  1. Why Are We Talking About TypeScript
  2. TypeScript Intro
  3. Simple Example
  4. Let's Get Our Hands Dirty

History

A Brief History on JavaScript*

  • Eich - "Scheme for the Browser" (1995)
  • Major Redesign and Clean up (1996)
  • ECMAScript as a Standard (1996)
  • ECMAScript 3 (1999)
  • AJAX - Changed everything (2000)
  • ECMAScript 4 (RIP 2008) - We will come back to this
  • ECMAScript 5 - Today's Most Widely Used JavaScript (2012)
  • ECMAScript 6 (2015)
  • ECMAScript 7 (2016)

* Source: auth0.com

History

A Brief History on JavaScript*

  • Eich - "Scheme for the Browser" (1995)
  • Major Redesign and Clean up (1996)
  • ECMAScript as a Standard (1996)
  • ECMAScript 3 (1999)
  • AJAX - Changed everything (2000)
  • ECMAScript 4 (RIP 2008)
  • ECMAScript 5 - Today's Most Widely Used JavaScript (2012)
  • ECMAScript 6 (2015)
  • ECMAScript 7 (2016)

* Source: auth0.com

General Purpose Language!

General Purpose Language - Wannabe

Context

Simple

Interactions

SaaS

SPAs

Servers & Systems

Interoperability

Context - Pain Points

  • Increased Complexity
  • Shared libraries & Dependencies
  • APIs

Maybe we do need a general purpose language...

Also...

  • Abstraction of engine integration & Polyfills
  • Errors in runtime

Context - What Do We Need?

  • ECMAScript
  • Increase the level of code strength
  • Trust dependencies
  • APIs
  • Catch bugs before runtime

Maybe we do need a general purpose language...

I did say IKEA, didn't I?

...without an Instruction Manual, that is

  • Clear
  • Depiction
  • You know before resorting to trial & error

Agenda

  1. Why Are We Talking About TypeScript
  2. TypeScript Intro
  3. Simple Example
  4. Let's Get Our Hands Dirty

TypeScript - Introduction

JavaScript that scales.

 

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

 

Any browser. Any host. Any OS. Open Source.

Source: https://www.typescriptlang.org/

Superset? What do you mean?

ECMAScript**

Frequent Releases

Nightly Builds (@typescript/next)

TypeScript - Introduction

OK, then what is it?

  • A new language or flavor
  • A Superset of JavaScript
  • It is only used in develop-time.
  • Strongly-Typed (@flow, anyone?)
  • Static Type Checking via tsc
  • Transpilation (like babel) - ECMAScript targets

TypeScript - Introduction

What it isn't...

  • Something that the browser or Node.js can read
  • Added help in runtime
  • Solution to all of my problems

TypeScript - Introduction

Agenda

  1. Why Are We Talking About TypeScript
  2. TypeScript Intro
  3. Simple Example
  4. Let's Get Our Hands Dirty

Simple Example

// intro_samples_js.js

function greet(name) {
  return 'Welcome to the Front-End Summit, ' + name + '!';
}
// intro_samples_ts.ts

function greet(name: string): string {
  return `Welcome to the Front-End Summit, ${name}!`;
}

Transpiled (target ECMAScript 5)

Simple Example

Transpiled (target ECMAScript 2015)

// intro_samples_ts.ts

function greet(name: string): string {
  return `Welcome to the Front-End Summit, ${name}!`;
}
"use strict";
// intro_samples_ts.ts
function greet(name) {
    return "Welcome to the Front-End Summit, " + name + "!";
}

"use strict";
// intro_samples_ts.ts
function greet(name) {
    return `Welcome to the Front-End Summit, ${name}!`;
}

TypeScript

Fine, you can annotate types... So, what?

Well,

Catch Errors

Especially in complicated repos

Investigate Code

Automated static type checking

Example please...

TypeScript

OK, let's see it then

function greet(name: string): string {
  return `Welcome to the Front-End Summit, ${name}!`;
}
greet(false);
16:01 $ tsc
intro_samples_ts.ts(10,7): error TS2345: Argument of type 'false' is not assignable to
parameter of type 'string'.

Agenda

  1. Why Are We Talking About TypeScript
  2. TypeScript Intro
  3. Simple Example
  4. Let's Get Our Hands Dirty

The Workshop

  1. Node.js (version 8 is preferred)
  2. Your favorite text editor (VS Code, IDEA, anything with TS integration).

Dependencies

The Workshop

Dependencies

  • Add TypeScript to the global npm
npm install -g typescript
  • Check that it's there
tsc -v
  • Create a new directory
cd ~/dev/FrontEndSummit2018
mkdir TypeScriptWorkshop
mkdir simple_examples
  • Initialize a TypeScript project
tsc --init

TypeScript Presentation

By cannahum

Made with Slides.com

TypeScript Presentation

A Brief Introduction to TypeScript and why we might need it.

  • 537

More from cannahum