I don't understand why I'm receiving the error message "Unsafe assignment of an `any` value" when I clearly defined the value as a string with a default value

Question

I don't understand why I'm receiving the error message "Unsafe assignment of an `any` value" when I clearly defined the value as a string with a default value

I am puzzled by the 2 eslint errors in this code snippet. The property is declared as a string with a default value:

export default {
  name: '...',
  props: {
    x: {
      type: String,
      required: true,
      default: ''
    }
  },
  setup(props) {
    onMounted(async () => {
      await MyObject(
        {
          x: props.x, // <-- eslint warnings
        }
      ).then(...);

The 2 eslint warnings are:

Unsafe assignment of an any value.eslint@typescript-eslint/no-unsafe-assignment
Unsafe member access .initialDoc on an any value.eslint@typescript-eslint/no-unsafe-member-access

The MyObject function comes from an external library and its declaration is like this:

declare const MyObject: MyObject;
// ...
declare type MyObject = {
    (options: MyObjectOptions): Promise<...>
// ...
export type MyObjectOptions = {
  x?: string | string[];
}

Despite having well-defined types throughout, why are the eslint warnings showing up?

typescript vuejs3 eslint

Answer 1

Answer №1

Would you mind testing the following code snippet:

import { PropType } from 'vue';

properties: {
   parameter: {
      kind: String as PropType<string>,
      mandatory: true
   }
}

Note: there is no necessity for a default value when the property is obligatory

Answer 2

Would you mind testing the following code snippet:

import { PropType } from 'vue';

properties: {
   parameter: {
      kind: String as PropType<string>,
      mandatory: true
   }
}

Note: there is no necessity for a default value when the property is obligatory

Answer 3

Answer №2

To resolve this issue, it is recommended to utilize the defineComponent method as explained in this documentation page:

If you are not using <script setup>, you must use defineComponent() in order to enable props type inference. The type of the props object passed to setup() will be inferred from the props option.

In my situation, all that was required was:

export default defineComponent({
  name: '...',
  props: {
    x: {
      type: String,
      required: true
    }
    // ...
});

It's important to note that, as suggested by @BorisMaslennikov, the default is unnecessary.

Answer 4

To resolve this issue, it is recommended to utilize the defineComponent method as explained in this documentation page:

If you are not using <script setup>, you must use defineComponent() in order to enable props type inference. The type of the props object passed to setup() will be inferred from the props option.

In my situation, all that was required was:

export default defineComponent({
  name: '...',
  props: {
    x: {
      type: String,
      required: true
    }
    // ...
});

It's important to note that, as suggested by @BorisMaslennikov, the default is unnecessary.

I don't understand why I'm receiving the error message "Unsafe assignment of an `any` value" when I clearly defined the value as a string with a default value

Answer №1

Answer №2

Similar questions

What is the best way to set up a reactive form in Angular using the ngOnInit lifecycle

What is the proper way to include type annotation in a destructured object literal when using the rest operator?

Transitioning from Angular Http to HttpClient: Overcoming Conversion Challenges

react state change not triggering re-render of paragraph

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

How can I utilize the color prop in the theme file to style new variants more comprehensively with MUI theming?

Is there a method to ensure the strong typing of sagas for dispatching actions?

Is it possible to use Firebase auth.user in order to retrieve the signed-in user directly?

Executing a function for every element within a loop in Angular 11 - the Angular way

What is the process for integrating an extension function into an Express response using TypeScript?

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Switching cell icon when clicked - A step-by-step guide

Tips on efficiently adding and removing elements in an array at specific positions, all the while adjusting the positions accordingly

Utilizing Typescript to Transfer Data from Child to Parent in React

Restrict the frequency of requests per minute using Supertest

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

The parameter type SetStateAction<MemberEntityVM[]> cannot be assigned the argument type Promise<MemberEntityVM[]> in this context

The instantiation of generic types in Typescript

After subscribing, creating the form results in receiving an error message that says "formgroup instance expected."

Initial compilation of Angular 2 project with lazy-loaded submodules fails to resolve submodules