My Problem with Using TypeScript in 2023

TypeScript should be easier!

**DISCORD**

**STAY IN TOUCH 👋**

**QUESTIONS ABOUT MY SETUP**

[krtirtho]

Being a typescript user I think it's one of the basic skills to find the appropriate types via navigating symbols/type definitions. Any modern IDE/LSP for any modern typed language supports this kind of stuff
I think it's more of an issue to a beginner rather than any intermediate or advanced TS dev or any typed language dev

[frankcooke]

I'll make this short and sweet. Learn to rely on go to definition to discover any typings associated with the library in question. Always do this before searching the web. Typed libs are essentially self documenting.

[rtorcato]

you don't have a typescript problem you have a problem creating a function before checking what the prop requires.

[adamclotfelter]

TypeScript did provide the answer, through tooling, which I think is the appropriate way for TypeScript to be involved in finding the answer.

From a web documentation standpoint, you wouldn’t expect the JavaScript site to provide answers for TypeScript, just because TS extends concepts of JS. The TS team can’t be expected to keep documentation on all the different frameworks built on TS, or that can be used with TS.

I also think some of the onus falls on the developer, to not just think of TypeScript as “JavaScript with types”, but to adapt their approach to development to really lean into the features, concepts, and workflow of the language they’re using.

Also, when I have a question like this, and don’t feel the tooling is helpful, it’s usually quickest to ask ChatGPT; you get an answer tailored to your specific question, and you can ask clarifying follow-up questions:

Q: What’s the typescript event type for a mouse event in react?

A: In React, when using TypeScript, you can type your mouse event handlers using the `React.MouseEvent` type. You can specify the type of element the event is attached to, for example, a button or a div:

```tsx
function handleClick(event: {
// ...
}

return <button onClick={handleClick}>Click me!</button>;
```

Here are some of the commonly used mouse events and their types in React with TypeScript:

- `onClick`: `React.MouseEvent<T>`
- `onMouseDown`: `React.MouseEvent<T>`
- `onMouseUp`: `React.MouseEvent<T>`
- `onMouseMove`: `React.MouseEvent<T>`
- `onMouseOver`: `React.MouseEvent<T>`
- `onMouseOut`: `React.MouseEvent<T>`
- `onMouseEnter`: `React.MouseEvent<T>`
- `onMouseLeave`: `React.MouseEvent<T>`

In the above types, `T` refers to the type of HTML element the event is attached to, like `HTMLButtonElement`, `HTMLDivElement`, etc.

[alexjohnson-bassworship]

I agree with the statement that this isn't a TS problem. TS is set up to be used with any framework, but at the end of the day it is the job of the maintainers of the framework to type everything properly and provide the documentation. Therefore this isn't an ecosystem problem - it is a problem at the product level of whatever tool you are using.

[mxz]

thats why i like Angular and Angular material. Everything nicely documented and typed and overall very powerful. with react you need to collect all your packages first and search every piece and part you need. with angular you get most of it out of the box and documented at one place.
Typescript still over JS at any time.

[andystevenson]

So often in Typescript you find yourself doing type gymnastics to get the basics working. I think the Sveltkit JSdocs makes the whole flow a much better DX. Certainly for rapid prototyping.

[PieterWigboldus]

As developing JS for 20+ years, I think all types are overhyped.
I build JS long before TS, also using event handlers.
You don't have to need the type hinting for everything, especially for basic JS and Browser methods, just check e.g. MDN, and debug what you receive.
The types you are using are not always correct, and you can pick the wrong type without knowing it, till something weird happened.

[lasindunuwanga]

Sometimes mouse hovering doesn’t work pretty good because types can be messy
In such a case solution is to Type[“property”] Please don’t blame the language or the libraries. When u have more experience in TS u will realize there can be tons of types in a code base. It is really hard to provide documentation for all of them. That is why TS has provided these features and some utility functions.

[DevlogBill]

I've been using JavaScript for over 1.5 years. I dread using TypeScript because you have to set up TypeScript. Or if you use TypeScript for Vite you get this weird templating and it is much different from the standard TypeScript implementation. BUT lately I've been checking out the job market for JavaScript and compared it to TypeScript and there are 3 times more TypeScript jobs over JavaScript! I guess I am going to have to bite the bullet and just suck it up and learn TypeScript. I guess if you are familiar with languages like Kotlin TypeScript shouldn't be so different.

[wezter]

I thought everyone knew this "trick", wouldn't be possible to work with TypeScript otherwise pretty much 😅

[hsdev]

Very helpful to know. Thank you James.

[miguelfeliciano]

This is great... there are times when there's still no intellisense or proper documentation, so in those cases I log out the parameters to the console to see the type of object I'm working with and that will often help to type the signature.

[ondrejhavazik]

James, I have to say, I'm really glad that I'm not the only one who is struggling with using TS! Personally, I use it in combination with React, too, and I have the same problems and sometimes, I'm so frustrated that I use Type Any and continue without the help of TS benefits. I also thought that this was always because of my lack of proper knowledge of TS, maybe there is a problem more on the React side. Thank you very much for the great video :-). I have a question, is there any chance you will create a video (or videocourse) using typescript, especially in combination with React? Thanks!

[simasbutavicius]

TypeScript examples in docs are nice, but when writing code in IDE there shouldn't be a need to google "What type does X expect", that's the whole point of TypeScript Language Server. TypeScript code is self-documenting, to a degree where you can actually generate library documentation from code automatically.

Thanks for the video, a good reference to show somebody who's not used to this workflow.

[codecreate]

Can we open source a type definition documentation for React, next, etc. It will serve as a go-to utility for quick solution. Who's down with this idea? Preferably someone who knows a thing or two about docs and Technical writing. I can scaffold a website. The structure and presentation will have to be deliberated.

[Perleques]

What browser are you using? Love the simple look without address bar!

[GavHTFC]

I think we've all been at this point in our early React+TypeScript journeys! I think the main reason could be that React itself doesn't have the types bundled in and they have to be maintained by DefinitelyTyped (at least, IIRC). Regarding the generics as well it would also be good to have a source somewhere of each element and what React thinks it is e.g. <section> doesn't have a matching HTMLSectionElement, so I find myself reverting to just HTMLElement with no idea if that's correct or there's something more suitable.

[DeadOcen]

I usually define the function inline just to get the types inferred automatically, and then extract the function if necessary.

[juozasmas]

Not knowing Code editor is problem also. to hover or ctrl + click, to navigate to type definititions. It is two source maintainence to have docs with the types, because you can access as pro ts dev, through type definitions every part..