TypeScript

Article Info

Contributed by
4 authors

Last updated on
2022-02-15 11:53:03

TypeScript Data Types
TypeScript Tooling
JavaScript to TypeScript Migration
TypeScript in Angular
TypeScript in React
Object-Oriented Programming in JavaScript

Article Versions

7 2022-02-15 11:53:03
3356,1312 7,3356

By devbot5S

Migrating blockquotes to markdown syntax
6 2019-04-15 00:57:41
1312,1311 6,1312

By deepti001

Added Sample Code
5 2019-04-14 22:50:17
1311,1301 5,1311

By deepti001

Added a tag 'typescript'
4 2019-04-09 10:33:25
1301,1300 4,1301

By mohanjo

Minor changes.
3 2019-04-09 09:21:48
1300,1299 3,1300

By arvindpdmn

Update to milestones.

Chat Room

Submitting ...

You are editing an existing chat message.
2019-04-15 02:46:28
-

By arvindpdmn

@deepti001 Welcome and congrats on your first contribution to Devopedia!

Nice code samples.

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.

Discussion

Why do we need TypeScript when there's already JavaScript standardized by ECMA?
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?
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?
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.

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

Monthly Active Users (MAU) on GitHub for TypeScript sees rapid growth since 2015. Source: Frederickson 2018.

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.

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}`)

function buildName(firstName, lastName) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
var result1 = buildName("Bob"); // works correctly now
var result2 = buildName("Bob", "Adams"); // ah, just right
console.log("result1 is " + result1 + "\nresult2 is " + result2);

References

Article Stats

1464

Words

Authors

Edits

Chats

Likes

6762

Hits

Cite As

Devopedia. 2022. "TypeScript." Version 7, February 15. Accessed 2024-06-25. https://devopedia.org/typescript

Contributed by
4 authors

Last updated on
2022-02-15 11:53:03

languages tools transpiler static typing typescript

TypeScript Data Types
TypeScript Tooling
JavaScript to TypeScript Migration
TypeScript in Angular
TypeScript in React
Object-Oriented Programming in JavaScript

TypeScript

Discussion

Milestones

Sample Code

References

Further Reading

Article Stats

Cite As

See Also

TypeScript

Discussion

Milestones

Sample Code

References

Further Reading

Article Stats

Author-wise Stats for Article Edits

Cite As

See Also

Login