Correct TypeScript code call from JavaScript

In our large corporate project, we were faced with a situation that, it seems, is not well described in articles and posts available on the Internet.

We need to integrate our existing JavaScript infrastructure code that supports SPA with code that is being developed by another TypeScript team. We cannot drastically change the approach (i.e., simply choose one language) for many political constraints and available development resources. And we fully understand that it is probably not a good idea to combine the two parts of the infrastructure, which are written in different languages.

However, we need to evaluate the impact and best practices for invoking TypeScript from JavaScript code.

The rationale that TypeScript is essentially compiled into JavaScript seems obscure because there are no reliable sources of information on the topic of how to properly consume this compiled JavaScript from handwritten JavaScript and what are the hidden caveats (or alternatives).

It also seems that the opposite situation, when TypeScript code requires JavaScript, is surprisingly well described.

Any deep thoughts on this topic?

UPD

In particular, here is a list of questions that we are currently looking for answers to:

  • What will be the typeScript JavaScript API form that makes extensive use of common elements, class hierarchies, and interfaces?
  • Are there any problems with the kit, minifixation, AMD?
  • Is it possible to have a basic Angular controller written in TypeScript and another Angular JavaScript controller that inherits functionality from it? What will be the reservations?

In fact, we think that we have not yet come up with all the questions. They appeared immediately after several hours of reflection on this topic.

+6
source share
4 answers

Simply put, if you need to integrate / use a library written in Typescript in your own project that uses JavaScript, you will use a compiled JavaScript API!

You basically throw away everything that Typescript benefits from pure JavaScript.

So you don’t need to worry about anything specific to TypeScript, such as generics, etc. You only need to work with the compiled output of the Typescript library ...

For an example, go to http://www.typescriptlang.org/Playground Select "Walkthrough: General." On the right you will see compiled JavaScript. It has no generics or anything special; it is still pure JavaScript. This is what you have to deal with ...

to your "specific" questions:

  • What will be the form of JavaScript Typescript API that makes extensive use of generics, class hierarchies, interfaces? See above. It will be a plain old old Javascript. No difference for you.
  • Are there any problems with the kit, minifixation, AMD? No, since compiled Typescript is plain JavaScript and can be scaled down, etc.
  • Is it possible to have a basic Angular controller written in Typescript and another Angular JavaScript controller that inherits functionality from it? What will be the reservations? Yes, of course, you can do whatever you want with compiled JavaScript.

The only drawback of using Typescirpt's compiled JavaScript is that you throw away awesome Typescript functions that can give you, for example ... types ... If another command is already on this route, you might also want to write your part in Typescript; )

+7
source

The rationale that TypeScript is essentially compiled in JavaScript seems obscure because there are no reliable sources of information on the topic of how to use this compiled JavaScript from handwritten JavaScript correctly and what are the hidden caveats

The consumption of TypeScript from JavaScript is the same as the consumption of TypeScript from TypeScript, or JavaScript from JavaScript, for that matter. For example, suppose you have a function in TypeScript:

function f(n: number) { return 'the number is ' + n; } 

To call this function from TypeScript, you must write

 var x = f(42); 

To call this function from JavaScript, you must write

 var x = f(42); 

Let's say you have a class in TypeScript:

 class MyClass { /* ... */ } 

To use this class from TypeScript, you must write

 var c = new MyClass(); 

To use this class from JavaScript, you must write

 var c = new MyClass(); 

In other words, it is exactly the same. No instructions have been given because it is not required.

+11
source

I think this is not a Typescript problem.

You can see the same “problem” (problem, not problem) with Cofeescript, darts, a tracer, or any other transporter.

Javascript as a lampshade, very susceptible to developer skills, language comprehension and skills. (like any other language?)

If someone has a difficult reading of TS generated by JS (this IMMO is very human friendly), I don't think he would be lucky to read manual JS encoding.

In addition, you always have TS source code with interfaces and more natural OOP manners.

the benefits of including OOP and structural overweight minuses (if any).

The IDE support is excellent (Webstorm, Visual Studio), you can actually reorganize!

And you have lambdas covered :)

The next iteration of EcmaScript will be very similar to what TS is today (without the additional saftey type and a few subtleties).

What happens if someone from the "Js" team jumps to ES6 using a tracer or something else, do you care? You will simply stick to the api provided by the module and work with it.

Interfaces and generics do not flush them on the JS side. its * additional information on development time.

And regarding the thing related to unraveling and mineralization, it will be the same as with JS, no difference +, you can go one step with TS, copying everything to one output file

An IMMO solution is leveling, modulation (serioulsy), tests (very useful if they are written with self-contained books) and Documentation.

+3
source
  • What will be the form of JavaScript TypeScript API that makes extensive use of generics, class hierarchies, interfaces?

Typescript erases type information at compile time, including general parameters. This means that you simply omit the type parameters in your javascript.

  • Are there any problems with the kit, minifixation, AMD?

No.

  • Is it possible to have a basic Angular controller written in TypeScript and another Angular JavaScript controller that inherits functionality from it? What will be the reservations?

Yes it is possible. There are no reservations.

Common decision:

In general, there is a simple solution for any interaction problem between TypeScript and javascript. By the time the interaction occurs, TypeScript is all compiled into javascript. Therefore, if you are worried about how to consume typescript, just compile it into javascript. Then you interact with javascript.

+1
source

Source: https://habr.com/ru/post/976872/


All Articles