Still not using TypeScript?

I've been using TypeScript since version 1.3 on a professional project. I think it improves my productivity in front-end development. Lots of people still use JavaScript. When I speak with them, it's very easy to convince them to switch to TypeScript. Here's the key reasons to use TypeScript 😃

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

Note: there are other great projects to improve the front-end development such as babel or flow, but I won't write about them in this post.

#TypeScript is mature

TypeScript was created in 2013 and its development is very active. You can check by yourself how active is the TypeScript repository on GitHub. The project is open-source, backed by Microsoft, and well adopted by major front-end projects such as Angular. Plus, Typescript is 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 IDE (Visual Studio, Visual Studio Code, WebStorm, Atom, Sublime Text, etc.) and toolchains (Gulp, Grunt). You'll be able to set up your first development environment in less than 2 minutes.

The compilation is very fast and won't slow down your development process. I work on a project with about 15000 lines of TypeScript. The first build lasts a few seconds, then the TypeScript compiler will compile only changes, so it's almost instant (about one second).

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

#TypeScript is easy to learn

TypeScript is a superset of JavaScript. This means a JavaScript file is a valid TypeScript file and you won't have to learn a new language from zero. Then, you can 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 allows the code editor to provide useful features to help you in developing your application.

• 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 a smaller and cleaner code. However, TypeScript don't introduce syntaxes that are not 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 project you use doesn't provide type definitions, you can write them by 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 little by little. Indeed, a JavaScript file is valid in TypeScript. So, you can just rename *.js file to .ts and compile the files. Then, you can annotate your code with type information (variables, arguments, return type). Once you add types, you can set the compiler options to find more issues in the code. You should enable flags one by one because it can create lots of compilation errors. But, these errors are good. I mean this will prevent some runtime exceptions that are sometimes hard to detect.

{
    "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 also get the benefit of the TypeScript compiler by adding a single line at the top of your js files // @ts-check. The compiler will infer types or use the JSDoc comments when available to provide type checking. This mode is less powerful than using TypeScript files, but it's a good way to start the migration to a better world 😃 You'll find more info about this comment in the documentation.

#Conclusion

I hope you are now convinced you should not write JavaScript anymore. Instead, you can use TypeScript, or any other languages that provide at least the same functionalities. Don't hesitate to leave a comment if you think I forgot something or if you think I'm wrong.

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