Volkan Gul San Francisco Software engineer at Github Linkedin - - PowerPoint PPT Presentation

Volkan Gul

San Francisco Software engineer at

@ugurvolkangul

Github

@birkasecorba

Linkedin

https://anchorage.com/careers/ We believe in a safe and accessible economy, strengthened by institutional investment. We’re working to advance participation in the digital asset class.

Types in Javascript: a case for TypeScript

Outline

➔ What is the problem?

Current status of JS and Some common issues in Javascript in real world.

➔ How can we solve it?

What type of solutions do we have to fix these issues

➔ Examples & Features

Example solutions to our initial problems

Javascript has a type system*

T h e P r

• b

l e m *but, honestly, it is not the best

typeof x // number // string // function // undefined // boolean // symbol // object

Quote

At the source of every error which is blamed on the computer you will find at least two human errors, including the error of blaming it on the computer.

• Tom Gibb

Errors you’ve seen before

• x is not a function
• cannot read property ‘x’ of a

null/undefined

T h e P r

• b

l e m

const x = 10; const y = x.parent; // Where error really happens return y.name; // Where error is reported

Errors you won’t see coming

T h e P r

• b

l e m

function isItTooMuch(m) { if (m.count > 2) { return 'yes'; } else { return 'no'; } } isItTooMuch(5) // => ?

Quote

Only half of programming is coding. The other 90% is debugging.

function fiveDividedBy(number) { return 5 / num; } fiveDividedBy(5) // => ?

Linters

T h e S

• l

u t i

• n

s

function fiveDividedBy(number) { return 5 / num; } fiveDividedBy(5) // => ?

Added bonuses

• Enforce coding styles
• Cleaner code
• More optimized code
• Before runtime errors

Custom type checking

T h e S

• l

u t i

• n

s

/** * @param greeting: greeting prompt * @param toWhom: list of people to greet * @param howManyTimes: how many times should function greet */ function greet(greeting, toWhom, howManyTimes){ … } // Correct usage greet('hello there', ['General Grievous'], 1); // Incorrect usages greet(); greet('hi', 'Master Kenobi');

Custom type checking

T h e S

• l

u t i

• n

s

function greet(greeting, toWhom, howManyTimes) { } if (typeof greeting !== 'string') { throw new Error('first argument must be a string') } if (!Array.isArray(toWhom)) { throw new Error('second argument must be an array') } if (typeof howManyTimes !== 'number') { throw new Error('third argument must be a number') } if (arguments.length !== 3) { throw new Error('must be called with 3 arguments') }

Tests

Solutions like custom type checking should be paired with extensive test coverage to be really effective. The question you should be asking is “can somebody (or me in the future) change and break my code without realizing they broke the logic?”

React PropTypes

T h e S

• l

u t i

• n

s

import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: PropTypes.string };

Static type checking

T h e S

• l

u t i

• n

s

What is Typescript

It is a strict syntactical superset of JavaScript, and adds

• ptional static typing to the language.

Static type checking

T h e S

• l

u t i

• n

s

JS -> TS

Static type checking

E x a m p l e s

Static type checking

E x a m p l e s

Static type checking

E x a m p l e s

Static type checking

• Typeahead for argument types and return type as you write

the function

E x a m p l e s

Static type checking

• Function description and JSdocs documentation on hover

E x a m p l e s

Static type checking

• Meaningful errors pre-runtime

E x a m p l e s

Static type checking

• Optional parameters and default values

E x a m p l e s

Conclusion

• Javascript doesn’t give us enough type errors
• It is time consuming and difficult to manage custom type error handling
• It is tedious to find hidden bugs caused by type mismatch
• Tools like linters and static type checkers helps us to maintain, document

and optimize our code with almost no overhead.

References & Docs

Type Systems Will Make You a Better JavaScript Developer - React Conf 2017 Jared Forsyth

https://www.youtube.com/watch?v=V1po0BT7kac

Typescript Docs

https://www.typescriptlang.org/

Why I Was Wrong About TypeScript - GOTO 2018 TJ VanToll

https://www.youtube.com/watch?v=AQOEZVG2WY0

Create React App Docs

https://create-react-app.dev/docs/adding-typescript/