FR: allow access to typeArguments in JsxOpeningElement and JsxSelfClosingElement nodes
- Dominant language
- TypeScript
- Stars
- 6.2k
- Forks
- 238
- Avg merge
- 2m
- Merged PRs (30d)
- 1
Description
First off, just want to say that I've been enjoying the ts-morph API quite a bit in my recent work to implement some React component API migration codemods for [Blueprint](https://github.com/palantir/blueprint). ts-morph is a nice library 👍🏽
**Is your feature request related to a problem? Please describe.**
One bit which tripped me up a for a little while was trying to access type arguments on JSX elements. Support for this syntax was added in TS 2.9 (according to [this `typescript.d.ts` diff](https://github.com/microsoft/TypeScript/commit/79e5e79ef7724066889fbce97e9e6d6db4e746b5#diff-09aca484cb59b23385986c9ddc32542cdb85cb3cee5b6348a8cba40d03440e71)):
```ts
import React from "react";
class Select extends React.Component<{ data: T }> {
// ...
}
const MySelect = () => (
/>
// ^^^^^^^^ this thing
);
```
Type arguments are accessible on ts-morph nodes if I get the underlying compiler node:
```ts
const el: JsxOpeningElement = ...
el.compilerNode.typeArguments // ts.NodeArray | undefined
```
It seems like the only option to manipulate these type arguments right now is to replace the text of the tag name node. For example, if I wanted to change `string` to `number` in the example above:
```ts
el.getTagNameNode().replaceWithText("Select");
```
This works, but is not super elegant.
**Describe the solution you'd like**
It would be nice to recognize `JsxOpeningElement`s and `JsxSelfClosingElement`s as `TypeArgumentedNode`s, so we could do something like:
```ts
el.getTypeArguments().forEach(a => el.removeTypeArgument(a));
el.addTypeArgument("number");
// or
el.replaceTypeArguments(["number"]);
```
**Describe alternatives you've considered**
See `replaceWithText()` example above
Contributor guide
Research direction
Start by locating the JsxOpeningElement and JsxSelfClosingElement wrappers and the TypeArgumentedNode entry point, then inspect how compilerNode.typeArguments is represented. Done means both JSX node kinds expose the requested type-argument access and mutation operations described in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100