TypeScript fast food tutorial (1) - first acquaintance

TypeScript fast food tutorial (1) - first acquaintance

JavaScript, and perhaps more broadly, various implementations of ECMA Script, have never been controversial since their birth. The premature death of ECMA Script 4 is an important reflection of the seriousness of these debates.

Anyway, there are constant disputes, the status of JavaScript has never been shaken. In response to the problems of JavaScript, languages ​​that can be compiled into JavaScript have been one after the other.

Among them, DART, CoffeeScript and TypeScript are the three most famous ones.

DART was launched by Google, designed by the famous v8 engine author Lars Bak.
DART is very much like a traditional object-oriented language, such as Java.

Let's look at a small example:

class Point{
    number x, y;
    Point(this.x, this.y);
}

class ColorPoint extends Point{
  number color;
  ColorPoint(this.x,this.y,this.color);
}

main(){
  var p = new Point(1,1);
}

how about it? This syntax is more Java-like than ECMA Script 6 requires a constructor() function, right?

Advantages of DART:

1. Widely used in Google
2. Used to write application code in the Fuchsia operating system
3. The syntax is especially suitable for Java/C# users to learn

CoffeeScript is a small language that promotes the good part of JavaScript. The author has a good Ruby foundation, so CoffeeScript is written in a strong dynamic language style.
example:

a = 1
if a is yes
    print (a + ' is yes')

Translated into JavaScript code, it looks like this:

// Generated by CoffeeScript 1.10.0
(function() {
  var a;

  a = 1;

  if (a === true) {
    print(a + ' is yes');
  }

}).call(this);

In order to avoid using operators that compare tricks in JavaScript ==, CoffeeScript provides isoperators to simplify usage ===.
In addition, for the convenience of programmers, CoffeeScript provides yes and on as aliases for true.
Small optimizations like this can be found everywhere in CoffeeScript.

One of CoffeeScript's greatest strengths is that Github's editor, Atom, uses a lot of CoffeeScript in its code. And Atom's plugin can be developed using CoffeeScript.

CoffeeScript's direction is more free, more like a scripting language, which is basically the opposite of DART's traditional language-like direction.

Next, Dangdangdang, our protagonist TypeScript is about to appear.

TypeScript is not inferior to Google's Dart, because it is also a product of Microsoft. His main person in charge is Anders Hejlsberg, who was famous much earlier than Lars Bak. Anders has led the development of great products Turbo Pascal, Delphi and .Net and C#.

TypeScript converts TypeScript to javascript through the tsc tool, and then executes the javascript.

Since TypeScriptv is called Type Script, it is a typed scripting language. Let's start with the type.

Types of TypeScript

Multiple types can be declared - union types

The first thing that makes Type Script different from other similar languages ​​is that it supports a variable that can be of multiple types.

For example, we have a command line parameter, which may be a string or an array of strings. That's fine, let's just declare that there are two types:

var paras: string | string[];
paras = "-a"
paras = ["-a", "-t"]

type guard

Now that the union type is supported, it brings difficulties to static checking. How can this be good? TypeScript provides a type guard function. When TypeScript can confirm that a piece of code is a type, it will check it according to this type.

For example, we judge by the case that paras is string, then in this if block, paras is string. For example:

if (typeof paras === 'string') {
    console.log(paras + " is a string")
} else {
    console.log(typeof paras);
}

non-intrusive type

Allow me to introduce the non-intrusive type system first.
Non-intrusive, that is to say, a class implements an interface, as long as it implements all the methods required by the interface, and does not need to be explicitly explained with implements like Java. This is how it is done in Go, and so is TypeScript. Let's see an example:

interface Point{
    x: number;
    y: number;
}

class ColorPoint{
    color : Color
    constructor(public x ,public y){
        this.color = Color.Black;
    }
}

var cp : Point = new ColorPoint(1,1)

The Point interface defines two variables, x, y. The ColorPoint class implements the Point interface as long as it defines two variables of the same type, x and y. When defining a variable type, you can use Point as its type.

Isn't it more interesting to write with extends than Dart?

However, this is just a syntactic sugar for TypeScript. Let's take a look at the js code generated by tsc. Point is ignored directly:

var ColorPoint = (function () {
    function ColorPoint(x, y) {
        this.x = x;
        this.y = y;
        this.color = Color.Black;
    }
    return ColorPoint;
}());
var cp = new ColorPoint(1, 1);

enum type

TypeScript supports enumeration types. From the point of view of the generated code, the function is quite cool.

Example: TypeScript source code:

enum Color { Red, Green, Blue, Black, White, Yellow };
var color1: Color = Color.Blue;

Generated JavaScript code:

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
    Color[Color["Black"] = 3] = "Black";
    Color[Color["White"] = 4] = "White";
    Color[Color["Yellow"] = 5] = "Yellow";
})(Color || (Color = {}));
;
var color1 = Color.Blue;

numbers and arrays

Numeric types are the same as JavaScript, only the number type is supported.
Arrays can be written as arrays or generically:

var num1: number = 10;
var num2: any = 20;
var num3: number[] = [1, 2, 3];
var num4: Array<number> = [4, 5, 6];

boolean type

TypeScript's boolean type theoretically only supports true and false.
But it is actually possible to assign null and undefined.

example:

var b1 : boolean = undefined;
var b2 : boolean = null;
var b3 : boolean = false;
var b4 : boolean = true;

TypeScript is a checked language

Because TypeScript eventually generates JavaScript code, many of them are compile-time checks. This information is lost when the JavaScript code is generated.

For example, in the Boolean example above, the generated JavaScript code will lose all type information:

var b1 = undefined;
var b2 = null;
var b3 = false;
var b4 = true;

The same is true for numerical examples:

var num1 = 10;
var num2 = 20;
var num3 = [1, 2, 3];
var num4 = [4, 5, 6];

So, to sum up, for basic types, TypeScript mainly performs compile-time checks, including union types and type guards. Once the compilation passes to generate JavaScript, all this type information is lost.