Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to master TypeScript". In daily operation, I believe many people have doubts about how to master TypeScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to master TypeScript"! Next, please follow the editor to study!

TypeScript is a superset of JavaScript. It means that js can be written directly in ts. In my first impression, js is like a compiled executable, while ts is like Java, or Scala, and so on. However, this is just an analogy. Most of the syntax in ts is used at compile time, and a lot of information is erased in the real js file.

As shown in the figure above, the ts file generates an ordinary js file through the tsc compiler. Next, you can execute this normal js file using the node command.

Here is a simple piece of ts code. Is it very similar to Java?

Class Animal {public name; protected a; private b: string; constructor (name) {this.name = name;} sayhi () {return `my name is ${this.name} ` }} class Cat extends Animal {constructor (name) {super (name)} sayhi () {return "meow" + super.sayhi ()} static iaAnimal (a) {return an instanceof Animal;}} function gen (name: t): void {console.log (name.name)}

The following is a brief introduction to some basic grammars, of course, some grammars are ES6, but I also knead it together.

Type dependence

Because js is a weakly typed language and has a lot of run-time conversions, it is impossible to use strongly typed conversions like Java, so typescript can enhance some type checking through language features at compile time. At run time, most of them don't have such a judgment at all, so ts is more like a process tool.

For a language, it must be inseparable from basic data types and custom types. Ts provides a series of keywords as special type codes, everything else is easy to say, and the only thing that interests me is the union type, which is a very interesting feature.

The typeof keyword is used to determine whether it is of a certain type

String indicates a string type, which is different from Java in that the first letter is lowercase

Boolean and Boolean types are different

Number directly represents the number type, and there are not so many troublesome precision problems (0b, 0O, 0x indicate progress)

Any is a universal type, equivalent to Object in Java, and all any is equivalent to ordinary js. So, if you hate ts, you can any all the way to dawn

Never represents value types that never exist.

Object represents a non-primitive type, which is not quite the same as in Java

String | number something like this is a federation type, which is also very magical. Only these two types of conversions are allowed here, and the methods that can be called should intersect the two.

The string between `can be used as a template ${}` using syntax similar to shell.

Readonly this turns out to be a keyword that indicates a read-only attribute

[propName: string]: the line of any; is worth studying, but it is not recommended.

The number [] array is similar to Java, except that this is the syntax behind the declaration, and the value uses the [] declaration instead of {}

The function function is no different from javascript, and there are two ways to declare it. Lambda must be a strong point for js.

The syntax of = > is also disgusting. You can write a big article together with ES6.

.. rest, pay attention to this thing! Similar to the meaning of variable parameter in Java

As is a keyword, which we can understand as the cast of Java, but it is only a syntax check and cannot be controlled by the runtime. (window as any) cool, but error prone

Declare that it is relevant

Let is used to declare ordinary variables with a small scope and within {}

Var scope is large, function level or global

Const read-only variables are static, while readonly is dynamic, but cannot be changed after declaration

Declare var declares global variables (files with the .d.ts suffix, which is a convention)

Declare function declares global methods

Declare class global class

Declare enum global enumeration type

Declare namespace global namespace

Export is mainly used for npm. Later, you can import it using import.

So what is declare? I think this is similar to the _ _ init__.py file in python, which is used to expose some interfaces and functions, and provides basic data for code automatic completion.

Two default conventions. Once tsconfig.json is configured, you can directly execute the tsc command to compile. / / three slash command, very ugly.

About Class

Students from Java will find that these concepts are similar to Java, but the syntax of ts is simpler.

Get set turns out to be a keyword that can be followed directly by a function. You can change the assignment and reading behavior of attributes!

There are also static, instanceof, public, protected and private. It really feels no different from writing Java.

Constructor is a constructor by default, unlike the noun of Java and class.

Abstract also has it, indicating that subclasses must be implemented, which is no different.

With regard to the difference between classes and interfaces, I think those who are familiar with java are transparent to ts.

Syntax is also very abnormal in Java, because most of the time you don't know where to put it. In ts, it's just as uncomfortable. How to be familiar with it can only be honed in practice.

About type, interface, class

Interface defines interfaces. The interfaces here are interesting. You can declare entities, but you must assign them all. You can do this by adding? To show that it is not necessary, but it is ugly. You can also define the optional parameters of the function, 6 is very

Type, like interface, is erased at compile time. The syntax of the two is slightly different, and type can define more types, such as basic types, union types, tuples, etc.

Class can implement methods in it, which is a bit like Java, so it won't be erased by the compiler. Javascript uses constructors to simulate class.

Development tools

Tsc is the compiler of typescript. If there is an error in compilation, you can specify the underlying syntax features.

Tsc-target es6

It is recommended to be configured in the tsconfig.json file and will be automatically recognized.

{"compilerOptions": {"module": "commonjs", "outDir": "lib", "declaration": true, "target": "es6"}}

Vscode, through the .d.ts file, you can achieve automatic completion and syntax checking. However, for complex personalized configuration, it is still impossible to achieve intelligent prompts and configurations like idea.

At this point, the study of "how to master TypeScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.