Systematic learning of TypeScript (2) - development process and grammar rules

foreword

We already know what TypeScript is and why to use TypeScript, today, let's learn how to use it initially.

TypeScript usage process

The original TypeScript file ends with .ts , it cannot be used directly in the page, it needs to be compiled and converted into a JavaScript (.js) file.

The usage flow of TypeScript is basically shown in the following figure:

In this step of compiling the TypeScript file, we use the global TypeScript module installed earlier. The compilation instructions are:

tsc index.ts

After this step of compilation, a index.js file will be generated in the same level directory of index.ts . We finally use the compiled JavaScript file in the page.

As we said earlier, TypeScript is static, and will check data types, syntax, etc. during the compilation process. If an error is found, an error will be reported immediately. For example, we compile the following TypeScript code:

// index.ts
let a: number = 12;
a = "编程三昧";

The following error is generated:

Although an error occurred during the compilation phase, a JavaScript file was eventually generated:

// index.js
var a = 12;
a = "编程三昧";

Whether a JavaScript file is generated after a compilation error is reported is related to the configuration items of the TypeScript compiler. We will introduce the details of the compilation configuration later.

TypeScript Basic Syntax Rules

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

The basic syntax rules of TypeScript are the same as JavaScript.

TypeScript reserved keywords

Like JavaScript, TypeScript also has reserved keywords, mainly:

When coding with TypeScript, we need to pay attention to the use of these reserved keywords.

whitespace and line breaks

TypeScript ignores spaces, tabs, and newlines that appear in programs.

We often use spaces, tabs are often used to indent the code, making the code easier to read and understand.

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

TypeScript is case sensitive

TypeScript distinguishes between uppercase and lowercase characters.

let name: string = "bianchengsanmei";
let Name: string = "编程三昧";
// name 和 Name 是不同的变量

semicolon is optional

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

TypeScript annotations

Comments are a good habit, and although many programmers hate comments, it is recommended that you write text descriptions for each piece of code.

Comments can improve the readability of a program.

Comments can contain some information about the program, such as the author of the code, descriptions about functions, etc.

• Single-line comment ( // ) − The text after // is the comment content.
• Multi-line comment (/* */) − This comment can span multiple lines.

/*
 * @Author       : 编程三昧
 * @FilePath     : /typescript_learning/1.基本使用/index.ts
 */

// 名称的拼音
let name: string = "bianchengsanmei";
// 名称的汉字
let Name: string = "编程三昧";

Summarize

As for the usage process and basic grammar rules of TypeScript, it is actually quite similar to JavaScript.

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I am the author of 〖 Programming Samadhi 〗 King , my official account is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!