Category: TypeScript

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.

Sometimes, we want to create nested classes in TypeScript.

In this article, we’ll look at how to create nested classes in TypeScript.

How to create nested classes in TypeScript?

To create nested classes in TypeScript, we can create a static class property in our class.

For instance, we write

class Foo {
  static Bar = class {};
}

const foo = new Foo();
const bar = new Foo.Bar();

to create the Foo class that has the static Bar property which is set to a class expression.

Then we can create a Bar instance with

const bar = new Foo.Bar();

Conclusion

To create nested classes in TypeScript, we can create a static class property in our class.

To use Node.js Mongoose with TypeScript, we can create interfaces that extends interfaces provided by Mongoose.

For instance, we write

export interface IUser extends mongoose.Document {
  name: string;
  somethingElse?: number;
}

export const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  somethingElse: Number,
});

const User = mongoose.model<IUser>("User", UserSchema);
export default User;

to create the IUser interface that extends the mongoose.Document interface.

And then we use it to create our model with mongoose.model<IUser>.

Therefore, the User has the name and the optional somethingElse properties.

Conclusion

To use Node.js Mongoose with TypeScript, we can create interfaces that extends interfaces provided by Mongoose.