Async data return typed data with TypeScript

[deozza]

Versions

• nuxt: ^2.14.1
• node: 14.7.0

Reproduction

// ~/class/user/user
export class User{
/*
properties instanciation + constructor
*/
	public getCleanedForRequest() {
                return 'foo';
	}
}

// ~/pages/user.vue
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

import {User} from "~/class/user/user";

interface UserSpecificVueInterface{
	user: User,
	loading: boolean,
	error: any
}

@Component({
	async asyncData({$axios, $auth, route}): Promise<UserSpecificVueInterface>{
		const link = '/link/to/resource';
		const token = $auth.getToken('local');
		const userFromApi = await $axios.$get(link, {
			headers: {
				Authorization: token
			}
		});

		return {
			user: new User(userFromApi),
			loading: false,
			error: null
		};
	}
})
export default class UserSpecificVue extends Vue implements UserSpecificVueInterface{
	user: User;
	loading: boolean = false;
	error: any = null;

	async updateUser(){

		this.loading = true;
                console.log(this.user instanceof User); //should be true, returns false
                console.log(this.user.getCleanedForRequest()); // should echo 'foo', returns `getCleanedForRequest() is not a function of user`    
	}
}

</script>

Additional Details

What is Expected?

I want to use asyncData function to fetch a resource from an API at the page loading. This resource is then used as a typed property with a custom TypeScript class, with its properties and its functions.

What is actually happening?

The property is not typed according to the custom TypeScript class

[odanado]

same issue: nuxt/typescript#48

[rx-837]

@deozza what mode are you using?

if mode is "universal" (ssr + client navigation) then behavior is normal

how it works:

• on server: calls asyncData then you returns instance of User
• on server: render with asyncData result
• on server: serialize asynData result and write to script(window.__NUXT__ = ...), property user transforms from class instance to object
• on client: starting hydration - create your component from raw html and render it with data from window.__NUXT__

[deozza]

Sorry for the late answer. Yes my mode is universal. I wasn't aware of the particular way the rendering was made in this mode.

So I need to change my mode to spa to achieve what I want. As I am planning to deploy my app as a static site, would it impact the performance of the app ? It says here the spa pages won't be upload to the CDN. So if all the app is a spa, there's no point to upload it as a static site, right ?

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.