What is TypeScript?

Preface:

TypeScript is a superset of JavaScript that compiles to pure JavaScript code.

So why did the TypeScript language appear? Mainly because JavaScript can now develop many complex projects, but JavaScript lacks its reliability. When using it, we need to add a lot of business logic to judge for the robustness of the code.

TypeScript can run in a browser environment, Node.js environment, or ECMAScript3 or higher JavaScript engines.

1. JavaScript issues

The main problems with JavaScript are as follows:

JavaScript type exceptions can only be discovered at runtime.

Because the type of JavaScript functions is ambiguous, it may cause problems with the final functionality of the function.

As follows:

function sum(x, y){
  return x + y
}
sum(100, '100') // 100100

2. Advantages of TypeScript

• JavaScript is a dynamically typed programming language. The so-called dynamic type means that its data type is known at compile time, whether it is a Number or a String. TypeScript is a statically typed programming language. The so-called static type means that the data type is known at the time of writing.

let num: number = 6;

The variable num can only be of number type from beginning to end. If a string is assigned to it, an exception will be thrown.

So, the advantages of TypeScript are as follows:

• During the development process, we can locate the errors, which makes it easier for us to check the errors.
• TypeScript is a progressive programming language. If you don’t understand its syntax, you can use it just like JavaScript .
• This reduces unnecessary type checking during our development process.
• Statically typed code hints are better than statically typed code hints.
• It will be easier when refactoring the project.
• Statically typed code is more semantic and readable than dynamically typed code.

3. Disadvantages of TypeScript

TypeScript does not have only advantages but no disadvantages. Its disadvantages are relative to JavaScript.

The details are as follows:

• Compared with JavaScript , TypeScript itself adds many concepts. For example, concepts such as generics and interfaces.
• Using TypeScript for development will increase some costs in the short term, but for a project that requires long-term maintenance, TypeScript can reduce its maintenance costs.
• It may not be perfectly integrated with some libraries.

4. TypeScript's operating environment

TypeScript runs on the basis of Node.js環, so you need to install Node.js first.

Install Node.js and other operations to ignore

The command to install TypeScript is as follows:

npm install -g [email protected]

Here I specify the version number through @, or you can specify no version number

After installing TypeScript , you also need to install a ts-node tool. If you install this tool, you cannot run TS code directly. You need to compile TS code into JavaScript before you can execute it.

The execution flow is as follows:

# Compile TS code tsc demo.ts 
# After compiling, you will get the demo.js file, and then you can run it

If you install the node-ts tool, you can execute TS code directly.

The specific steps are as follows:

# 1. Global installation npm install -g [email protected]
# 2. Run the code ts-node demo.ts

It is worth noting that the directory after installation must be in the environment variable, otherwise an error will be reported.

5. Scope Issues

When we execute ts files in the project, if the same variable name exists in different files, an exception will be thrown.

The sample code is as follows:

a.ts

let str: string = 'Hello World'

b.ts

let str: string = 'A bowl of Zhou'

At this time, an exception will be thrown, that is, the block scope variable "str" ​​cannot be re-declared. If the editor is VScode, a prompt will be displayed when the mouse hovers over the variable name.

There are two ways to solve this problem. The first is to create an immediately executed function (an anonymous function) for each file to ensure that each file has a separate scope.

The sample code is as follows:

(function() {
  let str: string = 'A bowl of Zhou'
}){}

The second way is to use export to export the current file as a module. The sample code is as follows:

let str: string = 'A bowl of Zhou'

export {}

This is the end of this article about what is TypeScript? For more related TypeScript content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!