MorningSpace Lab

The Path to TypeScript

by MorningSpace

Aug, 2018

## Why
## Industry * [Google wrote Angular2 in TypeScript to replace AtScript]( * [LoopBack next is written in TypeScript]( * [Dojo2 is totally rewritten from JavaScript to TypeScript]( * [Slack spent 6 months to rewrite JS app by TypeScript]( * [TypeScript support in Babel 7]( * TypeScript as type checker * Babel as emitter * [Webpack add TypeScript type check into its code]( * [Visual Studio Code is written entirely in TypeScript]( * Dogfooding * ...
## Popular * npm-stat: [Download statistics for package typescript]( * GitHub: [The watch, star, fork #]( * Stackoverflow: [Top most loved programming languages]( * RedMonk: [Programming language rankings](
## Active * Move fast * Usually one release per one or two months * See [Roadmap]( * High quality * PR accepted after 55000 tests passed * High quality nightly builds
## What
## Definition * *A typed superset of JavaScript that compiles to plain JavaScript* —— []( * *It starts and ends with JavaScript* —— []( * ...
## Benefits * Great tools enabled by static types * Auto-completion * Static code analysis * Refactoring support by tools * Features from the future, today!
## ES6/7, optional typing and more
## ES6/7 The standardized specification for the JavaScript language * [let, const, deconstructing]( * [Rest/optional/default parameters, and arrow functions]( * [Class]( * [Symbol]( * [Modules, import/export]( * [Decorator]( * [await/async]( * ...
## Optional typing * In strictly typed languages, you have to declare everything all the time * In TypeScript, you don’t!
## And more Features not in ES6/7 * [Interface]( * [Generics]( * [Namespaces]( * [Advanced Types]( * Union/Intersection types * Discriminated unions * Literal types * ... * ...
## Declaration files * Similar to header file in C/C++ * Provide type declaration after the fact (the plain old JavaScript code) * 3000+ type declaration files for most popular JavaScript frameworks collected and wrapped as npm package by open source community * [GitHub]( * [TypeSearch](
## IDE Support * Visual Stuidio Code * Other editors * [tsserver(Node.js)]( + editor plugin
## What: Demo
## Demo: [Basic]( * Start from a single .js * What happens if rename to .ts while leave everything else unchanged? * What happens if start to add type? * It starts to help catch bugs * What happens if start to introduce type declaration? * Thousands of lines of declarations known by heart before * What happens if in watch mode? * See how tsc transpile to ES5 code * What happens if change target to ES6? * See how tsc transpile to ES6 code
## Demo: [Null Check]( * [One billion dollar mistake]( by [Tony Hoare]( from Mircosoft Research at QCon London, 2009 * What if turn compiler into strict mode? * Control flow based type analysis * Pretty hard to cheat the much much deeper type check
## Demo: [Nullable Type Inference]( * See what TypeScript shows on each if-else branch in strict mode * TypeScript knows better then you on type inference
## Demo: [Discriminated Unions]( * What happens if hover over _shape.kind_ in switch expression? * What happens if hover over _shape_ in each case block? * What happens if hover over _shape_ after switch block while comment out some case? * What happens if hover over _shape_ after switch block? * Exhaustiveness checking * TypeScript can infer type based on context very smartly
## How
## Basic Use * Create a default tsconfig.json * Include .js files by enabling _allowJs_ option * In the middle of process when convert to TypeScript * Still want to bundle all JavaScript code into a single file with the output of new TypeScript code * Start to write TypeScript without changing any existing code * Introduce type declarations for dependencies to reduce need of looking up doc frequently
## Simple Transformation * Start to transform some JavaScript files into TypeScript files w/o big effort. * Simple rename .js to .ts * Some tweaks in tsconfig.json as needed to avoid tsc complains.
## Deep Transformation * Transform more JavaScript files into TypeScript files * Add more TypeScript features incrementally * Fix transpiling errors by modifying source code or tweakling tsconfig.json * Generate type declaration file by your own * tsc -d * enable _declaration_ in tsconfig.json
## Other topics * Debug TypeScript code * Visual Studio Code * Command line * [Other ways]( to apply type * Use JSDoc types annotations in .js * Use @ts-check comment to enable type check in .js individually
## taskme * A [project]( used to demonstrate how to migrate a project from JavaScript to TypeScript step by step. * Each branch represents a certain stage during the migration path. * Check GitHub [Compare changes]( view to see difference between each two branches.
## More
## More Materials * [TypeScript web site]( * [TypeScript playground]( * What's new in TypeScript by [_Anders Hejlsberg_]( * [Build 2017]( * [Build 2018]( * [Migrating from JavaScript]( * [Complex typescript definitions made easy]( * [Will TS have a purpose after ES6/ES7 is widely adopted?]( * [ECMAScript compatibility table]( * [TypeScript In A Nutshell](


(MorningSpace Lab)

Created by MorningSpace