Typescript support about fbt

[retyui]

Here is an article about Typescript + fbt where I describe problems that i faced and how to fix them

UPD: use definition types:

• DOCS

yarn add @types/fbt

[sibelius]

this could help https://github.com/sibelius/codemod-RN24-to-RN25/blob/master/transform.js#L22

[sibelius]

collectFBT also throws when parsing typescript files with babel

Error: [BABEL] unknown: Configuration contains string/RegExp pattern, but no filename was passed to Babel
/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:131
    throw new Error(`Failed in ${errCount} files`);
    ^

Error: Failed in 1 files
    at writeOutput (/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:131:11)
    at ReadStream.<anonymous> (/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:169:5)

[sibelius]

after #51

I've got this error:

Error: Line 37 Column 11: `fbt` is not bound. Did you forget to require('fbt')?
/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:131
    throw new Error(`Failed in ${errCount} files`);
    ^

Error: Failed in 1 files
    at writeOutput (/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:131:11)
    at ReadStream.<anonymous> (/entria-fullstack/node_modules/babel-plugin-fbt/bin/collectFBT.js:169:5)
    at ReadStream.emit (events.js:187:15)
    at endReadableNT (_stream_readable.js:1094:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

it could be related to #46

[kayhadrin]

1. Support for Typescript files is certainly on our radar but not scheduled yet.
2. Re: the error about the absence of require('fbt'). That check was useful before when we had no proper way to check that fbt was a defined variable in the JS module scope. Now that we've got better Flow support, we can remove this. [EDIT] I've just rechecked and found that Flow is still not detecting <fbt> as a normal JSX+React component, which is interpreted as a special FbtElement type. So for now, we'll need to keep that variable definition check.

[baluubas]

@kayhadrin Do you have any pointers where that check is made? Or some way to work around it in the mean time? I wouldn't mind keeping a fork going until things are ready for typescript support.

[sibelius]

@baluubas you can use my 2 pull requests

#50
#51

[kayhadrin]

@baluubas I believe @sibelius answered your question.

[kayhadrin]

@sibelius Re: #49 (comment)

Could you provide an example of how you're importing fbt in your JS module?

I assume it's something like this:

import fbt from 'fbt';
// or
import {fbt} from 'fbt';

[sibelius]

I’m using export default

Checking the code, I could use named or export default

For me, anyone of them could work

[kayhadrin]

I've applied the your two PRs locally (#50 and #51),
converted the demo-app/src/example/Example.react.js file to tsx,
ran yarn manifest and yarn collect-fbts and it worked successfully.

If that's still an issue on your side, you may want to submit the minimum repro code in a Codepen.

[AndrewCraswell]

It seems the pull requests were merged, can this issue be closed or is Typescript still not fully supported?

[jrwats]

I'll close for now, and if any further issues around Typescript arise, we can investigate them as a separate issue.