typescript - 将使用 Typescript 中的 --strictNullChecks 从 DB 或 API 接收异步数据的变量类型？

Question

我的 React + Typescript 项目遇到了一些问题。

每当我必须键入一个以 null 开头并将接收某种类型的 async 数据的变量时，就会发生这种情况。

例如:我有一个管理员用来创建和编辑帖子的 AdminBlogPostPage。

我有一个变量将用于保存 blogPost 数据。

但是当第一个页面呈现时，仍然没有任何可用数据，因为帖子将被异步加载。

目前，我是这样输入的(我正在使用 --strictNullChecks):

type ADMIN_BLOGPOST_STATE = {
  blogPost: null | BLOGPOST
}

blogPost 状态从 null 开始，一旦加载，它就变成了 BLOGPOST。

它工作正常。但是从现在开始，管理员对 blogPost 对象所做的一切都变得有点痛苦，因为 Typescript 总是“担心”blogPost 可能是 空。

我通常在这些情况下使用 Redux，所以在我的 reducer 中，我经常需要做类型断言，让 Typescript 清楚地知道当那个 Action 发生时，blogPost 将是 BLOGPOST 而不是 null。

例如:

/* ############################# */
/* #### BLOGPOST PROPERTIES #### */
/* ############################# */

UPDATE_CATEGORY(state, action:UPDATE_CATEGORY) {
  const blogPost = state.blogPost as TYPES.BLOGPOST;   // TYPE ASSERTION HERE
  const { value } = action.payload;
  blogPost.category = value;
},
UPDATE_BOOLEAN_PROPERTY(state, action: UPDATE_BOOLEAN_PROPERTY) {
  const blogPost = state.blogPost as TYPES.BLOGPOST;   // TYPE ASSERTION HERE
  const { name, value } = action.payload;
  blogPost[name] = value;
},
UPDATE_STRING_PROPERTY(state, action: UPDATE_STRING_PROPERTY) {
  const blogPost = state.blogPost as TYPES.BLOGPOST;   // TYPE ASSERTION HERE
  const { name, value } = action.payload;
  blogPost[name] = value;
},
UPDATE_PRODUCT_CATEGORY(state, action: UPDATE_PRODUCT_CATEGORY) {
  const blogPost = state.blogPost as TYPES.BLOGPOST;   // TYPE ASSERTION HERE
  const { value } = action.payload;
  blogPost.productCategory = value;
},

人们通常如何处理async 数据的类型？在数据到达之前从 null 开始是否值得？或者最好从有效的 blogPost: BLOGPOST stub 作为初始状态开始，这样 Typescript 就会知道 blogPost 将始终是 BLOGPOST所有的时间，我将不再需要处理这种重复的类型断言？

注意:即使我决定从有效的 blogPost: BLOGPOST 开始，我仍然需要从数据库加载数据。初始状态不会被使用。它的存在只是为了让我可以使用 blogPost: BLOGPOST 而不是 null |博文.

Answer 1

问题在于 Typescript 是正确的。在您的应用程序中，有时状态将为 null。

如果您在 API 调用完成之前尝试访问状态，会发生什么情况？ typescript 保护你免受此。

您将需要对此进行大量检查，但这可能是添加加载程序的好机会。

type BLOGPOST = {name: string};
type ADMIN_BLOGPOST_STATE = {
  blogPost: null | BLOGPOST
}
const state:ADMIN_BLOGPOST_STATE = {
  blogPost: null
}

// .. api calls eventually set state.blogPost to some valid value

if (state.blogPost === null) {
   return <Loader/>
} else {
   return <BlogPost id={state.blogPost.id} title={state.blogPost.title}/>
}

从你的问题来看，我假设你不想这样做，而且你更愿意对此进行集中检查。

我还假设您想要冒某些组件在加载器之前访问状态的风险。当您的 API 调用正在运行时，您可能有一个包罗万象的加载程序。

我之前为解决此问题所做的是将状态初始化为 null 值，但让 Typescript 相信它是有效的。

Typescript Playground

type BLOGPOST = {name: string};
type ADMIN_BLOGPOST_STATE = {
  blogPost: BLOGPOST // <-- no need for the null here
}
const state:ADMIN_BLOGPOST_STATE = {
  blogPost: null! // <-- non-null assertion
};

// here, you could try to access state.blogPost.name and TS won't complain

// .. api calls eventually set state.blogPost to some valid value

// no need to check, since we assume it is always a valid value
return <BlogPost id={state.blogPost.id} title={state.blogPost.title}/>

这样做的好处是，您可以在开始时将断言保存在一个地方。

缺点是您需要格外小心访问状态的方式。你是一个人。