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

Volkan Gul San Francisco Software engineer at Github Linkedin @birkasecorba @ugurvolkangul

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

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

T h e P r o b Javascript has a type l e m system* typeof x // number Quote // string At the source of every error which is // function blamed on the computer you will // undefined find at least two human errors, // boolean including the error of blaming it on the computer. // symbol // object - Tom Gibb *but, honestly, it is not the best

T h e P r o b l e m Errors you’ve seen before - x is not a function - cannot read property ‘x’ of a null/undefined const x = 10; const y = x.parent; // Where error really happens return y.name; // Where error is reported

T h e P r o b l e m Errors you won’t see coming function isItTooMuch( m ) { function fiveDividedBy( number ) { if (m.count > 2) { return 5 / num; return 'yes'; } } else { return 'no'; fiveDividedBy(5) // => ? } } isItTooMuch(5) // => ? Quote Only half of programming is coding. The other 90% is debugging.

T h e S o l u t i o n Linters s function fiveDividedBy( number ) { return 5 / num; } fiveDividedBy(5) // => ? Added bonuses Enforce coding styles ● Cleaner code ● More optimized code ● Before runtime errors ●

T h e S o l u t i o n Custom type checking 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');

T h e S o l u t i o n Custom type checking s function greet( greeting , toWhom , howManyTimes ) { 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 if (typeof greeting !== 'string') { coverage to be really effective. throw new Error('first argument must be a string') } The question you should be asking is “can somebody (or me in the future) if (!Array.isArray(toWhom)) { change and break my code without throw new Error('second argument must be an array') realizing they broke the logic?” } if (typeof howManyTimes !== 'number') { throw new Error('third argument must be a number') } }

T h e S o l u t i o n React PropTypes s import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: PropTypes.string };

T h e S o l u t i o n Static type checking s What is Typescript It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

T h e S o l u t i o n Static type checking s JS -> TS

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

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 ●

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 Typescript Docs https://www.typescriptlang.org/ Type Systems Will Make You a Better JavaScript Developer - React Conf 2017 Jared Forsyth https://www.youtube.com/watch?v=V1po0BT7kac 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/