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

TS development Web front-end how to introduce JS library, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

As we all know, TS needs to be compiled into JS to run on browsers, and TS can also call JS methods. However, there is a ready-made third-party JS class library in front of us, so that how it can be used in TS, many friends who have just entered the pit are often unable to enter. Now let me talk about my method.

1. Direct translation

After reading the above four words, everyone may not frown and immediately start to spray: "Oh shit, bad idea!" I admit, it was a stupid idea, but I did do it. The stupid way is also the way, the heavy sword is not sharp, big and skillful.

For some JS libraries with less than 200-300 lines of code, why not translate directly into TS? Rewriting in TS is not much different from finding typings (many of which may not be found) or writing * .d.ts yourself. By doing it yourself, you can also deepen your understanding of the library and consolidate yourself. 2. Page introduction + global definition

If you are not satisfied with the first item, don't worry, we have another way. The second move is actually very simple and rough.

Declare the global variable $in 2.TS, and then you can start the masturbation directly.

Declarevar$;classApp {init () {$("# msg") .html ("jquery reference succeeded!");}}

The side effect of being simple and rude is that it is not elegant enough, and the declared global variable $can only be of type any, which means it is still a weakly typed variable, so there are no methods and properties or type hints in IDE. As a result, the fun of writing TS is completely lost. Let's focus on how to be elegant.

3. Type definition file (.d.ts)

I believe that if you have read Baidu before this article, you must have seen this method. It shows that this is the mainstream. Therefore, I am also going to introduce it in detail.

First of all, what is a type definition file?

It should be somewhat similar to the C++ suffix .h header file, which is used to declare the function interface and variable type definitions of the JS main file, and expose these definitions to TS use. With the .d.ts definition, TS can sense the code hints related to the JS library.

Then, how to get the .d.ts file? 1. You can first go to DefinitelyTyped to try your luck. There may be libraries that are very popular. two。 Use npm's typings to find and get, in fact, it is no different from the above. 3. There are also some tools available online, and it is said that .d.ts can be generated backwards according to the js library. It is not reliable for me to try, if it is the success rate of .d.ts generated by C #, I am sure of the success rate of .d.ts, but I can only take care of JS. 4. Finally, when "borrowlism" is no good, we have no choice but to provide for ourselves.

This is the answer to the question about how to introduce the JS library into the Web front end of TS development. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.