• TypeScript logo. Source: Adapted from m-a-ge 2017.
    image
  • Monthly Active Users (MAU) on GitHub for TypeScript sees rapid growth since 2015. Source: Frederickson 2018.
    image
  • TS code transpiles to JS code. Source: Ohri 2017.
    image
  • TypeScript is a superset of JavaScript. Source: Neeman 2015, slide 8.
    image
  • Example shows TS code and its equivalent JS code. Source: Scriptol 2019.
    image

TypeScript

userimg
arvindpdmn
1029 DevCoins
userimg
deepti001
14 DevCoins
userimg
mohanjo
7 DevCoins
3 authors have contributed to this article
Last updated by deepti001
on 2019-04-15 00:57:41
Created by arvindpdmn
on 2019-04-09 08:37:04

Summary

 image
TypeScript logo. Source: Adapted from m-a-ge 2017.

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.

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
image

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.

Discussion

  • Why do we need TypeScript when there's already JavaScript standardized by ECMA?
     image
    TS code transpiles to JS code. Source: Ohri 2017.

    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?
     image
    TypeScript is a superset of JavaScript. Source: Neeman 2015, slide 8.

    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?
     image
    Example shows TS code and its equivalent JS code. Source: Scriptol 2019.

    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.

Sample Code

  • function buildName(firstName: string, lastName?: string) : string {
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
     
    let result1 = buildName("Bob");                  // works correctly now
    let result2 = buildName("Bob", "Adams");         // ah, just right
     
    console.log(`result1 is ${result1}
    result2 is ${result2}`)

References

  1. Abdeen, Mohamed. 2017. "I am in love with TypeScript, Here 12 TypeScript tips i wanna share …" Medium, May 10. Accessed 2019-04-08.
  2. Anderson, Tim. 2015. "Microsoft snubs Codeplex, moves big projects to GitHub." The Register, January 15. Accessed 2019-04-08.
  3. Bandi, Jonas. 2018. "Here is why you might NOT want to use TypeScript — Part 1: Alternatives." Medium, April 05. Accessed 2019-04-08.
  4. Bekkhus, Simon. 2018. "[RFC] Migrate Jest to TypeScript." facebook/jest, Pull Requests, GitHub, December 27. Accessed 2019-04-08.
  5. Dodds, Kent C. 2019. "paypal-scripts now supports TypeScript as well as JavaScript." PayPal Engineering, on Medium, January 21. Accessed 2019-04-08.
  6. Embrey, Blake. 2018. "A Brief History of Types (with TypeScript)." GitHub, November 11. Accessed 2019-04-08.
  7. Ewerlöf, Alex. 2016. "When should I use TypeScript?" freeCodeCamp, March 24. Accessed 2019-04-08.
  8. Foley, Mary Jo. 2012. "Who built Microsoft TypeScript and why." ZDNet, October 05. Accessed 2019-04-08.
  9. Frederickson, Ben. 2018. "Ranking Programming Languages by GitHub Users." January 25. Accessed 2019-04-08.
  10. Hanselman, Scott. 2012. "Why does TypeScript have to be the answer to anything?" October 02. Accessed 2019-04-08.
  11. Hejlsberg, Anders. 2017. "What's new in TypeScript?" Channel9, MSDN, Build 2017, May 08. Accessed 2019-04-08.
  12. Hoban, Luke. 2015. "Angular 2: Built on TypeScript." Microsoft Blogs, TypeScript, March 05. Accessed 2019-04-08.
  13. Ide, James. 2018. "[RFC] First-class support for TypeScript in the Expo SDK." expo/expo, GitHub, September 01. Accessed 2019-04-08.
  14. Jackson, Joab. 2012. "Microsoft augments JavaScript for large-scale development." IDG News Service, InfoWorld, October 01. Accessed 2019-04-08.
  15. Kundel, Dominik. 2017. "10 TypeScript Features You Might Not Know." Moin World!, June 18. Accessed 2019-04-08.
  16. Lardinois, Frederic. 2015. "Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language." TechCrunch, March 05. Accessed 2019-04-08.
  17. Nance, Jared. 2017. "TypeScript vs. JavaScript: Should You Migrate Your Project to TypeScript?" Stackify, September 20. Accessed 2019-04-08.
  18. Neeman, Nitay. 2015. "Why do we need TypeScript?" SlideShare, November 25. Accessed 2019-04-08.
  19. Ng-Book-2. 2019. "Angular 7: TypeScript." ng-book 2. Accessed 2019-04-08.
  20. Ohri, Sachin. 2017. "TypeScript to the rescue." Chapter 1, TypeScript 2.x By Example, December, Packt Publishing Limited. Accessed 2019-04-08.
  21. Osmani, Addy. 2015. "Exploring EcmaScript Decorators." Medium, July 09. Accessed 2019-04-08.
  22. Ram, Mohan. 2018. "Decorate your code with TypeScript decorators." codeburst, on Medium, December 26. Accessed 2019-04-08.
  23. Savkin, Victor. 2016. "Angular: Why TypeScript?" Medium, July 22. Accessed 2019-04-08.
  24. Scriptol. 2019. "TypeScript: transition language to the future JavaScript." Scriptol. Accessed 2019-04-08.
  25. Sułkowski, Tomek. 2018. "TypeScript — Tips & Tricks." Medium, October 28. Accessed 2019-04-08.
  26. Turnbull, Matt. 2018. "TypeScript With Babel: A Beautiful Marriage." I Am Turns, August 29. Updated 2019-02-12. Accessed 2019-04-08.
  27. TypeScript. 2019a. "Friends of TypeScript." TypeScript. Accessed 2019-04-08.
  28. TypeScript Docs. 2019a. "JSX." Accessed 2019-04-08.
  29. TypeScript Docs. 2019b. "Functions." Accessed 2019-04-08.
  30. You, Evan. 2018. "Plans for the Next Iteration of Vue.js." The Vue Point, on Medium, September 30. Accessed 2019-04-08.
  31. m-a-ge. 2017. "TypeScript / official or unofficial logo." exercism/meta, Issues, GitHub, August 07. Accessed 2019-04-08.

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
image

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.

Tags

See Also

Further Reading

  1. TypeScript Docs. 2019b. "TypeScript in 5 minutes." Accessed 2019-04-08.
  2. Tomaszewski, Jack. 2018. "Why TypeScript is the best way to write Front-end in 2019." Medium, December 24. Accessed 2019-04-08.
  3. Abdeen, Mohamed. 2017. "I am in love with TypeScript, Here 12 TypeScript tips i wanna share …" Medium, May 10. Accessed 2019-04-08.
  4. Turnbull, Matt. 2018. "TypeScript With Babel: A Beautiful Marriage." I Am Turns, August 29. Updated 2019-02-12. Accessed 2019-04-08.
  5. Hejlsberg, Anders. 2017. "What's new in TypeScript?" Channel9, MSDN, Build 2017, May 08. Accessed 2019-04-08.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
3
1
1029
2
0
14
1
0
7
1465
Words
1
Chats
6
Edits
3
Likes
427
Hits

Cite As

Devopedia. 2019. "TypeScript." Version 6, April 15. Accessed 2019-06-27. https://devopedia.org/typescript