suggest: gradually migrate mina-loader to use TypeScript

[jimexist]

1. move source file to be combined by TS using allowJS flag
2. convert files one by one into TS files on demand if needed

[jimexist]

@imyelo what do you think?

[imyelo]

Couldn't agree more and it's already in my plan too. It's just I'm new to TypeScript, so I've recently started experimenting with it in other new projects. As soon as the time is right, I would also like to migrate existing projects to TypeScript.

[jimexist]

@imyelo i can help with the process.

actually TypeScript team has made the process super smooth. Here's a first PR #66

[mrbone]

any documentation for use ts in mina?

[mrbone]

I'm trying to implement ts in tina examples: tina-examples/packages/counter/src/app.mina

<config>
{
  "pages": [
    "pages/counter.mina"
  ]
}
</config>

<script lang="ts">
type A = {
  a: string;
};
App({
  onLaunch() {
    console.log("Hello from App!");
  }
});
</script>

when I run yarn build in tina-examples/packages/counter/, I got this:

ERROR in ./app.mina (../node_modules/raw-loader!../node_modules/ts-loader?{}!../node_modules/@tinajs/mina-loader/lib/loaders/selector.js?tag=script!./app.mina)
Module build failed (from ../node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json
    at Object.loader (/Users/chengboxu/WorkSpace/github/tina-examples/packages/counter/node_modules/ts-loader/dist/index.js:19:18)
 @ ./app.mina !!/Users/chengboxu/WorkSpace/github/tina-examples/packages/counter/node_modules/raw-loader/index.js!/Users/chengboxu/WorkSpace/github/tina-examples/packages/counter/node_modules/ts-loader/index.js?{}!/Users/chengboxu/WorkSpace/github/tina-examples/packages/counter/node_modules/@tinajs/mina-loader/lib/loaders/selector.js?tag=script!/Users/chengboxu/WorkSpace/github/tina-examples/packages/counter/src/app.mina
error Command failed with exit code 2

[imyelo]

Hi @mrbone
Is there a tsconfig.json in the root directory? I haven't used ts in the mina-project yet actually, but here's a use case of using it in the separation of concerns pattern, hope it will be useful to you.
If you prefer to use single-file component one, I remember that an appendTsSuffixTo: [/\.mina$/] option is also needed for ts-loader, which was first mentioned in vue-loader.

[mrbone]

@imyelo thanks for the reply, still struggle with ts-loader, a workaround is use <script src="./xx.ts"></script> with babel-loader. and can implement type-check with tsc and lint with eslint.

[jhcao23]

looking forward to see the docs of 'how to use typescript'!