TypeScript support added to Create React App • Hacker News Board

Re: TypeScript support added to Create React App

#31

Post by akiselev » Tue, Oct 23, 2018, 2:31 AM UTC

jasonkillian wrote: post #16

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

There are _some_ downsides: * Slightly more complex build workflows * Integrating with non-TypeScript libraries can be difficult depending on the quality of external typings available * Error messages can at times be slightly obtuse (especially depending upon the complexity of types used) * Learning curve of TypeScript (Certain language features can be a bit complex. For example, mapped/conditional types might seem t…

My favorite is [1]. The downstream errors that type generates are "fun."

"Slightly obtuse" is an understatement when dealing with `Pick` and the errors the complimenting mapped types generate. Once you throw in React and higher order components, you can get errors that are literally several console pages long - although that's usually just tsc "tracing" the error through the complex types.

[1] https://github.com/piotrwitek/utility-types/blob/532fe5cfcc5...

Re: TypeScript support added to Create React App

#32

Post by jasonkillian » Tue, Oct 23, 2018, 2:44 AM UTC

wwwigham wrote: post #22

jasonkillian wrote: post #18

Earlier quoted context omitted.

How well does Babel transpile TS? My initial instinct is that I'd trust the real TS compiler over Babel, but I've never tried compiling TS with Babel. I assume the real TypeScript compiler still does the type-checking and that would be unaffected by Babel.

The TS team implemented the TS parsing support in Babel. You are correct that the TS compiler is still needed for the typechecker, however.

Ah, I didn't realize this, very cool collaboration! For those who are reading this and might find it helpful, here's a link to the official blog post on the work: https://blogs.msdn.microsoft.com/typescript/2018/08/27/types...

Re: TypeScript support added to Create React App

#33

Post by testvox » Tue, Oct 23, 2018, 2:55 AM UTC

akiselev wrote: post #31

jasonkillian wrote: post #16

Earlier quoted context omitted.

There are _some_ downsides: * Slightly more complex build workflows * Integrating with non-TypeScript libraries can be difficult depending on the quality of external typings available * Error messages can at times be slightly obtuse (especially depending upon the complexity of types used) * Learning curve of TypeScript (Certain language features can be a bit complex. For example, mapped/conditional types might seem t…

My favorite is [1]. The downstream errors that type generates are "fun." "Slightly obtuse" is an understatement when dealing with `Pick` and the errors the complimenting mapped types generate. Once you throw in React and higher order components, you can get errors that are literally several console pages long - although that's usually just tsc "tracing" the error through the complex types. [1] https://github.com/piot…

They have been working on the error UX for the last 2 releases and still have some things planned https://github.com/Microsoft/TypeScript/issues/26077

Re: TypeScript support added to Create React App

#34

Post by jasonkillian » Tue, Oct 23, 2018, 2:56 AM UTC

akiselev wrote: post #31

jasonkillian wrote: post #16

Earlier quoted context omitted.

There are _some_ downsides: * Slightly more complex build workflows * Integrating with non-TypeScript libraries can be difficult depending on the quality of external typings available * Error messages can at times be slightly obtuse (especially depending upon the complexity of types used) * Learning curve of TypeScript (Certain language features can be a bit complex. For example, mapped/conditional types might seem t…

My favorite is [1]. The downstream errors that type generates are "fun." "Slightly obtuse" is an understatement when dealing with `Pick` and the errors the complimenting mapped types generate. Once you throw in React and higher order components, you can get errors that are literally several console pages long - although that's usually just tsc "tracing" the error through the complex types. [1] https://github.com/piot…

Yes, your experience mirrors mine completely. It's quite difficult to get complex higher-order components working correctly, especially if you're throwing in things like defaultProps and propTypes. For example, some issues I've hit recently: [0][1].

I think this is likely an artifact though of how powerful TS's type system is. I'm sure there're error-readability improvements possible, but with such complex type constructs, it's not all together surprising to me that the error messages can be difficult.

My worry with these challenges is not that they make TS unworthwhile (it's still completely worth it), but they do make it a little harder to convince a team to adapt TS and sell TS to React developers who are use to working in JS.

I know the TS team has React support as a priority and they've done a pretty great job of making TS React-friendly. I do wish they'd be slightly more hands on with maintaining `@types/react` and even publishing documentation, but perhaps it's fine to leave that to the community.

For those struggling with React typings, https://github.com/piotrwitek/react-redux-typescript-guide is my current favorite resource.

[0]: https://github.com/Microsoft/TypeScript/issues/27484 [1]: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/28...

Re: TypeScript support added to Create React App

#35

Post by benatkin » Tue, Oct 23, 2018, 2:56 AM UTC

mikewhy wrote: post #24

cix_pkez wrote: post #5

Earlier quoted context omitted.

I'd call that a good thing, really. Not needing ever more dependencies. I think this is a solid direction to go. Let's just say I give the React devs... props.

Funny, cause just using typescript to compile means you get to drop a lot of Babel dependencies / eslint dependencies.

create-react-app is built on Webpack, for hot module replacement (HMR), and that requires a webpack loader. There's babel-loader and ts-loader. The stats in the projects are similar, but babel-loader is part of the babel project while ts-loader comes from an independent project, so it may be better integrated. Also ts-loader suggests using it with babel-loader. I'm not sure why, but if you install ts-loader and babel-loader you'll wind up with more dependencies than if you just install babel-loader. https://github.com/babel/babel-loader https://github.com/TypeStrong/ts-loader

Re: TypeScript support added to Create React App

#36

Post by olingern » Tue, Oct 23, 2018, 3:12 AM UTC

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

I had the advantage of working with people who had a background in typed languages, so everyone was onboard with giving Typescript a try a year ago.

The thing is, I found you have to be very diligent about how you organize your interfaces and how you might namespace them. I had some C# background, and had made a PR or two to the vscode repo -- so I had an idea of "good" code.

I think without some background in how you'll organize you types and, most importantly, types themselves you'll have some legwork in proving Typescript useful.

___

A suggestion I might have, because I found this mentally pleasing: start your project off small (get a few endpoints and some minimal database interaction). Let your co-workers look over it / maybe even do some small amount of work.

Create a typescript branch, where you convert each file to `.ts`. Typescript's compiler `tsc` can copy over all files `.js` and converted `.ts` so it's not essential you do this all at once, but I also found it not-so-painful either.

Demo this branch and show your co-workers that Typescript provides:

- A nice boost in productivity (autocomplete, hurray)

- Some confidence in how you're using types (this isn't a sound type system like flow)

- A way for people who don't have a background in javascript to feel more comfortable

Re: TypeScript support added to Create React App

#37

Post by swatcoder » Tue, Oct 23, 2018, 3:29 AM UTC

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

If you have influence over these kinds of decisions, then I expect have the experience to know that every choice has downsides.

If you haven't found any yet, that should be a Big Red Flag to you. It means you've let yourself get blinded by hype. The good news is that you're part of a team, and your team will probably be able to point some out to you.

Listen to them.

Once you've finally gotten yourself a sense of both the upsides and downsides, and have considered the latter seriously, work with your team to make a decision together. Then try to let yourself buy into whatever decision gets made!

There are definite benefits to TypeScript, but remember that no change comes for free!

Re: TypeScript support added to Create React App

#38

Post by smt88 » Tue, Oct 23, 2018, 3:37 AM UTC

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

TypeScript supports Flow-like type annotation in comments, which allows you to take advantage of static type-checking without transpiling.

That's as much as I know about it. I don't use that feature because transpiling is such a minor issue that I can't imagine any universe in which I would use comment-style types, which are slightly more cumbersome to use.

Re: TypeScript support added to Create React App

#39

Post by smt88 » Tue, Oct 23, 2018, 3:40 AM UTC

ergothus wrote: post #10

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

> There are no downsides but so many upsides I've not used TS, but from what I've read the types from TS are not js compatible, so once you go into TS you have code that just isnt js. (As opposed to flow, where you can just have it not be used) While transpiling is normal, I'm as hesitant to tie myself to TS as I am to, say, a non-standard decorators syntax. Anyone coming to me with "there are no downsides" in such a…

You're wrong.

Once you transpile the TS, you have standardized ECMAScript. Want to stop using TS? No problem. Just delete your TS files and work from your JS files.

And, beyond that, TS is intended to be a superset -- never incompatible, just "extra".

Finally, you can use TypeScript the same way Flow is used, through comments.

Tying yourself to TS isn't really something you can do, and there's zero risk in using it. You can always throw it out later.

Re: TypeScript support added to Create React App

#40

Post by kumarharsh » Tue, Oct 23, 2018, 4:05 AM UTC

smt88 wrote: post #38

netcraft wrote: post #6

offtopic, but I'm in the middle of trying to convince my small team to pick up typescript for a new significant node backend for our company. It seems like a no-brainer from my perspective. Compilation is fast, we would use `strict` but would allow devs to default to `any` if the types got too hard. There are no downsides but so many upsides - better refactoring, intellisense, documentation, communication of interfac…

TypeScript supports Flow-like type annotation in comments, which allows you to take advantage of static type-checking without transpiling. That's as much as I know about it. I don't use that feature because transpiling is such a minor issue that I can't imagine any universe in which I would use comment-style types, which are slightly more cumbersome to use.

That feature is for JS files. It helps you convert your JS project into flow/TS in a piecewise manner. Otherwise you'll have to do a major rewrite in a very short amount of time.