“This is my 36th day of participating in the First Challenge 2022. For details: First Challenge 2022”

preface

Now that we know what TypeScript is and why we use it, today we’ll learn how to get started with it.

TypeScript usage flow

The original TypeScript file ends in.ts, which can’t be used directly on a page and needs to be compiled and converted to a JavaScript (.js) file.

The TypeScript workflow looks like this:

To compile a TypeScript file, we use the global TypeScript module we installed earlier. The compiler instructions are:

tsc index.ts
Copy the code

After compiling this step, an index.js file is generated in the index.ts directory, and we end up using the compiled JavaScript file on the page.

As we said earlier, TypeScript is static. It checks for data types, syntax, and so on during compilation, and reports errors immediately. For example, we compile TypeScript code like this:

// index.ts
let a: number = 12;
a = Programming Samadhi;
Copy the code

The following error occurs:

Although an error occurs at compile time, a JavaScript file is still generated:

// index.js
var a = 12;
a = Programming Samadhi;
Copy the code

Whether a JavaScript file is generated after a compilation error depends on the TypeScript compiler’s configuration items, which we’ll cover in more detail later.

TypeScript basic syntax rules

Learning a language, the first thing you should learn is its grammar rules. Only by mastering the rules can you make fewer mistakes.

TypeScript has the same basic syntax rules as JavaScript.

TypeScript reserves keywords

Like JavaScript, TypeScript has reserved keywords, including:

We need to be aware of these reserved keywords when coding with TypeScript.

Whitespace and line feeds

TypeScript ignores Spaces, tabs, and newlines in programs.

We often use Spaces, and tabs are often used to indent code to make it easier to read and understand.

function add(x: number, y: number) :number {
    return x + y;
}
Copy the code

TypeScript is case sensitive

TypeScript distinguishes between uppercase and lowercase characters.

let name: string = "bianchengsanmei";
let Name: string = Programming Samadhi;
// Name and name are different variables
Copy the code

Semicolons are optional

Each line of instruction is a statement. You can use semicolons or not. Semicolons are optional in TypeScript, but we recommend ending each statement with a semicolon.

TypeScript annotation

Comments are a good habit, and while many programmers hate them, it is recommended that you write a description for each piece of code.

Comments can improve the readability of a program.

Comments can contain information about the program, such as the author of the code, a description of the function, and so on.

  • Single-line comment (//) − All words following // are comments.
  • Multi-line comment (/* */) − This comment can span multiple lines.
/* * @author: typescript_learning/1 The basic usage is /index.ts */

// The name is pinyin
let name: string = "bianchengsanmei";
// The Chinese character of the name
let Name: string = Programming Samadhi;
Copy the code

conclusion

So much for TypeScript’s workflow and basic syntax rules, which are very similar to JavaScript.

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!