1 of 35

@samlanning @samlanning

How TypeScript is transforming the JavaScript ecosystem

Sam Lanning

2 of 35

About Me

​

  • Developer advocate for Semmle
    • (formerly core developer for LGTM.com)
  • Been writing JavaScript for 15+ years
  • Passionate about Open Source, Security, Cryptography, Code Quality, Lighting …�… and TypeScript.
  • Prefers dark themes to light themes
  • Twitter/GitHub/NPM: @samlanning

Securing software, together

Twitter / GitHub: @samlanning

3 of 35

JavaScript’s popularity

​

Securing software, together

Twitter / GitHub: @samlanning

4 of 35

JavaScript’s popularity

​

http://www.modulecounts.com/

Securing software, together

Twitter / GitHub: @samlanning

5 of 35

JavaScript’s popularity

​

https://octoverse.github.com/projects#languages

Securing software, together

Twitter / GitHub: @samlanning

6 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

7 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

8 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

9 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

10 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

11 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

12 of 35

Large JavaScript Applications

​

Securing software, together

Twitter / GitHub: @samlanning

13 of 35

Large JavaScript Applications

​

“Types exist in JavaScript whether you choose to use tooling which can reason about them for you or not.”

James Henry - Microsoft MVP for TypeScript

Securing software, together

Twitter / GitHub: @samlanning

14 of 35

Static Typing for Javascript

​

Securing software, together

Twitter / GitHub: @samlanning

15 of 35

Static Typing for Javascript

​

Securing software, together

Twitter / GitHub: @samlanning

16 of 35

Introducing TypeScript

​

  • Introduces static typing to JavaScript:�“JavaScript that scales”
  • TypeScript syntax is a superset of JavaScript
  • TypeScript does not replace JavaScript
    • Made concessions to account for dynamic nature of JavaScript
    • Closely tracks the ECMAScript standard
  • Lots and lots of tooling: IDE Integration with jump-to-definition, intellisense / auto-completion, error detection, refactoring etc...

TypeScript: State of the Union - James Henry - https://youtu.be/4nwb-kplv-k

Securing software, together

Twitter / GitHub: @samlanning

17 of 35

// @ts-check�- or -

--checkJs

Securing software, together

Twitter / GitHub: @samlanning

18 of 35

Introducing TypeScript

​

Securing software, together

Twitter / GitHub: @samlanning

19 of 35

Introducing TypeScript

​

Securing software, together

Twitter / GitHub: @samlanning

20 of 35

Introducing TypeScript

​

Demo Time! (1/4)

Securing software, together

Twitter / GitHub: @samlanning

21 of 35

Does it actually make a big difference?

​

Securing software, together

Twitter / GitHub: @samlanning

22 of 35

Does it actually make a big difference?

​

Securing software, together

Twitter / GitHub: @samlanning

23 of 35

External NPM Modules

​

Securing software, together

Twitter / GitHub: @samlanning

24 of 35

External NPM Modules

​

Demo Time! (2/4)

Securing software, together

Twitter / GitHub: @samlanning

25 of 35

External NPM Modules

​

  • Want to use NPM modules in our TypeScript projects
  • Most NPM modules are just JavaScript, don’t have type information
  • We can create type definitions for each NPM module we use
    • Lots of duplicated work, across all TypeScript projects that use an NPM module

Securing software, together

Twitter / GitHub: @samlanning

26 of 35

DefinitelyTyped

​

Securing software, together

Twitter / GitHub: @samlanning

27 of 35

DefinitelyTyped

​

> npm install @types/lodash

Securing software, together

Twitter / GitHub: @samlanning

28 of 35

DefinitelyTyped

​

Demo Time! (3/4)

Securing software, together

Twitter / GitHub: @samlanning

29 of 35

Bundled Types

​

{

"name": "awesome",

"author": "Vandelay Industries",

"version": "1.0.0",

"main": "./lib/main.js",

"types": "./lib/main.d.ts"

}

​

Securing software, together

Twitter / GitHub: @samlanning

30 of 35

Bundled Types

​

Demo Time! (4/4)

Securing software, together

Twitter / GitHub: @samlanning

31 of 35

Bundled Types

​

Write your NPM project in TypeScript?

Securing software, together

Twitter / GitHub: @samlanning

32 of 35

Securing software, together

Twitter / GitHub: @samlanning

33 of 35

Summary

​

  • TypeScript makes it easier to write JavaScript applications at scale
    • Introducing Static-Typing
      • Catch many common mistakes
    • Adding lots of tooling: auto complete, jump-to-def, refactoring etc…
  • We need type definitions for the NPM packages we use, that are just written to JavaScript
  • DefinitelyTyped is a massive repository of many type definitions for thousands of packages
    • All made available as @types/ packages on NPM
  • More and more NPM packages are starting to bundle types
  • More and more NPM packages are starting to be written in TypeScript
    • Removing the need for manually writing them, and ensuring they’re always in sync

Securing software, together

Twitter / GitHub: @samlanning

34 of 35

Rate the Session

​

​

Session page on conference website

O’Reilly Events App

Securing software, together

Twitter / GitHub: @samlanning

35 of 35

http://semmle.com

@Semmle

Thank You

@samlanning

@samlanning

Sam Lanning

Writing npm (JavaScript) libraries using TypeScript

2:35pm–3:15pm Thursday

Live Coding ONLY

Portland 252

Follow along: github.com/samlanning/typescript-talks

  • Come get stickers!
  • Rate the session
  • Come to second talk