# TypeScript

## Summary


JavaScript is now truly cross-platform. It works within browsers. It's being used to build standalone desktop applications. Enabled by Node.js, it's also being used for server-side execution. It can work on any OS. The problem with JavaScript is it's lack of scalability. It's not ideal for large projects maintained by large teams. 

TypeScript makes JavaScript scalable. It does this by supporting static typing so that type mismatches can be caught at compile time rather than at run time. When coupled with tools that understand TypeScript, developers benefit from autocompletion, navigation and refactoring. TypeScript came out of Microsoft and later open sourced.

TypeScript doesn't replace JavaScript. TypeScript transpiles to JavaScript. In fact, a project can contain a mix of both languages. Eventual execution is within a JavaScript runtime.

## Discussion

### Why do we need TypeScript when there's already JavaScript standardized by ECMA?

JavaScript is a dynamically typed language. This can be seen as a useful feature but for projects maintained by large teams, it can be a source of bugs. For example, a function expects an integer but a string is passed wrongly. JavaScript will allow this until an error occurs at runtime. TypeScript allows for **static types**. This means that type mismatch errors are caught during development. 

JavaScript before ES6 didn't allow for classes and modules. This made JavaScript coding difficult for programmers coming from C#, Java or other object-oriented languages. While ES6 remedies this, not all browsers support ES6. Babel offered a solution to this problem. Developers can use the latest ECMAScript version but use Babel to transpile their code into a lower version that's well supported by browsers. TypeScript compiler can also **transpile** TypeScript code to any chosen ECMAScript version. This means developers can use latest developments to TypeScript today without worrying about what browsers support. 


### Isn't TypeScript doing the same thing as AtScript, Flow, Dart or CoffeeScript?

AtScript was invented at Google with the same goals as TypeScript. In 2015, given the popularity of TypeScript, Google discontinued AtScript and adopted TypeScript for its Angular 2 framework. Later versions of TypeScript started supporting features introduced by AtScript.  

Flow was invented at Facebook to provide static typing for JavaScript. Thus, it's an alternative to TypeScript. However, we've seen projects move away from Flow to TypeScript, including Facebook's own Jest project. 

Comparing Dart with TypeScript is not useful. Dart compiles to native code but transpiles to JavaScript for web apps. Dart is not JavaScript although it can interoperate with JavaScript. TypeScript on the other hand *is JavaScript*. Existing JavaScript code can be treated as TypeScript. 

Although CoffeeScript transpiles to JavaScript, it's syntax is different from JavaScript. CoffeeScript hides JavaScript syntax from the programmer but TypeScript doesn't do this. In fact, CoffeeScript is great for Ruby programmers since the syntax is Ruby-like. In this context, Luke Hoban commented, 

> CoffeeScript is to Ruby as TypeScript is to Java/C#/C++


### Which projects have adopted TypeScript?

The official TypeScript site lists a number of projects that have adopted the language. Among the JS frameworks and libraries to use TypeScript are Angular, Ember, NativeScript, Ionic, Babylon.js, AMCharts and ZoomCharts. Others include Asana, Aurelia, BitHound, Ericsson, EBay Classifieds, Hobsons, JetBrains, Kaggle, Palantir, Ubisoft, and many more. 

In September 2018, Expo SDK started working towards supporting TypeScript, in addition to Flow. They noted that TypeScript is stable and expressive. Just as importantly, Babel 7 supports TypeScript and therefore Expo can continue using Babel-based builds. 

Vue.js announced that its own codebase for version 3.x and beyond will be based on TypeScript. It's API will be designed to make use of TypeScript's type interference although TypeScript will remain optional for apps. 

Atlassian's project that enables beautiful drag-and-drop interfaces moved to TypeScript in December 2018. Storybook, used for building UI components, is now in TypeScript. In January 2019, Facebook's Jest project decided to move away from Flow to TypeScript. PayPal's `paypal-scripts` is another example. 


### Could you mention some key features of TypeScript?

Static type checking is an important part of TypeScript but this optional. This means that we can add type checking gradually to a project, especially legacy JavaScript project. The language has new useful types: tuple, enum, any, void, never. Variable declarations can specify `let` or `const`. For object members, we can use `readonly`. Type assertions are similar to type-casting in other languages. A variable can take one of many specified types. Generics are allowed. 

Classes with properties, methods, and constructors are now possible with TypeScript. Constructors, and functions in general, can be overloaded. Via interfaces, abstractions are made explicit and this makes code easier to read and maintain. 

JavaScript code generated by the TypeScript compiler is very readable, which means that debugging is possible on the generated code without using source maps. 

Other ES6 features such as module imports and destructuring are supported. TypeScript supports decorators (also available in ES7).  


### Could you share some tips or best practices for beginners to TypeScript?

The best way to initialize a new project is using `tsc --init`. File `tsconfig.json` will be created. It's possible to extend this configuration file with another file so that we can target different ECMAScript versions if necessary. 

It often a good practice to store generated JS files in a separate folder. It's common to have TS files in `src/` and JS files in `dist/`. Compiler option `--outfile` helps with this; or you could use `outDir` option in the config file. 

You can define a type using either `type` or `interface`. The latter is more flexible because it can be extended to create another interface or implemented in a class. Interfaces can be defined multiple times, adding new members with each definition. 

When indexing a data type with a key, such as in a tuple, or accessing a member of an interface, use `keyof` to create a type for the keys. This enables type checking on the keys. 

Many more tips are part of official documentation, in a Zalando blog post, and in a Medium post.


### What are the different file extensions for TypeScript?

Typescript source code files are usually saved with `*.ts` extension. When transpiled, the equivalent `*.js` JavaScript files are created.

Files with `*.d.ts` extension contain **type definitions**. Your TypeScript code may be using third-party JavaScript libraries. How can we then ensure type safety when your TypeScript code is calling these JavaScript libraries? This is where these type definitions become useful for IDEs and TypeScript compiler. 

JSX is an XML-like syntax for designing UI components. It was popularized by React. TypeScript supports this and files that use this syntax have extension `*.tsx`. When these files are transpiled, they generate either JSX files (to be consumed by other transpilers such as Babel) or JS files that are understood by React or React Native. 

## Milestones

2010

Microsoft starts working on creating TypeScript. It's not a new language. Rather, it's an augmentation of JavaScript. One motivating factor is that the Bing Maps team has difficulty making JavaScript scale. There are probably other teams within Microsoft facing similar issues with JavaScript. 

Oct  
2012

Microsoft releases TypeScript specification and open sources its own TypeScript compiler. Visual Studio gets a plugin for TypeScript. The creator of C#, Anders Hejlsberg, notes that JavaScript was designed as a scripting language, for small to medium-sized projects. TypeScript's static typing will address the scalability problem. He adds,

> JavaScript is an entirely dynamic language that has no static typing, and static typing is really the thing that powers today's rich IDEs.

Jul  
2014

Microsoft completes its move of TypeScript codebase from CodePlex to GitHub. The idea is to go where the community is active, and attract Linux and Mac developers. 

2015

This year sees many releases of TypeScript: 1.4 (Jan) to 1.7 (Nov). Among the features/types introduced are `let`, `const`, template strings, type guards (`typeof`, `instanceof`), ES6 modules, ES6 destructuring, decorators, `namespace` keyword, `tsconfig.json` config file, JSX, abstract classes, async/await, and `this` typing. 

Mar  
2015

It's announced that **Angular 2** will be built using TypeScript. Over the next few years, this influences more developers to adopt TypeScript. 

Jul  
2016

**TypeScript 2.0** is released. Type definitions are now available via NPM at `@types`. This deprecates earlier approaches: DefinitelyTyped, TSD, Typings. As on April 2019, more than 6,300 packages have type definitions.

Jul  
2018

**TypeScript 3.0** is released. 

Dec  
2018

**Babel 7** is released with support for TypeScript. This means that TypeScript can be transpiled to JavaScript using Babel. Thus, TypeScript-based projects can continue to benefit from Babel's rich ecosystem and plugins. TypeScript compiler can still be used for type checking.