What Is Typescript and Why Would I Use It in Place of JavaScript

What is TypeScript and why would I use it in place of JavaScript?

I originally wrote this answer when TypeScript was still
hot-off-the-presses. Five years later, this is an OK overview, but look
at Lodewijk's answer below for more depth

1000ft view...

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

To get an idea of what I mean, watch Microsoft's introductory video on the language.

For a large JavaScript project, adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run.

It is open source, but you only get the clever Intellisense as you type if you use a supported IDE. Initially, this was only Microsoft's Visual Studio (also noted in blog post from Miguel de Icaza). These days, other IDEs offer TypeScript support too.

Are there other technologies like it?

There's CoffeeScript, but that really serves a different purpose. IMHO, CoffeeScript provides readability for humans, but TypeScript also provides deep readability for tools through its optional static typing (see this recent blog post for a little more critique). There's also Dart but that's a full on replacement for JavaScript (though it can produce JavaScript code)

Example

As an example, here's some TypeScript (you can play with this in the TypeScript Playground)

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

And here's the JavaScript it would produce

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Notice how the TypeScript defines the type of member variables and class method parameters. This is removed when translating to JavaScript, but used by the IDE and compiler to spot errors, like passing a numeric type to the constructor.

It's also capable of inferring types which aren't explicitly declared, for example, it would determine the greet() method returns a string.

Debugging TypeScript

Many browsers and IDEs offer direct debugging support through sourcemaps. See this Stack Overflow question for more details: Debugging TypeScript code with Visual Studio

Want to know more?

I originally wrote this answer when TypeScript was still hot-off-the-presses. Check out Lodewijk's answer to this question for some more current detail.

What is the use of typescript when it is eventually transpiled into javascript?

1) Won't typescript stop transpilation when it finds an error

If you want to prevent Typescript from transpiling when there's such an error, you should set noEmitOnError to true, in your tsconfig.json, eg:

{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

Otherwise, typing errors will not prevent the code from being transpiled.

2) Eventually, every typescript code is converted into JS code. Then what is the use of typescript

Because it's relatively easy to fix compile-time errors, but it can be much more difficult to fix runtime errors. For a particularly bad case, consider a section of code which only gets run rarely, and you forget to cast a string to a number before using + on it. So, instead of someVariable + 5 resulting in a number which gets 5 added to it, it results in a string which gets 5 concatenated to it, which is unexpected, and may eventually cause a bug later down the line. If this eventually results in an error, the ultimate source of the error may be difficult to track down. This could waste a lot of programmer's time in a large codebase, especially if the person who wrote the original code isn't the one debugging.

With Typescript, this rare runtime error is turned into a compile-time error, when you try to use a string where a number is required. This is an easy 5-second fix, which is quite an improvement.

Of course, there are other opinion-based advantages and disadvantages of Typescript (it takes some time to learn, and everyone working on the code needs to know it to use it), but this is one sort of advantage to keep in mind.

why we go for angular while we have typescript?

In Angular you have:

• code organization layers like modules, components, services
• all of above layers are easy to reuse and easy to test
• templates with two-way data binding
• a lot of services and libraries provided by other ppl (routing, ngBootstrap, calendars, HttpClient)

In pure typescript (which literally means pure JavaScript) you have to write everything by your own. You do not have any support and rules of framework.

What the purpose of Typescript?

Typescript is create just to ease the javaScript development. Am i right ?

Yes, Typescript offers several syntactical features that are either (1) not present in JavaScript, or (2) part of a future JavaScript proposal and not supported by most browsers.

CoffeeScript exists for a similar reason, except that its syntax is quite different from JavaScript and it does not attempt to be a superset of JavaScript.

or it has something more to offer ?

What else would you have in mind?

can in use in html pages ? is it compatible with all the modern browsers ?

It is possible to compile and run TypeScript within a web page, though the browser will not do this for you automatically. typescript-compile provides the ability to do this, but there are big performance drawbacks to doing so.

Typically, one would compile TypeScript into JavaScript ahead of time and include the compiled JavaScript in a page. You can set up a build process to do this, and ASP.NET projects have built-in functionality to do Typescript -> JavaScript compilation without any manual steps.

In general, static languages are type checked at compile time. Is typescript also type checked at compile time?

Is TypeScript also type checked at compile time?

Yes. In fact, other than a very small aspect related to enums, TypeScript doesn't exist at runtime at all. TypeScript compiles to JavaScript, which is a dynamically-typed language.

We haven't done anything yet. ... So when did typescript start type checking？

VSCode, like many IDEs, will run TypeScript under the covers as you're working to type-check the code and report issues, which the IDE then reports to you. The IDEs run TypeScript in "no emit" mode (it doesn't produce its usual JavaScript output) so it's just doing syntax checking (because it has to to do its job) and type checking (its primary job).

Is TypeScript's purpose to be used for manipulating the DOM like JavaScript is?

TypeScript can be used for anything JavaScript can be used for. It's JavaScript plus a layer of type information (and usually adopts newer JavaScript features fairly quickly), which is then compiled to JavaScript for deployment and use in the wild.

When using TypeScript to manipulate the DOM, you'll need type information for the DOM; see this question and its answers for more about getting DOM type information into your project.

---

Related Topics