Version

3.2.1

Reproduction link

https://github.com/BurnashevDmitry/date_error_vue_complier

Steps to reproduce

Example

src/CargoService.ts

interface ICargo {
  name: string;
  createdAt: Date;
  price: number;
}

export class Cargo implements ICargo {
  name: string;
  price: number;
  createdAt: Date;

  constructor(name = '', price = 0) {
    this.name = name;
    this.price = price;
    this.createdAt = new Date();
  }
}

export default class CargoService {
  static info(cargoData: Cargo): void {
    console.log(cargoData);
  }
}

App.vue

<script lang="ts">
import { defineComponent, ref } from 'vue';
import CargoService, { Cargo } from './CargoService';
export default defineComponent({
  data() {
    return {
      cargo: new Cargo('first', 100),
    };
  },
  methods: {
    info() {
      CargoService.info(this.cargo);
    },
  },
});
</script>

Error

src/App.vue:20:25
TS2345: Argument of type '{ name: string; price: number; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to parameter of type 'Cargo'.
  Types of property 'createdAt' are incompatible.
    Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }' but required in type 'Date'.
    18 |   methods: {
    19 |     info() {
  > 20 |       CargoService.info(this.cargo);
       |                         ^^^^^^^^^^
    21 |     },
    22 |   },
    23 | });

What is expected?

All works fine

What is actually happening?

Property '[Symbol.toPrimitive]' is missing in type Data

Similar to https://github.com/vuejs/composition-api/issues/279

I have a similar problem using data values https://prnt.sc/1o0ew0a. If I use the simple const variable, everything works as expected. Reproduction link: https://github.com/baronkoko/vue-reactive-type-error/blob/main/src/App.vue Vue 3.2.2

Seems like this issue is new in 3.2, ran into it after upgrading from 3.1.5

I'm not able to reproduce the OP issue

I have a similar problem using data values https://prnt.sc/1o0ew0a. If I use the simple const variable, everything works as expected. Reproduction link: https://github.com/baronkoko/vue-reactive-type-error/blob/main/src/App.vue Vue 3.2.2

The project is using an outdated Typescript version 4.1.6, if you use latest 4.3.5 seems to work

Can you please confirm if the problem is still there on the latest typescript version?

@pikax yes, the project had typescript version 4.1.6, from vue create. Аfter updating typescript to the latest version everything works. Thank you very much

All works fine, thanks