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.