pick types from class by specific decorator

[trusktr]

I am aware that decorators can not currently modify the type of a class and this is not a feature request for that.

Suggestion

🔍 Search Terms

typescript pick properties by decorator

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

This is a feature request to be able to pick properties from a class type based on a particular decorator or set of decorators.

This would probably have to be a type with an intrinsic implementation.

📃 Motivating Example

The ability to do something this:

function someDecorator(...) {...}
function otherDecorator(...) {...}

class Foo {
  @someDecorator foo = 123
  bar = 456
  @otherDecorator baz = false
}

type SomeProps = PickByDecorator<Foo, typeof someDecorator> // { foo: number }
// or type SomeProps = PickByDecorator<typeof Foo, typeof someDecorator> ?

// pick by multiple decorators:
type SomeProps = PickByDecorator<typeof Foo, typeof someDecorator, typeof otherDecorator> // {foo: number, baz: boolean}
// or type SomeProps = PickByDecorator<typeof Foo, typeof someDecorator | typeof otherDecorator> ?

💻 Use Cases

Makes it easier to do things, for example pick properties that represent attributes for use in JSX.

Here's an example of a Custom Element for use in some hypothetical JSX framework, and we want only certain properties to be available via JSX:

import {defineElement, prop} from 'some-library'

@defineElement('cool-el')
class CoolEl extends HTMLElement {
  @prop foo = 123
  @prop bar = 456
  baz = false
}

// Use the special type to define what attributes can be used in JSX:
declare namespace JSX {
  interface IntrinsicElements {
    "cool-el": GlobalHTMLAttributes & Partial<PickByDecorator<CoolEl, typeof prop>>
  }
}

Without such a tool, we must resort to more repetitive code, with the opportunity for human error. In the following snippet, the user has to remember to keep the list of strings up to date with the decorator properties; which leads to more work, and easy to get it wrong:

import {prop} from 'some-library'

@defineElement('cool-el')
class CoolEl extends HTMLElement {
  @prop foo = 123
  @prop bar = 456
  baz = false
}

// Use the special type to define what attributes can be used in JSX:
declare namespace JSX {
  interface IntrinsicElements {
    "cool-el": GlobalHTMLAttributes & Partial<Pick<CoolEl, 'foo' | 'bar'>>
  }
}

Note that if the class has 20 properties decorated with @prop, they have to make sure they list the same 20 properties in the string list. They could accidentally also include the wrong properties, like so:

    "cool-el": GlobalHTMLAttributes & Partial<Pick<CoolEl, 'foo' | 'bar' | 'baz'>> // baz should not be included.

[IllusionMH]

May depend on #4881 with #33038 or #33290

[trusktr]

Note, unlike #4881, I don't want mutate the class type. I just want to know which properties were decorated with a decorator in order to derive types from the class.

[lybrus]

Another use case is using an entity object from the server side for the client applications. For example, exclude or pick some properties from the original class for safety purposes.

[trusktr]

Looks like ES decorators are here to stay and they're looking good! The good thing is not much has changed as far as how end users use decorators, so it is possible to implement new features like in this thread without a big risk of having to totally change it later.

[g-cheishvili]

Great, I need exactly this and while this is not available in ts itself, you can generate those types with babel, no human error, but still headache :)

[Harpush]

That's a great idea! Will finally make angular ngOnChanges fully typed.

[dpeter99]

I would love to see this feature for easily generating props types for JSX elements from the props in the class.