10 ms·
TypeScript support added to Create React App
- deleted 8y ago[deleted]
- davidjnelson 8y agoDiff of the pull request: https://github.com/facebook/create-react-app/pull/4837/commits/506d1734e02823ad8094ede96a9aa4110381e586 https://github.com/facebook/create-react-app/pull/4837/commi...
- baddox 8y agoInteresting that the first line of that pull request removed the Oxford comma.
- AbuAssar 8y agoI'm pretty sure it wan't intended at first place though.
- coffeeboy27 8y agoWho gives a fuck about an Oxford comma?
- dang 8y agoPlease don't post unsubstantive comments here.
- solidr53 8y agoPretty much just file extension support and docs. The support mainly comes from Babel 7.
- cix_pkez 8y agoI'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.
- mikewhy 8y agoFunny, cause just using typescript to compile means you get to drop a lot of Babel dependencies / eslint dependencies.
- benatkin 8y agocreate-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/babel/babel-loader https://github.com/TypeStrong/ts-loader https://github.com/TypeStrong/ts-loader
- baddox 8y agoThe last I checked (a month or so ago, but before the recent 2.0 release) create-react-app didn’t have hit module replacement. It just watched files and completely reloaded the browser when anything changed.
- WorldMaker 8y agoThere's still react-scripts-ts [1] which drops the majority of Babel in the CRA pipeline for solely Typescript. Presumably, it will remain active as it is still a useful alternative if you know you are going to want Typescript from day one. (This Babel-based support is perfect for those unsure and looking to experiment, which is great.) [1] https://github.com/wmonk/create-react-app-typescript https://github.com/wmonk/create-react-app-typescript
- jasonkillian 8y agoHow 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.
- wwwigham 8y agoThe TS team implemented the TS parsing support in Babel. You are correct that the TS compiler is still needed for the typechecker, however.
- jasonkillian 8y agoAh, 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/typescript-and-babel-7/ https://blogs.msdn.microsoft.com/typescript/2018/08/27/types...
- brunolemos 8y agoWe added more changes on master, now it creates tsconfig automatically, checks if the required dependencies are installed and other nice ux improvements.
- netcraft 8y agoofftopic, 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 interfaces, protection against the javascript and library minefields. Glad to see there are lots of other people thinking this is valuable - wish I could figure out the right way to convince my team.
- lj3 8y agoWho's in charge of making the decision to switch? What are his priorities? What problems is he trying to solve? How does switching to typescript help him do that better/faster/cheaper/easier?
- netcraft 8y agoThats the problem, I dont really have answers to those questions about his priorities/motivations/reservations yet - just that there are some. Hope to find out soon.
- jczhang 8y agowhy not just ask how they feel about it and try to address concerns if they come up?
- netcraft 8y agoThat will certainly happen - my intent behind this comment is to hear from other people who have looked at it and decided against it. Or devils advocates - I'd like to hear anyones reservations either to convince me its not as good as I think it is, or at least allow me to come up with a response.
- ergothus 8y ago> 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 case doesnt sound very credible. Assuming I'm wrong, how would you address this?
- karmakaze 8y agoBTW, anyone here used ReastReason, BuckleScript is it? I've been meaning to look into it but don't have a sense of the payoff. I read that it can coexist which is a great feature. Wonder how it compares to a TypeScript workflow.
- bgorman 8y agoMuch faster compilation times, very strick static type checking, however a very small community. Interop syntax is pretty tedious but it has no performance penalty. For example Clojurescript has a much bigger community.
- jey 8y agoI'm diving into Reason now and it seems great. It seems like "Flow done right" -- about a year ago, I did a study of both Flow and TypeScript, then picked Flow because it seemed more principled and expressive. But it turned out that bolting Flow onto Javascript left it with a lot of edge cases and some oddities, but Reason instead avoids that by compiling to javascript instead of being bolted atop Javascript. tldr: Reason is better than both TypeScript and Flow and has equally good interop with native untyped Javascript code.
- scottmf 8y agoAs much as I want to love it, I’ve found it far too restrictive, which makes it difficult to play around with and learn (although error messages have recently improved). And while I like that JSX is built-in, I don’t like that it’s so different. And having to use <div> ReasonReact.stringToElement("Blah") </div> (The spaces are required) everywhere instead of <div>Blah<div> makes it feel like a poor imitation of JSX and isn’t fun at all. But maybe they’ve fixed some of that. Someone else said Reason is “better”. The type system might be more sound but TS is far more flexible and forgiving, and doesn’t have ugly and off-putting syntax for promises/async and interop.
- baddox 8y agoI find the benefits outweigh those disadvantages, but I would never suggest switching to Reason for a non-experimental project at work because I think the disadvantages scream “this isn’t quite ready yet.”
- matchbok 8y agoGreat to see. Any javascript project of reasonable size quickly eventually collapses under its own weight.
- dwaltrip 8y agoTypescript looks interesting and increasingly appealing -- it is high on my list of tech to explore. However, absolutist statements are not very useful... It shouldn't even need saying, but clearly large javascript projects do succeed from time to time.
- BigJono 8y ago"Time to time" is reductive even. Large Javascript projects succeed all the time, and have done for decades. This whole thread needs a bit of perspective, no matter what you think of Typescript, the web wasn't invented in 2015...
- tigershark 8y agoI guess it depends on your definition of large...
- dwaltrip 8y agoVery true. I was being soft with my language in an effort to make my point more digestible.
- chris_st 8y agoI'd love to use TypeScript, but I've hit walls of errors that are nearly as bad as the old C++ template errors! (Though to be fair, this was a while ago, the compiler may have improved). SO: Any good way to learn TypeScript, particularly the more complicated types?
- acemarke 8y agoWhat sort of errors are you running into, and what project setup are you using? If you're using Create-React-App-TS, that's a separate fork of CRA 1.x that adds TS support, and has _horribly_ restrictive lint rules (many common style practices are treated as _compile_ errors). See https://github.com/wmonk/create-react-app-typescript/issues/333 https://github.com/wmonk/create-react-app-typescript/issues/... for discussion. (I ran across this while trying to set up a TS project for another team.) I'm happy to see the TS support in CRA 2.x, because now I can actually recommend that people use it to get started with TS support. I personally had never actually _used_ TS at all until this last week, when I was helping that same team rework some of their code. They'd been slapping `someVar : any` across the entire codebase just to make the compiler shut up. I tried adding a type representing their API response object, added it as a prop to the appropriate React component, and showed them how you could start getting autocomplete and compile-time catching of mistakes, and suddenly they began to see that there were actually benefits of using TS, not just overhead. I'm hoping to try adding TS support in to my own team's codebase in the near future.
- Nican 8y agoI use TypeScript every day, and I like it way better than JavaScript, but here is an example of a bad error message: http://ss.nican.net/photo_2018-10-22_22-09-58.jpg http://ss.nican.net/photo_2018-10-22_22-09-58.jpg
- acemarke 8y agoYup, totally agree - that's pretty tough to read. In that _specific_ example, I think the key part is the "... is not assignable to ServerRoute | ServerRoute[]". It's just giving you all the fields in the type of the object you _are_ returning, and trying to tell you "I can't go from an A to a B". But yes, hard to pick out the key bits of info in there.
- markatkinson 8y agoThis is awesome. I recently moved from Typescript to plain Javascript for a project and it is quite frustrating. You don't realise what you had till it's gone!