How to convert a javascript file to ts format?

Asked

Viewed 2,343 times

2

I know that the Typescript language is used to compile Javascript files. But I wonder if there is any tool that makes it possible to do the reverse.

Is there any way to convert a Javascript file to a Typescript structure, something automatic?

For me it would be much more interesting to be able to work from the Typescript language, to refactor a file, and improve the logic from that, because the version we have here is very disorganized, and has a very complex and messy structure, I believe that if I switch to Typescript, I can merge and improve some things, because Typescript is much more flexible in this sense.

I’m having to recreate everything manually in Typescript, but I spend a lot of time having to review each item, and each snippet of code. I would like to save effort and work from the old version converted to a strongly typed language, as is Typescript.

javascript node.js typescript

  • I do not know Typescript, seems based on Ecmascript 4 in some points, maybe not worth just transpose Javascript to typescript, the result will not be the most expectative (for example, the code could work identically, but would not use much of the new features of Typescript, such as :Typevalue | ..., and tals). The result of the conversion will be illegible type.

  • The typescript language is "superior" to javascript, so any tool you invent will have conversion problems. There are some people using resharp 9 for this, if you know English, here’s a good read: https://blog.jetbrains.com/dotnet/2015/02/05/ways-and-advantages-of-migrating-javascript-code-to-typescript/

2 answers

2


First of all, every Javascript code is a valid Typescript code, so there is no need for reverse transposal from the compiler’s point of view.

Regarding the editing tools and Ides, there is no need to rewrite the code right away. Just change the extension of . js to . ts and you already have access to tools like static type analysis (see example below), auto-complete and refactoring.

Example 1:

// Usando TSC 2.0
if (typeof m === "number") {
    var v = m; //VS Code mostra 'm' e 'v' como do tipo number
    //...
}

Another option not to have to rewrite the entire code before using the benefits of Typescript is to create .d.ts declaration files. In these files you specify interfaces and types of their functions and editors can use these statements to show you the types.

Example 2:

Let’s say you have a javascript code with this function:

greet({
  greeting: "hello world",
  duration: 4000
});

You can create a file minhaTipagem.d.ts with the following definition:

interface GreetingSettings {
  greeting: string;
  duration?: number;
  color?: string;
}

declare function greet(setting: GreetingSettings): void;

With this, editors will see that when you type the function greet, it is a function that accepts a parameter with the shape and typing of GreetingSettings.

So you can already use typescript typing, writing relatively little code.

  • I understand what you’re saying, but what I want to do is make it less machine-language-like and more organized, and then compile it... I wanted to avoid the fateful job of rewriting everything in the nail.

  • Ok. I don’t understand what you want then. I could edit the question with some example?

  • The Typescript link, besides having a more organized semantics, is quite different. That’s exactly what I want to bring, when I say I want to convert a Javascript file to Typescript format, it’s not just changing the file extension.

  • Okay. Let me get this straight. You want to change your code to concepts that have been added in ES6 and Typescript, such as Classes, lambda functions and template strings, right? There is a tool called Lebab ( https://lebab.io/ ) that does the reverse of Babel and transforms ES5 code into ES6. It is not the same thing as transforming into Typescript pq the concepts of Type and Interfaces, for example, do not exist in any Javascript version. Checks if that’s more or less what you want, that I update my answer :D

1

If you have a large Javascript code base we recommend using Salsa. Basically it asks Jsdoc for help and brings the power of typescript to javascript code.

[But what about the guys?]: Jsdoc to the rescue!

You can use typescript Definitions from libraries, jsdoc comments and have more or less the same power as typescript types, all without the need to change your JS code base. And of course, you can also mix js and ts files in the same project without problem!

Here project example nodejs: https://github.com/AbraaoAlves/feathersjs_typescript_sample Look at the file tsconfig.json and optionally a helping hand from ts-Node not to waste time generating file.

  • My opinion: Salsa will kill Babeljs

Browser other questions tagged javascript node.js typescript

You are not signed in. Login or sign up in order to post.