Can TypeScript support the implementation of versatile decorators that can be linked together based on their input and output types?

Question

Can TypeScript support the implementation of versatile decorators that can be linked together based on their input and output types?

Within our integration processes, we have developed templated implementations in our codebase that align well with the "pipe and filter" pattern in my opinion.

These "components" can be structured in the following formats:

class Component1<In, Out, Xin, Xout>
class Component2<Xin, Xout, Yin, Yout>
class Component3<Yin, Yout> // only includes 2 parameters, but could potentially be <Yin, Yout, None, None> for a customized 'None' type

The concept is to enable these components to be "chained" together, allowing for a sequence like this:

const c1 = new Component1<A,B,C,D>(...) // potentially pass parameter types in the constructor? Other alternatives?
const c2 = new Component2<C,D,E,F>(...)
const c3 = new Component3<E,F, None, None>(...)

const chain = c1.andThen(c2).andThen(c3) // The "final" element in the chain will "always" be a component of type <X,Y, None, None>

chain.run() // Uncertain if this is necessary, but to clarify that something executes this chain

I'm struggling to find a "universal" method of constructing these components where the chaining can be "specified" at compile time to restrict which components can connect with others (i.e., the input/output types must align). Therefore, c1 can only be followed by c2 and not by c3 - and no components can be linked after c3.

Is this a feasible endeavor? Any approaches to achieve something similar?

(For those who are curious: aiming for a similar level of composability as Finagle offers in the Scala realm)

javascript typescript decorator finagle

Answer 1

Answer №1

It seems like there might be some confusion in your use of generics, particularly in distinguishing between type parameter variables and the actual concrete types being inserted. Additionally, the use of terms like val and None might not align with TypeScript conventions. Nevertheless, the following snippet is a possible solution that compiles and could potentially achieve the desired behavior:

type NotNever<T, Y=T, N=never> = [T] extends [never] ? N : Y;

// Defining a base component class with generic type parameters
declare class BaseComponent<In, Out, Xin=never, Xout=never> {
  i: In;
  o: Out;
  xi: Xin;
  xo: Xout;

  andThen<Yin, Yout>(
    this: NotNever<Xin | Xout, this>,
    c: BaseComponent<Xin, Xout, Yin, Yout>
  ): BaseComponent<In, Out, Yin, Yout>;

  run(this: BaseComponent<In, Out, never, never>): void;
}

class Component1 extends BaseComponent<'In', 'Out', 'Xin', 'Xout'> { }
class Component2 extends BaseComponent<'Xin', 'Xout', 'Yin', 'Yout'> { }
class Component3 extends BaseComponent<'Yin', 'Yout'> { }

Here's how you can test it:

const c1 = new Component1();
const c2 = new Component2();
const c3 = new Component3();

c1.andThen(c1); // error
c1.andThen(c2); // okay
c1.andThen(c3); // error
c1.run(); // error

c2.andThen(c1); // error
c2.andThen(c2); // error
c2.andThen(c3); // okay
c2.run(); // error

c3.andThen(c1); // error
c3.andThen(c2); // error
c3.andThen(c3); // error
c3.run(); // okay

const chain = c1.andThen(c2).andThen(c3);
chain.run(); // okay

If this approach aligns with your requirements, then good luck with your implementation!

Alternatively, here's another method to achieve a similar outcome without using conditional types or polymorphic this:

// Defining base classes for chain components
declare class EndComponent<In, Out> {
  i: In;
  o: Out;
  run(): void;
}

declare class PipeComponent<In, Out, Xin, Xout> {
  i: In;
  o: Out;
  xi: Xin;
  xo: Xout;
  
  andThen<Yin, Yout>(
    c: PipeComponent<Xin, Xout, Yin, Yout>
  ): PipeComponent<In, Out, Yin, Yout>;
  
  andThen(c: EndComponent<Xin, Xout>): EndComponent<In, Out>;
}

class Component1 extends PipeComponent<'In', 'Out', 'Xin', 'Xout'> {}
class Component2 extends PipeComponent<'Xin', 'Xout', 'Yin', 'Yout'> {}
class Component3 extends EndComponent<'Yin', 'Yout'> {}

The functionality should remain consistent with the previous approach. Best of luck with your project!

Answer 2

It seems like there might be some confusion in your use of generics, particularly in distinguishing between type parameter variables and the actual concrete types being inserted. Additionally, the use of terms like val and None might not align with TypeScript conventions. Nevertheless, the following snippet is a possible solution that compiles and could potentially achieve the desired behavior:

type NotNever<T, Y=T, N=never> = [T] extends [never] ? N : Y;

// Defining a base component class with generic type parameters
declare class BaseComponent<In, Out, Xin=never, Xout=never> {
  i: In;
  o: Out;
  xi: Xin;
  xo: Xout;

  andThen<Yin, Yout>(
    this: NotNever<Xin | Xout, this>,
    c: BaseComponent<Xin, Xout, Yin, Yout>
  ): BaseComponent<In, Out, Yin, Yout>;

  run(this: BaseComponent<In, Out, never, never>): void;
}

class Component1 extends BaseComponent<'In', 'Out', 'Xin', 'Xout'> { }
class Component2 extends BaseComponent<'Xin', 'Xout', 'Yin', 'Yout'> { }
class Component3 extends BaseComponent<'Yin', 'Yout'> { }

Here's how you can test it:

const c1 = new Component1();
const c2 = new Component2();
const c3 = new Component3();

c1.andThen(c1); // error
c1.andThen(c2); // okay
c1.andThen(c3); // error
c1.run(); // error

c2.andThen(c1); // error
c2.andThen(c2); // error
c2.andThen(c3); // okay
c2.run(); // error

c3.andThen(c1); // error
c3.andThen(c2); // error
c3.andThen(c3); // error
c3.run(); // okay

const chain = c1.andThen(c2).andThen(c3);
chain.run(); // okay

If this approach aligns with your requirements, then good luck with your implementation!

Alternatively, here's another method to achieve a similar outcome without using conditional types or polymorphic this:

// Defining base classes for chain components
declare class EndComponent<In, Out> {
  i: In;
  o: Out;
  run(): void;
}

declare class PipeComponent<In, Out, Xin, Xout> {
  i: In;
  o: Out;
  xi: Xin;
  xo: Xout;
  
  andThen<Yin, Yout>(
    c: PipeComponent<Xin, Xout, Yin, Yout>
  ): PipeComponent<In, Out, Yin, Yout>;
  
  andThen(c: EndComponent<Xin, Xout>): EndComponent<In, Out>;
}

class Component1 extends PipeComponent<'In', 'Out', 'Xin', 'Xout'> {}
class Component2 extends PipeComponent<'Xin', 'Xout', 'Yin', 'Yout'> {}
class Component3 extends EndComponent<'Yin', 'Yout'> {}

The functionality should remain consistent with the previous approach. Best of luck with your project!

Answer 3

Answer №2

Here is the code snippet I have:

class Component<T, U> {
    constructor(private t: T, private u: U) {}
    andThen<V>(component: Component<U, V>): Component<U, V> {
        // implementation of andThen
        return component;
    }
    static run<T>(component: Component<T, null>) {
        // implementation of run
    }
}

type A = 'a'; const a: A = 'a';
type B = 'b'; const b: B = 'b';
type C = 'c'; const c: C = 'c';

const c1 = new Component<A, B>(a, b);
const c2 = new Component<B, C>(b, c);
const c3 = new Component<C, null>(c, null);

c2.andThen(c1); // TypeScript error: A is not assignable to B
Component.run(c1.andThen(c2)); // TypeScript error: Component<B,C> not assignable to Component<B,null>
Component.run(c1.andThen(c2).andThen(c3));

I have simplified the code by using <T,U> instead of <Xin, Xout, Yin, Yout>, but it can be easily adjusted.

The type of the chain works as expected. However, at runtime,

Component<...,X>.andThen(Component<Y,...>)

is recognized as invalid (first TypeScript error).

After some refactoring, I realized that it is not the chain itself (i.e., Component) that triggers the .run method - I couldn't figure out a compile-time way to detect if .run was called by a Component<..., null> (i.e., the last component in a chain).

Instead, I moved the run method as a static method of the Component class, and it only accepts a last component as input. The usage is demonstrated in the last two lines.

Lastly, the class is designed to be very generic and polymorphic, allowing for chaining of multiple components!

(new Component<'a', 'b'>('a', 'b'))
.andThen(new Component<'b', 'c'>('b', 'c'))
.andThen(new Component<'c', 'd'>('c', 'd'))
.andThen(new Component<'d', 'e'>('d', 'e'))
.andThen(new Component<'e', 'f'>('e', 'f'))
.andThen(new Component<'f', 'g'>('f', 'g'))

I hope this meets your requirements.

Answer 4

Here is the code snippet I have:

class Component<T, U> {
    constructor(private t: T, private u: U) {}
    andThen<V>(component: Component<U, V>): Component<U, V> {
        // implementation of andThen
        return component;
    }
    static run<T>(component: Component<T, null>) {
        // implementation of run
    }
}

type A = 'a'; const a: A = 'a';
type B = 'b'; const b: B = 'b';
type C = 'c'; const c: C = 'c';

const c1 = new Component<A, B>(a, b);
const c2 = new Component<B, C>(b, c);
const c3 = new Component<C, null>(c, null);

c2.andThen(c1); // TypeScript error: A is not assignable to B
Component.run(c1.andThen(c2)); // TypeScript error: Component<B,C> not assignable to Component<B,null>
Component.run(c1.andThen(c2).andThen(c3));

I have simplified the code by using <T,U> instead of <Xin, Xout, Yin, Yout>, but it can be easily adjusted.

The type of the chain works as expected. However, at runtime,

Component<...,X>.andThen(Component<Y,...>)

is recognized as invalid (first TypeScript error).

After some refactoring, I realized that it is not the chain itself (i.e., Component) that triggers the .run method - I couldn't figure out a compile-time way to detect if .run was called by a Component<..., null> (i.e., the last component in a chain).

Instead, I moved the run method as a static method of the Component class, and it only accepts a last component as input. The usage is demonstrated in the last two lines.

Lastly, the class is designed to be very generic and polymorphic, allowing for chaining of multiple components!

(new Component<'a', 'b'>('a', 'b'))
.andThen(new Component<'b', 'c'>('b', 'c'))
.andThen(new Component<'c', 'd'>('c', 'd'))
.andThen(new Component<'d', 'e'>('d', 'e'))
.andThen(new Component<'e', 'f'>('e', 'f'))
.andThen(new Component<'f', 'g'>('f', 'g'))

I hope this meets your requirements.

Can TypeScript support the implementation of versatile decorators that can be linked together based on their input and output types?

Answer №1

Answer №2

Similar questions

Leveraging ng-repeat within ng-view

splitting xmlhttp.responsetext using loops

Convert all key types into arrays of that key type using a TypeScript utility type

Ensure the correct file extension is chosen when selecting a file for the 'file_field' and display any error messages using Ruby on Rails

Exploring the power of Google Charts in conjunction with PHP arrays

Generating a USA map with DataMaps in d3jsonData

a solution to the focus/blur issue in Firefox's browser bug

Creating route in Node.js using the forEach method

Refreshing a Vue JS component

There seems to be an issue in Angular as it is unable to retrieve /

Arranging an array of JSON objects without keys in a specific order

Tips for verifying a login modal on an asp.net webforms using jQuery?

React is failing to display JSX elements within a map function

Tips for indicating request parameters in Drive.Comments.list

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

Load a partial view in MVC using Ajax with a complex data structure

When copying text from React-PDF Display, the values may appear altered or varied

Positioning tooltip arrows in Highcharts

Identifying Elements Generated on-the-fly in JavaScript

Open the URL in a new tab based on certain conditions