A Preliminary Study of TypeScript

A Preliminary Study of TypeScript

What is TypeScript? How is it different from JavaScript? Is it worth learning TypeScript? Next, I will introduce TypeScript, I will describe the process from scratch to HelloWorld, and I will first explore TypeScript. After the whole process is completed, the above questions should have a result.

basic introduction

TypeScript is an open source programming language developed by Microsoft. It is a superset of JavaScript. It extends the syntax of JavaScript, adds static typing and class-based object-oriented programming, and is a strongly typed language. Existing JavaScript programs can work under TypeScript without any changes. If you have learned ES6, you will feel that ES6 and TypeScript are very similar. Yes, TypeScript implements the features of ES6 and has been extended. The biggest improvement is the addition of the type system. Both need to be compiled to run in the browser. The compilation target It's all JavaScript.

Implementing the TypeScript version of HelloWorld

There is a saying called show me the code, don't...; it actually makes sense, so let's implement a TypeScript HelloWorld first, feel it first and then discuss it.

①Install TypeScript

I use the npm method to install, using the Taobao mirror cnpm, open the console and enter:
cnpm install typescript -g
Enter, wait for the typescriptinstallation to complete.

② Write ts file

Create a new folder named TypeScript, create a new file named hello.tsin the folder, open an editor, it is recommended to use VS, because it is also a Microsoft product, enter the following code:

function hello(word) {
    return 'hello, ' + word
}
let word = 'TypeScript'
console.log(hello(word))

That is:

open the console, enter the TypeScript folder, and enter the following command to compile hello.ts.
tsc hello.ts
You can see that there is an additional hello.js file in the TypeScript folder, which is compiled from the hello.ts file.

Run the compiled js file

I use the node method. If you don't like to use node, you can also import the compiled js file into the web page and then view the result in the browser.
Enter the following command in the console:
node hello.js
The TypeScript version of HelloWorld will then be printed.

Do you think hello.ts is the same as the compiled hello.js? Yes, this just confirms the conclusion that JavaScript programs can work under TypeScript without modification. The two programs above are the same because the new features of TypeScript relative to JavaScript extensions have not been added.

More TypeScript's HelloWorld

Why say more? Next, we modify our hello.ts with some things that are specific to TypeScript relative to JavaScript, and modify hello.ts to the following:

function hello(word: string) {
    return 'hello, ' + word
}
let word = 111
console.log(hello(word))

You will find that the compiler reported the following error:

Why did it report an error? Because we use TypeScript's type annotations, type annotations are a way to add constraints to functions or variables, that is, in the above code, word can only be of type string, otherwise an error will be reported. To run the above code correctly, you need to correct The parameter type in hello() is changed to number or the word outside the function is changed to string type.

After modification, no error will be reported. Use the previous method to compile the ts file into a js file, and then again
node hello.js
you can see

that the hello.ts code is written as follows:

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

interface Person {
    firstName: string
    lastName: string
}

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

let user = new Student("Kobe", "Bryant")
console.log(greeter(user))

Run the compiled js as before, you can see:

Isn't it interesting? But why? Is there any other more interesting knowledge? This article only explains what TypeScript is and how to implement HelloWorld. For more information, please pay attention to my follow-up blog or visit the TypeScript official website to learn. If there are any mistakes, please point out, thank you.
Happy learning~~~~
TypeScript official website: http://www.typescriptlang.org/