As a relatively new coder, especially in Vue, I am curious about the best ways to declare non-existent values based on context using Vue / Typescript.
Initial thoughts:
- It's important that variables bound to component templates are never
undefined, as this can disrupt responsiveness. - So far, I've been defaulting to using
typeA | nullfor my declarations. - When it comes to dealing with interfaces, data structures, and databases, I sometimes struggle with how to properly write them. Let's consider a simple example:
user-settings.ts
// Each new user gets an object of type `UserSettings` created, e.g., in the cloud in `onAuthCreate`
// Option A
export interface UserSettings {
analyticsEnabled: boolean
personalDataRequestedAt?: number
personalDataDownloadLink?: string
userId: string
}
// Option B
export interface UserSettings {
analyticsEnabled: boolean
personalDataRequestedAt: number | null
personalDataDownloadLink: string | null
userId: string
}
// Option C
export interface UserSettings {
analyticsEnabled: boolean
personalDataRequestedAt: number // starting with 0
personalDataDownloadLink: string // starting with ''
userId: string
}
- A seems flexible and intuitive, but I might need to replace any
undefinedproperties withnulllocally before passing them to components to ensure template binding (or is there another way I'm missing?) - B requires explicit declaration almost everywhere in my interfaces, which could be both positive and negative depending on the situation.
- C feels more like setting up default values in a UI component.
I'm wondering what the most "vue-like" approach is that aligns well with Typescript and coding practices in general.