Extract all attributes from the class, including any additional properties

I'm attempting to generate a type by extracting properties from a class.

ts-essential makes it easy with the use of OmitProperties!

The issue I'm facing is that 

OmitProperties<T, Function>
not only eliminates the class methods but also removes any properties typed as any.

type GetProperties<T> = OmitProperties<T, Function>

class Foo {
    foo: string = '';
    bar: any | null = null;
}

export type FooProperties = GetProperties<Foo>; //  results in { foo: string; } only =(

Any suggestions on how to enhance this to include all properties, even those typed as any?

Playground

typescript

Answer №1

Consider replacing the usage of any with unknown (this is a general rule that can be applied in most cases):

class Foo {
    foo: string = '';
    bar: unknown | null = null;
}

export type FooProperties = GetProperties<Foo>; //  only { foo: string; } =(

// type FooProperties = {
//    foo: string;
//    bar: unknown | null;
// }

Answer №2

To customize the PickKeysByValue type, you can incorporate provisions to overlook any types.

type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N; 

type PickKeysByValue<T, V> = { 
  [K in keyof T]: IfAny<T[K], never, T[K] extends V ? K : never> 
}[keyof T];

export type FooProperties = GetProperties<Foo>;
// type FooProperties = {
//     foo: string;
//     bar: any | null;
// }

Playground

Remember that any typing such as any | null will simply condense to any.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the positions of BufferGeometry in three.js using Typescript

My current challenge involves following the recommended steps to update a BufferGeometry as detailed in this specific document: However, I am working with TypeScript and encounter an issue when attempting to modify values on line.geometry.attributes.posit ...

typescriptthree.js

Invoking a method in a derived class upon completion of asynchronous logic within the base class

Currently, I am in the process of building an Angular application. One aspect of my project involves a class that extends a base class. While this approach may not be ideal, I am curious to know what would be the best practice for BaseClass to trigger me ...

angulartypescript

Utilizing Angular Dependency Injection for Extending Base Services with Subclasses

My service setup includes a base service and two services that inherit from it: @Injectable({ providedIn: 'root' }) export class BaseService { foo(src?: string){ return `speaking from ${src || 'BaseService'}`; } } @Injectable ...

javascriptangulartypescriptinheritancedependency-injection

The Angular CLI suddenly decided to stop providing me with useful lines (without sourcemaps) in the browser console, but interestingly the terminal continues

I recently noticed a change in my Angular project that is using Angular CLI. Instead of receiving error lines from my code, I am getting errors from compiled files like main.js and vendor.js. The 'normal' error messages in my terminal are pointin ...

angulartypescriptangular-cli

Unexpected behavior in Typescript: variable type remains "unknown" after validation

Here is a code snippet I'm working with: You can view and interact with the code on the Typescript Playground. // this class is imported by the validator.ts module class EWC extends Error { constructor(public message: str... When working with th ...

typescripttypescript-generics

Angular 5 ngx-modialog issue TS2307: Module 'ngx-modialog/plugins/vex' not located

After installing module ngx-modialog using the Angular 5 CLI like this: npm install --save ngx-modialog I then added it to my app.module.ts: import { VexModalModule } from "ngx-modialog/plugins/vex"; import { ModalModule } from "ngx-modialog"; @NgModul ...

angulartypescriptangular-cli

What do you think about gulp-typescript and the latest @types typings for TypeScript?

I've added @types/jasmine as a development dependency. This is my gulp task for compiling TypeScript: gulp.task('compile:tests', ['compile:typescript', 'clean:tests'], function () { var project = ts.createProject(&a ...

typescripttypescript-typingsgulp-typescripttypescript2.0

Determine the generic type of the parent class based on the constructor of the child class

Below is a code snippet illustrating the issue at hand: class Parent<T = unknown> { constructor(private prop: T) {} getProp(): T { return this.prop; } } class Child extends Parent { constructor() { super({ ...

typescript

The element mat-divider in Angular is unrecognized

While testing a popup component in Angular, I encountered an error message that says: 'mat-divider' is not a known element: 1. If 'mat-divider' is an Angular component, then verify that it is part of this module. 2. If ' ...

angulartypescripttesting

What is the process of type checking in Typescript when passing arguments?

I'm curious about TypeScript and why the two function calls below result in different type checking outcomes. Can someone shed some light on this for me? interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) ...

objecttypescripttypesliterals

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

angulartypescriptangular-material2

Exploring the concept of converting a data type into an interface using map operations

Recently, I started learning Angular and I've been trying to wrap my head around how mapping from a response to an interface actually works. Let's take a look at the API response I received: [ { "id": 2, "name" : &qu ...

angulartypescriptobservable

Sequelize v5 & Typescript Model Loader

Having previous experience with Sequelize for projects (v4), I am now venturing into starting a new project using Sequelize v5 & Typescript. I have been following Sequelize's documentation on how to define Models at: https://sequelize.org/master/ ...

typescriptexpresssequelize.js

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

Can one bring in a JavaScript function using webpack?

I have a unique JS library called: say-my-greeting.js function SayMyGreeting (greeting) { alert(greeting); } Now I want to incorporate this function in another (.ts) file; special-class.ts import SayMyGreeting from './say-my-greeting.js' ex ...

typescriptwebpackimportrequire

Can we restrict type T to encompass subclasses of K, excluding K itself?

Can a generic type T be restricted to the subset of subtypes of type K, excluding K itself? I am attempting to define a type for inheritance-based mixin functions. An answer for the opposite case is provided in Question 32488309, and interestingly, this qu ...

typescripttypescript-generics

When implementing .forEach, an object within the array is mistakenly duplicated

Struggling to populate an array of objects with unique data using the .forEach function to display feedback in the Administrator page of my portfolio. However, encountering an issue where the objects from 'd' are getting duplicated in the 'f ...

javascriptarraysreactjstypescript

How can I move the cursor to the beginning of a long string in Mat-autocomplete when it appears at the end?

I'm struggling to figure out how to execute a code snippet for my Angular app on Stack Overflow. Specifically, I am using mat-autocomplete. When I select a name that is 128 characters long, the cursor appears at the end of the selected string instead ...

angulartypescriptmat-autocomplete

Copy and paste the code from your clipboard into various input fields

I have been searching for a Vanilla JavaScript solution to copy and paste code into multiple input fields. Although I have found solutions on the internet, they are all jQuery-based. Here is an example of such a jQuery solution <input type="text" maxl ...

javascripthtmltypescript

Eliminate duplicate dropdown options in Angular 2 using a filter function

Is there a way to filter reporting results in an Angular 2 dropdown list? I am currently attempting to do so within the *ngFor template but haven't had any success. I will also try using a custom pipe. The data is coming from a JSON array. Specificall ...

arraysangulartypescriptionic2angularjs-filter