Make the front end bullets fly -TypeScript

Jeff Atwood’s law

JavaScript disadvantages

However, despite the popularity of JavaScript, which accounts for almost half of all Internet applications, the language design has been criticized. As Ryan Dahl, the creator of Node, pointed out, there are also some shortcomings in the design of Node. Otherwise, he wouldn’t have used TypeScript as the primary language in the new server-side framework Deno.

For its part, Deno may not be a viable replacement for Node, especially since Node has been around for a decade and is already a mainstay of front-end engineering, with countless server-side applications running around the world. Deno is still Demo at this point. This may not be the best time to learn Deno, but it’s certainly the best time to learn TypeScript. It’s going to be a new era for JavaScript developers, a new era of building big apps.

The pit of tread

There was a time when we stumbled through a lot of holes in the development and debugging process, and when we faced the refactoring of a project code with great intensity, we were scared because we weren’t sure how many landmines were buried in weakly-typed JavaScript code, and maybe you planted them yourself.

JavaScript functions can take any type of argument, which may seem flexible, but can lead us to Bug hell if we’re not careful.

function func(anything) {
    return;
}
Copy the code

Strongly typed languages like Java, which report errors if parameters are not of a specific type, can be cumbersome in defining variables, but can largely avoid low-level but insidious bugs.

Delay the introduction of the TypeScript

TypeScript is a superset of JavaScript that follows the latest ES6 specification and makes up for JavaScript’s shortcomings in large-scale application development. TypeScript has obvious advantages in static type checking, code refactoring, and language services, which are JavaScript’s weaknesses.

In addition, the front-end interview process often tests some JavaScript conversion dark magic, such as +String can be converted to Number type. I personally don’t think this is a good idea, even if it’s very lean, because it makes refactoring difficult and difficult after a long time at the expense of readability and maintainability.

The famously weakly typed language JavaScript in strings, Numbers, and the date type direct implicit type conversion makes the inflows and outflows function object type can’t peep, cause in the process of team development, emphasis on writing code comments become commonplace things, become extremely important to code annotated, otherwise new team members are difficult to immediately take over project.

TypeScript is a great way to solve this problem. Instead of submitting a separate document that explains the code in detail, TypeScript clearly records every object’s properties, method parameters, and so on.

Basic introduction to TypeScript

TypeScript supports almost the same data types as JavaScript, and it also provides useful enumerated types for us to use.

• Boolean value

let isDone: boolean = false;

• digital

let decLiteral: number = 6;

• string

let name: string = “bob”;

• An array of

let list: number[] = [1, 2, 3];

• Tuples Tuple

let x: [string, number];

• The enumeration

enum Color {Red, Green, Blue}

• Any value

let notSure: any = 4;

• A null value

function warnUser(): void {

alert(“This is my warning message”);

}

let unusable: void = undefined;

• Null, and Undefined

let u: undefined = undefined;

let n: null = null;

• Never

function infiniteLoop(): never {

while (true) {

}

}

• Object

declare function create(o: object | null): void;

The union type, also known as the selection type, satisfies one or the other.

let age: number | string;

Class, class is the core of TS, using TS development, most of the code is written in the class.

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

Furthermore, classes have public, private, and protected modifiers.

class Person {
    public name: string;
    private age: number;
    public constructor(theName: string) { this.name = theName; }
    protected move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`); }}Copy the code

• Public Anyone can access it

• Private Private is accessible only from within the class

• Protected is only available to subclasses

The Interface is used to name these types and define contracts for your code or third-party code.

interfaceSquareConfig { color? :string; width? :number;
}

function createSquare(config: SquareConfig) :{color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});
Copy the code

Among them “?” Indicates an optional parameter.

function test(a:string, b? :string, c:"ctz"){ console.log(a); console.log(b); console.log(c); }Copy the code

Generics. In languages like C# and Java, generics can be used to create reusable components that can support multiple types of data. This allows users to customize data types to use components.

function identity<T> (arg: T) :T {
    return arg;
}

let myIdentity: <T>(arg: T) = > T = identity;
Copy the code

class Calc<T> {
    a: T;
    b: T;
}
Copy the code

The future of the TypeScript

In short, TypeScript is like its anachronistic self to Javascript!

As the technology evolves, JavaScript will eventually become more like TypeScript and we will be able to develop very large applications with greater ease.

In the future, I believe that any application that can be implemented in JavaScript will be written in TypeScript.

“Any application that can be written in JavaScript, will eventually be written in
TypeScript.
“

This article is just a primer, but more on TypeScript usage needs to be explored and accumulated in practice.

TypeScript official documentation address: http://www.typescriptlang.org/docs/home.html.

Author: Black Horse big front end Cuitianze