Composition-api: (typescript) Date property in reactive object can't assign to pure Date type

[tomlla]

Is there anything workaround?

Example code

src/example.ts

import { reactive } from "@vue/composition-api";

interface T1 {
    date: Date
}
function print(date: Date) {
    console.log(date);
}

const reactiveObject = reactive<T1>({ date: new Date() });
const pureObject: T1 = { date: new Date() };

print(reactiveObject.date)
print(pureObject.date)

Error output

$ ./node_modules/.bin/ts-node ./src/example.ts

/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:421
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
src/example.ts(13,7): error TS2345: Argument of type '{ 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 'Date'.
  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'.

    at createTSError (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:421:12)
    at reportTSError (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:425:19)
    at getOutput (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:530:36)
    at Object.compile (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:735:32)
    at Module.m._compile (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:814:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/home/nt/dev/src/github.com/tomlla/reproduce-composition-api-date-type-deformation/node_modules/ts-node/src/index.ts:817:12)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Screenshot

Reproduced repository

https://github.com/tomlla/reproduce-composition-api-date-type-deformation

[LinusBorg]

Th repo link gives me a 404

[tomlla]

@LinusBorg
Oh.. Sorry, I created the repo as private repo carelessly. now I changed to public.

[noook]

I can confirm, having the same issue here.
Reproducible at this commit in this file (Lines 63 and 72)

[LinusBorg]

Hm, I think this might actually be the same issue as somethin we had in the vue-next repo.

We likely have to add Date to the BaseTypes for UnwrapRef.

/cc @pikax might be relevant for your big PR as you are backporting Vue 3's Ref Type implementation, right?

[pikax]

The UnwrapRef from vue-next repo doesn't show any error on the example provided:

I tested on PR https://github.com/vuejs/composition-api/pull/311, and no type error

//issue code
interface T1 {
  date: Date;
}
function print(date: Date) {
  console.log(date);
}

const reactiveObject = reactive<T1>({ date: new Date() });
const pureObject: T1 = { date: new Date() };

print(reactiveObject.date);
print(pureObject.date);


//last example
export interface Experience {
  company: string;
  title: string;
  start: Date;
  end: Date | null;
  description: string;
}
export const experiences: Experience[] = [
  {
    company: 'Zest',
    start: new Date(2018, 6 - 1),
    end: new Date(2018, 9 - 1),
    title: 'Full-stack Javascript internship',
    description:
      'Participation in the improvement of the platform and in the development of new features on the front and API part. Front made with Angular.js and back with PostgreSQL and Node.js.',
  },
  {
    company: 'Golem.ai',
    start: new Date(2019, 2 - 1),
    end: new Date(2019, 9 - 1),
    title: 'Full-stack Symfony + Vue.js Internship',
    description:
      'Participation in the creation of Web tools for Golem.ai, research and development work, and product development. Technologies used: Vue.js, Symfony3 and 4, PostgreSQL, Docker',
  },
  {
    company: 'Golem.ai',
    start: new Date(2020, 1 - 1),
    end: null,
    title: 'Front-end developer',
    description:
      'Redesign of the AI configuration interface, implementation of design systems, development of products used by projects carried out by Golem.ai',
  },
];

function getReadbleDiff(experience: Experience): string {
  return '';
}

getReadbleDiff(ref(experiences).value[0]);

[antfu]

This should be fixed in v0.6.1. Feel free to reopen if the problem still persists.