TypeScript integration

[panesofglass]

Description

I would love to see how I might be able to use Fable with an existing TypeScript application or generator, e.g. Gluon. Specifically, I would like to know how to get Fable to generate a .d.ts file for a given component. I would also love to see how I might be able to use the Fable AST directly to generate .js output from an F# meta-program.

Do any such examples exist? I'm happy to put in some work to contribute these things with some guidance, if they don't already exist.

Repro code

N/A

Expected and actual results

Fable compiler can generate a .d.ts file with TypeScript declarations as output alongside the generated .js.

Related information

• fable-compiler version:
• fable-core version:
• Operating system:

[alfonsogarciacaro]

I implemented (partly) this feature for #270, however I didn't keep working on it as it added some maintenance overhead and there wasn't much feedback. The code to emit type annotations is there and can be activated using the --declaration option in Fable 0.7 (however, last time I checked I think it was broken).

At the moment, we are focusing the efforts in the other way around: improving ts2fable to convert .d.ts files into F# bindings, so I cannot work on this now, but contributions would be very welcome. If working again in this feature, I would probably not take the approach I took at the beginning (use Flow type annotations and then the babel-dts-generator plugin to generate the .d.ts) as the Babel plugin seems to be discontinued. Emitting .d.ts files from Fable may be an option. But I think it's probably easier just to use JSDocs as the typescript language service is capable of using them to provide intellisense.

On the other hand, if you just want type safety between F# in the back and front ends, you can take a look at the fable-suave-scaffold which shares domain models between the server and the client. There's also work to use reflection to make a REST API type-safe by using an interface.

About manipulating the Fable AST, there are only two steps in the compilation: convert F# AST to Fable AST, and then the Fable AST to Babel AST (the latter is then sent to JS so Babel can convert it to the actual JS code). So you can easily take the Fable AST if you want to convert it directly to JS (or even to another language as it was originally the idea). This would be interesting as it would remove the JS dependency to generate actual code but I guess it would take a considerable amount of work too.

[panesofglass]

Thanks for the response! I'll take a look. No promises, but I would love to start introducing some Fable components into our web application. We are all TypeScript at present, thus my need for .d.ts files. Thanks for the pointers!

[panesofglass]

Sorry for dropping off the previous issue. I completely forgot about it, but I'm glad you were able to link back to it.

[alfonsogarciacaro]

NP! I'm glad you keep your interest in Fable :) Please don't hesitate to ask if you have any other question.

[panesofglass]

On the topic of using JsDoc, can those be generated from underlying F# code? Apologies if this is already documented elsewhere.

[panesofglass]

Referencing for later #308

[alfonsogarciacaro]

The Fable AST has type information (Check Type property of Fable.Expr) so if you only want the types you can take it directly from there. If you want to also include F# comments, these should be added to the Fable AST as they are currently ignored. Reference: #752 (comment)

[panesofglass]

It seems it would be an equal amount of work to translate the Fable AST to the TypeScript AST and emit TypeScript. Not sure whether that is of interest.

[alfonsogarciacaro]

The possibility of emitting Typescript AST is being tracked in several issues in the Typescript repo. I originally reported microsoft/TypeScript#1514 but I'm not sure about the current situation. I read recently that it was already possible to emit TS AST but still in a hacky way. Maybe @ctaggart knows more?

Personally I think it'd interesting to output Typescript AST but only when the API for that it's stable as it's a lot of work to interact with an undocumented API which is constantly changing. The Babel team also commented they want to support Typescript at some point.

[panesofglass]

I think TypeScript 2.3 should be able to emit TypeScript: microsoft/TypeScript#13940. I would assume that means the API is stabilized, or close to it.

[panesofglass]

@alfonsogarciacaro do you have a reference to the Babel team's comment wrt TypeScript support? Is it to support generating .ts, .d.ts, or both?

[alfonsogarciacaro]

@panesofglass I don't remember exactly, I think it was a tweet. A quick Google search reveals this: babel/babylon#320

As expected, the discussions in the Babel repo are about parsing Typescript code, but I think this automatically means that Babel will also be able to output TS syntax. I'm not sure about .d.ts files, but the Typescript compiler itself could be used for that purpose.

[nkosi23]

Jumping in ;)
I'd love to start using Fable, but my concern is that we need to keep support for ES3. From what I understand, Babel only generates ES2015 code. There are shims, but for example IE simply breaks when it meets unfamiliar syntax such as lambdas.

So you can easily take the Fable AST if you want to convert it directly to JS (or even to another language as it was originally the idea). This would be interesting as it would remove the JS dependency to generate actual code but I guess it would take a considerable amount of work too.

Is there any path today to pass Fable AST to a compiler generating ES3 compatible code or do we need to write this compiler ourselves ?

[alfonsogarciacaro]

@reddyBell Actually the purpose of Babel is to take ES2015 code and convert it to ES5/ES3. You just need to add the es2015 preset to convert the syntax (and the transform-runtime plugin to add polyfills for ES2015 classes). This is usually done by default in Fable 1.0 templates. You can learn more about Babel in their website and also try different configurations in their REPL.

[nkosi23]

Many thanks @alfonsogarciacaro this sounds awesome. I scratched my head on their website prior to posting but apparently misunderstood what their actual output is. Sounds very promising I'll look into what you suggest closely. Thanks again

[panesofglass]

@alfonsogarciacaro it seems the babel link you posted above was for babel to consume TypeScript rather than produce a .d.ts file. I also confirmed with the TypeScript team that their AST and emitter do not support .d.ts files, so I think the best course of action would be to provide an alternative transformation of the Fable AST to TypeScript. Is the transformation from AST to AST something that could be swapped out? If so, I suspect I need to look deeper than the code you pointed to earlier. Any chance we could set up a Skype call to discuss?

[alfonsogarciacaro]

@panesofglass Yes, as commented above, the only thing you need to replace Fable AST to Babel AST step on the .NET side is to swap this line, and then obviously deal with the Typescript AST somehow on the JS side, I guess calling the TypeScript API as we currently do with Babel.

Also as commented above, Typescript is improving type checking directly in JS files so it maybe much easier to just include the types in JSDoc comments instead of taking all the trouble to output TS code.

[panesofglass]

@alfonsogarciacaro ah, I hand't realized fully what the JsDoc updates meant. That does look like a much simpler solution. Thanks for the tip! I'll check with @ctaggart about how we may want to proceed.

[alfonsogarciacaro]

@panesofglass Sorry, I'm closing this issue so we can focus the team resources. If you're still interested either in TypeScript support or emitting JSDoc comments with method signatures, could you please send a WIP PR so we can continue the discussion there? Thanks a lot in advance!

[panesofglass]

Yes, I will do so when I start the work. Thanks!