How to check if a string is one of Interface's properties ? (Typescript)

Question

var attributeStr = 'scaleX'

interface CSSTransformsAttr{
   scaleX: number,
   scaleY: number,
   skewX: number,
   skewY: number,
   translateX: number,
   translateY: number
}

How to check if the value of attributeStr is equal to a key in CSSTransformsAttr ?

Why do i ask this?

function setStyleAttributes(attrs: { [ k in keyof ( CSSStyleDeclaration & CSSTransformsAttr )]?: any }): void {
    if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                /// how to check if 'key' is from the CSSTransfomsAttr not CSSStyleDeclaration ?
                /// ...
            this.htmlElement.style[key]=  attrs[key]; // (1) if key in keyof CSSStyleDeclaration
        });
    }
}

Could you edit your post and include the code in the image as text? Please copy and paste it here from your editor, instead of using a screenshot. — igg
– igg, Commented Jan 13, 2020 at 10:50

igg · Accepted Answer · 2020-01-13 11:05:56Z

3

Simply checking keyof is only going to work at compile time, not runtime. You need to store all the keys in an array and check if your value exists in it. This can be done manually:

interface CSSMatrixTransforms{
   scaleX: number,
   scaleY: number,
   skewX: number,
   skewY: number,
   translateX: number,
   translateY: number
};
type CSSMatrixTransformsKey = keyof CSSMatrixTransforms;
const matrixKeys: CSSMatrixTransformsKey[] = [
   'scaleX',
   'scaleY',
   'skewX',
   'skewY',
   'translateX',
   'translateY'
];

Alternatively, you can create a "dummy" object that implements your interface and then call Object.keys on it.

interface CSSMatrixTransforms{
   scaleX: number,
   scaleY: number,
   skewX: number,
   skewY: number,
   translateX: number,
   translateY: number
}
type CSSMatrixTransformsKey = keyof CSSMatrixTransforms;
const dummy: CSSMatrixTransforms = {
   scaleX: 0,
   scaleY: 0,
   skewX: 0,
   skewY: 0,
   translateX: 0,
   translateY: 0
}
const matrixKeys: CSSMatrixTransformsKey[] = Object.keys(dummy) as CSSMatrixTransformsKey[];

Finally, in your code, check if your key exists in the matrixKeys array:

function setStyleAttributes(attrs: { [ k in keyof ( CSSStyleDeclaration & CSSTransformsAttr )]?: any }): void {
    if (attrs !== undefined) {
            Object.keys(attrs).forEach((key: string) => {
                if(matrixKeys.includes(key)) {
                    this.htmlElement.style[key] = attrs[key];
                }

        });
    }
}

Check this out as well.

answered Jan 13, 2020 at 11:05

igg

2,2803 gold badges13 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bao Phuc Tran Over a year ago

Thank you! Wondering if they can make it as a feature for Typescript in the future.

igg Over a year ago

Yes, that would be very helpful. For the moment, this is the way to accomplish this.

Murat Karagöz · Accepted Answer · 2020-01-13 10:18:04Z

0

With the keyof operator e.g.

var attributeStr: keyof CSSMatrixTransforms = 'scaleX' // ok

var attributeStr: keyof CSSMatrixTransforms = 'scaleX1' // wrong

answered Jan 13, 2020 at 10:18

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

2 Comments

Bao Phuc Tran Over a year ago

Murat Karagöz Over a year ago

You have to define the return type of randomString with the same type as attributeStr

ghiscoding · Accepted Answer · 2021-09-30 19:53:45Z

I came up with the code shown below, I had to add the as to cast them but at least I no longer use the any Type anywhere now.

// we need to exclude readonly & function properties (since they're not writable props)
export type CSSStyleDeclarationReadonly = 'length' | 'parentRule' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty';
export type CSSStyleDeclarationWritable = keyof Omit<CSSStyleDeclaration, CSSStyleDeclarationReadonly>;

Object.keys(this.stylingCss as CSSStyleDeclaration).forEach(cssStyleKey => {
  this.elem!.style[cssStyleKey as CSSStyleDeclarationWritable] = this.stylingCss[cssStyleKey as CSSStyleDeclarationWritable];
});

There you go, no more errors and now it does Type checking correctly

Collectives™ on Stack Overflow

How to check if a string is one of Interface's properties ? (Typescript)

Why do i ask this?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Why do i ask this?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related