Still not using TypeScript?

I've been using TypeScript since version 1.3 on a professional project, and it has consistently improved my productivity in front-end development. Many developers still use plain JavaScript. Whenever I talk with them about TypeScript, it's easy to convince them to make the switch. Here are the key reasons to use TypeScript 😃

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Note: there are other great projects for improving front-end development, such as Babel or Flow, but I won't cover them in this post.

#TypeScript is mature

TypeScript was created in 2013 and is under very active development. You can see for yourself how active the TypeScript repository on GitHub is. The project is open-source, backed by Microsoft, and widely adopted by major front-end projects such as Angular. TypeScript is also an official language at Google (announced at ng-conf 2017).

You can be confident in the future of TypeScript.

#TypeScript is easy to use, no complex ceremony

TypeScript is well integrated with many IDEs (Visual Studio, Visual Studio Code, WebStorm, Atom, Sublime Text, etc.) and toolchains (Gulp, Grunt). You can set up your first development environment in under 2 minutes.

The compilation is very fast and won't slow down your workflow. I work on a project with about 15,000 lines of TypeScript. The first build takes a few seconds, then the TypeScript compiler only recompiles changes, making subsequent builds almost instant (about one second).

The TypeScript compiler generates sourcemaps, so you can easily debug your code in the browser or your favorite IDE.

#TypeScript is easy to learn

TypeScript is a superset of JavaScript. This means any JavaScript file is a valid TypeScript file, so you don't have to learn a new language from scratch. You can then add types and use TypeScript-specific features.

// Valid in JavaScript and TypeScript
function toLower(str) {
    return str.toLowerCase();
}

// TypeScript
function toLower(str: string) {
    return str.toLowerCase(); // You'll get autocompletion :)
}

The documentation is complete and well organized: TypeScript documentation. You'll also find great answer to your questions on StackOverflow.

#TypeScript improves productivity

TypeScript is a typed language. This enables code editors to provide useful features that assist you throughout development.

• auto-completion: write code faster, discover existing functions and avoid typing errors
• Refactoring: you can rename a symbol with confidence
• Discover some errors at build time instead of runtime (need to enable some compiler options)

function sample(str: string) {
    return
        str.toLowerCase(); // Unreachable code
}

function sample(str: string | null) {
    return str.toLowerCase(); // ERROR (str can be null)
}

TypeScript allows you to use ES next features. The code will be transpiled to ES5 by the compiler. For instance, you can use:

• class
• import
• async/await
• iterator
• for…of
• Template literals
• enumeration

You'll write smaller, cleaner code. TypeScript doesn't introduce syntax that isn't part of the JavaScript specification. It just allows you to use new features before all browsers support them.

#TypeScript works great with external libraries

TypeScript was created with interoperability in mind. So, you can use external libraries not written in TypeScript such as JQuery, angularjs or kendo-ui. You'll find typings for thousands of projects. Also, you can install them with one command line:

npm install --save @types/kendo-ui

If the library you use doesn't provide type definitions, you can write them yourself or disable type verification:

// declare the global object of the library as "any" to prevent type verification
declare var mylib: any;

// Use it
mylib.function1("", "");

#You might already be using it

Even if you are using JavaScript, your IDE might be using TypeScript to provide autocompletion, refactorings, quick fixes, and some type validations. In this case, the TypeScript engine runs in a less strict mode than with TypeScript files, so it cannot detect all the errors it could detect in a TypeScript file. Currently, Visual Studio and Visual Studio Code are using the TypeScript engine to power the JavaScript editor.

#Migration from JavaScript

If you are working on a JavaScript project, you can migrate to TypeScript incrementally. Any JavaScript file is valid TypeScript, so you can simply rename *.js files to .ts and compile them. You can then annotate your code with type information (variables, arguments, return types). Once types are added, you can tighten the compiler options to catch more issues. Enable flags one at a time, since enabling them all at once can produce many compilation errors. These errors are a good thing: they surface potential runtime exceptions that are often difficult to track down.

{
    "compilerOptions": {
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitUseStrict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictNullChecks": true,
        "suppressExcessPropertyErrors": false,
        "suppressImplicitAnyIndexErrors": false
    }
}

If you don't want to convert your code to TypeScript, you can still benefit from the TypeScript compiler by adding a single line at the top of your JS files: // @ts-check. The compiler will infer types or use JSDoc comments when available to provide type checking. This mode is less powerful than using TypeScript files, but it's a great way to start moving toward a better experience 😃 You'll find more info about this comment in the documentation.

#Conclusion

I hope you are now convinced to stop writing plain JavaScript and give TypeScript a try, or at least adopt another language that offers the same benefits. Feel free to leave a comment if you think I missed something or if you disagree.

Do you have a question or a suggestion about this post? Contact me!