Question

对于编码来说还是很新的东西，尤其是在Vue中，我想知道Vue / Typescript中有什么合理的方法可以根据上下文声明不存在的值。

预想：

每当我们将变量绑定到组件模板时，它们在任何时候都不能为undefined-否则响应显然会中断
考虑到这一点，我开始更频繁地将其用作默认声明typeA | null
处理接口，数据结构和实际数据库时，有时会迷失如何编写这些信息。让我们看一个简单的例子：

user-settings.ts

// For each new user a new object of type `UserSettings` is 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 感觉非常灵活，可能与直观感觉最接近；但是我想我需要在本地将undefined的所有null属性重新填充到const data = "Item 1 10 200" const implemented = data.split(/\t/) console.log(implemented)，然后再将它们传输到我的组件中，以保护模板绑定（或者还有其他方式/我错过了吗？）< / li>
在 B 之后，我将在界面的几乎任何位置进行这种声明-感觉非常明确，并且需要每个实例中的属性（这可能是一个积极的方面，而可能是负面方面？）
C 感觉更像是UI组件中用于设置默认值的

我想知道最“像vue一样”的方法与打字稿和一般的编码习惯配合得很好。

Answer 1

C感觉更像是UI组件中用于设置默认值的

C不可能。再次供您参考：

export interface UserSettings {
    analyticsEnabled: false
    personalDataRequestedAt: 0
    personalDataDownloadLink: ''
    userId: string
}

在这里，您说的是analyticsEnabled 总是为假。不与说其默认值相同。

在使用B的情况下，我几乎可以在接口中的任何位置进行这种声明-但感觉很明确

我更喜欢B。显性好，显性是正确

在VueTS中有效使用可选选项

1 个答案: