Author: John Au-Yeung

Sometimes, we want to fix the "Property does not exist on type ‘{}’" error with TypeScript.

In this article, we’ll look at how to fix the "Property does not exist on type ‘{}’" error with TypeScript.

How to fix the "Property does not exist on type ‘{}’" error with TypeScript?

To fix the "Property does not exist on type ‘{}’" error with TypeScript, we can set the variable causing the error to any type.

For instance, we write

const bar: any = {};
bar.foo = "foobar";

to set the bar variable to the any type.

Then we can do anything we want with bar.

Conclusion

To fix the "Property does not exist on type ‘{}’" error with TypeScript, we can set the variable causing the error to any type.

Sometimes, we want to create an observable with a delay with Rxjs.

In this article, we’ll look at how to create an observable with a delay with Rxjs.

How to create an observable with a delay with Rxjs?

To create an observable with a delay with Rxjs, we can use the from observable with the delay and concatMap operators.

For instance, we write

import { from, of } from "rxjs";
import { delay } from "rxjs/internal/operators";
import { concatMap } from "rxjs/internal/operators";

const myArray = [1, 2, 3];

from(myArray)
  .pipe(concatMap((item) => of(item).pipe(delay(1000))))
  .subscribe((timedItem) => {
    console.log(timedItem);
  });

to create an observer from the myArray array with from.

Then we call pipe with the concatMap operator called with a callback that returns an of observable that’s delayed with the delay by 1000 milliseconds.

Conclusion

To create an observable with a delay with Rxjs, we can use the from observable with the delay and concatMap operators.

To fix the "Object literal may only specify known properties" error with TypeScript, we can add dynamic keys properties into our interfaces with index signatures.

For instance, we write

interface Model {
  name: string;
  [others: string]: any;
}

const createModel = (x: Model) => {
  //...
};

createModel({ name: "hello", length: 100 });

to create the Model interface that has the required name property.

And we have

[others: string]: any;

to add an index signature that lets the interface allow any optional property other than name into our Model type object in addition to name.

Therefore,

createModel({ name: "hello", length: 100 });

won’t throw an error since the object that createModel is called with has name and another property.

Sometimes, we want to unwrap the type of a Promise with TypeScript.

In this article, we’ll look at how to unwrap the type of a Promise with TypeScript.

How to unwrap the type of a Promise with TypeScript?

To unwrap the type of a Promise with TypeScript, we can use the Awaited type.

For instance, we write

type T = Awaited<Promise<PromiseLike<number>>>;

to create type T that is set to Awaited<Promise<PromiseLike<number>>>.

We use Awaited with Promise<PromiseLike<number>> to return the data type of the resolved value of a promise like object that we use await with.

Therefore T is number.

Conclusion

To unwrap the type of a Promise with TypeScript, we can use the Awaited type.

Sometimes, we want to fix the "Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes" with TypeScript and React.

In this article, we’ll look at how to fix the "Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes" with TypeScript and React.

How to fix the "Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes" with TypeScript and React?

To fix the "Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes" with TypeScript and React, we should set the props’ data types when we’re defining our component.

For instance, we write

interface IMyProps {
  myValue: boolean;
}

const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {
  //  ...
};

export default MyComponent;

to set the prop‘s data type to IMyProps.

Then props must have the IMyProps data type so the myValue prop must be present and set to a boolean.

Conclusion

To fix the "Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes" with TypeScript and React, we should set the props’ data types when we’re defining our component.