4 ms·

Please work. Please work. Please work. This couldn't come at a better time. I've got "convert site to TS" looming on my to-do list for a large web app. Anything

Please work. Please work. Please work. This couldn't come at a better time. I've got "convert site to TS" looming on my to-do list for a large web app. Anything that saves me some interface props/state typing tedium would be great.

agopaul 9y ago
I plan to move a small react project to TS so it will be easier to work with complex objects coming from API endpoints. Having used TS quite a bit with "vanilla" JS and seen the advantages of using strong typing (eg. easier refactoring), it's strange for me to see that the majority of React developers prefer to stick with ES6 instead of TS
- jwarren 9y ago
  You might find one of the JSON to Typescript type converters handy, i.e. https://shakyshane.github.io/json-ts/ https://shakyshane.github.io/json-ts/
  - mkern 9y ago
    There's also https://transform.now.sh/ https://transform.now.sh/, which can handle a bunch of related transformations as well.
- ggregoire 9y ago
  Most JS developers have no or few experience with strongly typed languages. I think it's a thing you need to try by yourself to see the benefits. I was kind of an anti-TS some years ago ("it's too verbose, it's not JavaScript"), but since I used Flow for 1 year I now see the obvious benefits (my favorite being to have autocompletion for almost anything, and not having to wait the runtime to see that `user.fisrtname` is undefined). Also, probably some React developers would like to use TS/Flow and their manager says 'nope'.
  - seanmcdirmid 9y ago
    I’m a heavy TS user, but the compilation step is a PITA compared to working with bare JavaScript. Sometimes I forget to build and I wonder why my program hasn’t changed. I wish browsers would suck in TS directly. It doesn’t require much translation to get the corresponding JS files, just ignoring some types and that’s it.
    - 52-6F-62 9y ago
      Against watch scripts for any reason? It's pretty simple to get TS building via webpack for react, and tsc itself has a watch mode. The only PITA there is if you save any breaking changes, the build will obviously fail until you've completed and saved any the working changes, but at least you can't forget.
      - seanmcdirmid 9y ago
        I seem to forget to save sometimes also (granted, that would mess me up with javascript also), I'm just so used to straight C# in Visual studio! Typescript also isn't a very fast compiler, it doesn't seem to be incremental or retained at all, so when you build your project, it take a few seconds when your project has grown beyond a certain size. Sometimes I build and then hit run too early (before the build is actually finished).
        52-6F-62 9y ago
        Ah yeah. I guess Webpack's boost would be lost if your project ends up at all complex as well. Are you doing all of your TS dev in Visual Studio as well?
        seanmcdirmid 9y ago
        No, since leaving Microsoft I've been doing everything on a Mac via VS Code.
        agopaul 9y ago
mohsen1 9y ago
If you're using VSCode it's super easy to try it out quickly: https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#review-details https://marketplace.visualstudio.com/items?itemName=mohsen1....
- styfle 9y ago
  I just tried the extension on this file[0] and it didn't create the Props :( [0]: https://raw.githubusercontent.com/s-yadav/react-number-format/master/src/number_format.js https://raw.githubusercontent.com/s-yadav/react-number-forma...
  - mohsen1 9y ago
    Will look into it. Large files shouldn't be a problem.
HumanDrivenDev 9y ago
Typescirpt suppots mixed .js and .ts projects. You can even typecheck things based on jsdoc doc comments. https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files https://github.com/Microsoft/TypeScript/wiki/Type-Checking-J... I really like typescript. I'm not a static typing fanatic like a lot of people are these days, I prefer the optional annotations approach. You can set the slider to be as loose or as strict as you want, which is amazing. One thing I've just discovered is you can write types like this type one_to_five = 1 | 2 | 3 | 4 | 5 And it just bloody works. I wish there was a decent REPL for it though. And no, the node REPL or anything based on it is not decent.
qudat 9y ago
I'd urge your to consider the huge time investment with converting a large web application to TS. It cannot be understated how much effort will be put into it. Any moderately sized application with take months of human-hours to get completely switched over. You'll be wrestling with third-party libraries with meager documentation on how to use with TS, lots of googling to understand how to get the compiler to not complain, and a new build system that has its own idiosyncrasies.

agopaul 9y ago

I plan to move a small react project to TS so it will be easier to work with complex objects coming from API endpoints. Having used TS quite a bit with "vanilla" JS and seen the advantages of using strong typing (eg. easier refactoring), it's strange for me to see that the majority of React developers prefer to stick with ES6 instead of TS

jwarren 9y ago
You might find one of the JSON to Typescript type converters handy, i.e. https://shakyshane.github.io/json-ts/ https://shakyshane.github.io/json-ts/
- mkern 9y ago
  There's also https://transform.now.sh/ https://transform.now.sh/, which can handle a bunch of related transformations as well.
ggregoire 9y ago
Most JS developers have no or few experience with strongly typed languages. I think it's a thing you need to try by yourself to see the benefits. I was kind of an anti-TS some years ago ("it's too verbose, it's not JavaScript"), but since I used Flow for 1 year I now see the obvious benefits (my favorite being to have autocompletion for almost anything, and not having to wait the runtime to see that `user.fisrtname` is undefined). Also, probably some React developers would like to use TS/Flow and their manager says 'nope'.
- seanmcdirmid 9y ago
  I’m a heavy TS user, but the compilation step is a PITA compared to working with bare JavaScript. Sometimes I forget to build and I wonder why my program hasn’t changed. I wish browsers would suck in TS directly. It doesn’t require much translation to get the corresponding JS files, just ignoring some types and that’s it.
  - 52-6F-62 9y ago
    Against watch scripts for any reason? It's pretty simple to get TS building via webpack for react, and tsc itself has a watch mode. The only PITA there is if you save any breaking changes, the build will obviously fail until you've completed and saved any the working changes, but at least you can't forget.
    - seanmcdirmid 9y ago
      I seem to forget to save sometimes also (granted, that would mess me up with javascript also), I'm just so used to straight C# in Visual studio! Typescript also isn't a very fast compiler, it doesn't seem to be incremental or retained at all, so when you build your project, it take a few seconds when your project has grown beyond a certain size. Sometimes I build and then hit run too early (before the build is actually finished).
      - 52-6F-62 9y ago
        Ah yeah. I guess Webpack's boost would be lost if your project ends up at all complex as well. Are you doing all of your TS dev in Visual Studio as well?
        seanmcdirmid 9y ago
        No, since leaving Microsoft I've been doing everything on a Mac via VS Code.
        agopaul 9y ago

mohsen1 9y ago

If you're using VSCode it's super easy to try it out quickly: https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#review-details https://marketplace.visualstudio.com/items?itemName=mohsen1....

styfle 9y ago
I just tried the extension on this file[0] and it didn't create the Props :( [0]: https://raw.githubusercontent.com/s-yadav/react-number-format/master/src/number_format.js https://raw.githubusercontent.com/s-yadav/react-number-forma...
- mohsen1 9y ago
  Will look into it. Large files shouldn't be a problem.

HumanDrivenDev 9y ago

Typescirpt suppots mixed .js and .ts projects. You can even typecheck things based on jsdoc doc comments. https://github.com/Microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files https://github.com/Microsoft/TypeScript/wiki/Type-Checking-J... I really like typescript. I'm not a static typing fanatic like a lot of people are these days, I prefer the optional annotations approach. You can set the slider to be as loose or as strict as you want, which is amazing. One thing I've just discovered is you can write types like this type one_to_five = 1 | 2 | 3 | 4 | 5 And it just bloody works. I wish there was a decent REPL for it though. And no, the node REPL or anything based on it is not decent.

qudat 9y ago

I'd urge your to consider the huge time investment with converting a large web application to TS. It cannot be understated how much effort will be put into it. Any moderately sized application with take months of human-hours to get completely switched over. You'll be wrestling with third-party libraries with meager documentation on how to use with TS, lots of googling to understand how to get the compiler to not complain, and a new build system that has its own idiosyncrasies.