Typescript - quick start

Let's use TypeScript To create a simple Web application .

install TypeScript

There are two main ways to get TypeScript Tools ：

• adopt npm（Node.js Package manager ）
• install Visual Studio Of TypeScript plug-in unit

Visual Studio 2017 and Visual Studio 2015 Update 3 Included by default TypeScript. If your Visual Studio Not installed yet TypeScript, You can download it .

For the use of npm Users of ：

> npm install -g typescript

Build your first TypeScript file

In the editor , Enter the following code into greeter.ts In the document ：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Compile code

We used .ts Extension , But this code is just JavaScript nothing more . You can directly from the existing JavaScript Copy in application / Paste this code .

On the command line , function TypeScript compiler ：

tsc greeter.ts

The output is a greeter.js file , It contains the same... As in the input file JavsScript Code . Everything is all set. , We can run this using TypeScript Written JavaScript Applied ！

Let's take a look at TypeScript Advanced functions brought by tools . to  person Add arguments to the function : string Type notes , as follows ：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Type notes

TypeScript The type annotation in is a lightweight way to add constraints to functions or variables . In this case , We hope  greeter The function receives a string argument . Then try to put  greeter Change the call to pass in an array ：

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

recompile , You'll see that there was a mistake .

greeter.ts(7,26): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Similarly , Try to delete greeter All parameters of the call . TypeScript It will tell you that this function is called with an unexpected number of parameters . In both cases ,TypeScript Provides static code analysis , It can analyze the code structure and provide type annotations .

It should be noted that despite the mistakes ,greeter.js The file is still created . Even if there are errors in your code , You can still use TypeScript. But in this case ,TypeScript It will warn you that the code may not execute as expected .

Interface

Let's develop this sample application . Here we use the interface to describe a person who has firstName and lastName Object of field . stay TypeScript in , If the structure is compatible only within two types, then these two types are compatible . This allows us to implement the interface as long as we ensure that the structure required by the interface is included , Without explicitly using  implements sentence .

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

class

Last , Let's rewrite this example with a class . TypeScript Support JavaScript New features , For example, it supports class based object-oriented programming .

Let's create a Student class , It comes with a constructor and some public fields . Note that classes and interfaces can work together , Programmers can decide the level of abstraction .

Also note that , Use... On constructor arguments public Equivalent to creating a member variable with the same name .

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

Rerun tsc greeter.ts, You will see the generated JavaScript The code is the same as the original . TypeScript The class in is just JavaScript Short for prototype based object-oriented programming commonly used in .

function TypeScript Web application

stay greeter.html Enter the following in the ：

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

Open... In the browser greeter.html Run this app ！

Optionally ： stay Visual Studio Open in greeter.ts Or copy the code to TypeScript playground. Hover over identifiers to see their types . Note that in some cases their types can be automatically inferred . Re-enter the last line of code , Take a look at the auto completion list and the parameter list , They will be based on DOM Element type . Place the cursor on  greeter On the function , Click on F12 You can trace its definition . And a little bit more , You can right-click the logo , Use refactoring to rename .

These types of information and tools can be used well with JavaScript Working together . added TypeScript Function demonstration , Please check the of this website start part .