Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to emit TypeScript from syntax tree #10786

Closed
ctaggart opened this issue Sep 8, 2016 · 16 comments
Closed

Ability to emit TypeScript from syntax tree #10786

ctaggart opened this issue Sep 8, 2016 · 16 comments
Labels
API Relates to the public API for TypeScript Suggestion An idea for TypeScript

Comments

@ctaggart
Copy link
Contributor

ctaggart commented Sep 8, 2016

Now that #5595 has landed, it has me excited that it may soon be possible to emit TypeScript. Is it now possible with the 2.1 nightly? If not, please consider this a feature request. It would open the door for a lot of cool code generation.

Related issues:

@RyanCavanaugh
Copy link
Member

Depending on what you're doing, https://github.com/RyanCavanaugh/dts-dom may be a useful alternative

@mhegazy mhegazy added Suggestion An idea for TypeScript API Relates to the public API for TypeScript labels Sep 8, 2016
@stephanos
Copy link

@ctaggart hey there, you seem to have a pretty good grasp on the whole emitting functionality. I was just curious if you could tell me what exactly I need to watch out for in order to be able to read a .ts file, parse it, add some nodes and emit it to a new .ts file. Thanks :)

(background: I would love to be able to build the TypeScript version of my Babel plugin https://github.com/stephanos/babel-plugin-immutable-record)

@ctaggart
Copy link
Contributor Author

ctaggart commented Sep 23, 2016

@stephanos, it has been possible to do everything you are asking by using the compiler api for a while, except emit the .ts file. If it is indeed possible now, I don't know how to do it. I too would like it to be possible, which is why I opened this issue. I recommend adding a 👍 above if you would like to see support added.

@stephanos
Copy link

@ctaggart thanks for your reply :) I'm now focusing on emitting .js until this issue is resolved. I managed to get started on this today and got as far as parsing the .ts and navigating through the AST nodes. But now I'm stuck: How do I create a new node (e.g. a variable declaration) and add it to an array of statements? I'd appreciate if you could share any insights or point me in the right direction. Thank you. (sorry for hijacking this issue :-/ - should I post this somewhere else?)

@ivogabe
Copy link
Contributor

ivogabe commented Oct 6, 2016

Would you accept a pull request on this? I'd propose a new function emit(file: SourceFile, transformers: Transformer[] = nullTransformers, newLine = "\n"): string in emitter.ts and exposing the functions in factory.ts. Since factory.ts contains a lot of helpers, I guess that should be placed in a namespace like ts.factory (instead of exposing it under ts).

@ivogabe
Copy link
Contributor

ivogabe commented Oct 12, 2016

I played a bit with it, and I created PR #11561.

@morlay
Copy link

morlay commented Dec 1, 2016

We really need something like babel-types & babel-generator

Sometimes, we need to generate code by specs like json-schema, swagger.

There is a cool tool TSTypeInfo to do this.

However, Hope typescript could provide these features.

@ctaggart
Copy link
Contributor Author

ctaggart commented Dec 9, 2016

Now that TypeScript 2.1 has been released where ya'll are now rewriting the emit pipeline to use tree transforms, is this something that may be enabled soon. I brought up this issue at both @DanielRosenwasser's presentation and a Q&A with @ahejlsberg at the Microsoft MVP conference in November.

thanks,
Squeaky Wheel

@DanielRosenwasser
Copy link
Member

Hey @ctaggart! #11561 was the most recent PR regarding this, but we want to do some cleanup on the API. See @mhegazy's comment at #11561 (comment).

TL;DR: pretty-printing a synthesized tree is planned for the 2.2 timeframe.

@ctaggart
Copy link
Contributor Author

Now that #13940 has been merged to master, this may actually be possible now, right? @rbuckton

@DanielRosenwasser
Copy link
Member

Yes, and it'll be in the nightlies in about an hour or two! 🎉

Caveat: Forgive me for my last comment, as it's now slated for TypeScript 2.3.

There is still some stuff you can still use in 2.2 - having spoken with @rbuckton earlier tonight, if I'm not mistaken, the factory (#13825) and printer (#13761) will be in 2.2... which I think you should actually be all you need! So let us know how that works out. 😄

alfonsogarciacaro referenced this issue in fable-compiler/fable-react Feb 22, 2017
@Busyrev
Copy link
Contributor

Busyrev commented Mar 1, 2017

Great progress. I love TypeScript and community!
Is there minimal example of emitting TypeScript after transformations?

@alexarg
Copy link

alexarg commented Mar 12, 2017

Based on the comments it seems like generating TypeScript code with TypeScript 2.2 is to some extent possible? If so, could you please share some tips on how to do that?

@fabiandev
Copy link

@alexarg As far as I know it will be in TypeScript 2.3 and is available from the nightly builds. Generally you can use the printer to generate TypeScript code from a SourceFile, a bundle of source files or a single Node.

This is a very basic example on how to transform TypeScript code and generate TypeScript again after that. I've typed everything, just that it's easier to follow what's going on.

const source: string = `function logString(param: string): void {
  console.log(param);
}`;

const sourceFile: ts.SourceFile = ts.createSourceFile(
  'test.ts', source, ts.ScriptTarget.ES2015, true, ts.ScriptKind.TS
);

// Options may be passed to transform
const result: ts.TransformationResult<ts.SourceFile> = ts.transform(
  sourceFile, [ yourTransformer ]
);

const transformedSourceFile: ts.SourceFile = result.transformed[0];

// Options may be passed to createPrinter
const printer: ts.Printer = ts.createPrinter();

const generated: string = printer.printFile(transformedSourceFile);

result.dispose();

Probably you may also want to check #13940 where you can find some more examples and explanations.

@mohsen1
Copy link
Contributor

mohsen1 commented Jun 23, 2017

I used this technique to make a transformer module:
https://github.com/lyft/react-javascript-to-typescript-transform

@ctaggart
Copy link
Contributor Author

ctaggart commented Oct 5, 2017

This is fixed now. Before we mark this closed, which version shipped with Creating and Printing a TypeScript AST working? Was it 2.4? @fabiandev comment above shows it was 2.3.

@ctaggart ctaggart closed this as completed Oct 5, 2017
@microsoft microsoft locked and limited conversation to collaborators Jun 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API Relates to the public API for TypeScript Suggestion An idea for TypeScript
Projects
None yet
Development

No branches or pull requests