typescript 指定返回或函数类型不一样

Question

const a1: () => { a: string } = () => {
  return {a: '', b: ''} // not erroring!?
}

const a2 = ():{ a: string } => {
  return {a: '', b: ''} // is erroring as expected
}

const a3: () => { a: string } = () => {
  return {b: ''} // is erroring as expected
}

游乐场：https://www.typescriptlang.org/play/?ssl=15&ssc=2&pln=11&pc=2#code/MYewdgzgLgBAhgRgFwwBQEoYF4B8MDe8K0ATgJZgDmMAvtmprgQFAwwkCmUAriWAXBQByIQBoYAI2FC6AelkwwIWBxIkQ5KgEIA-MxrNmoSLDgAmehiSFBMUhWp0m+Vuy69++WyPFSYIuQUyCBhVdU1qOBCOAA8ABw5gKA4AE31DY2h4AGYUDGw8G2IoCNpLRkLXTh4+Aj8AmHkYYNC1DQd4aPjE5LSaIA

这两个应该是一样的，但不知何故 a2 有一个打字错误。

我的代码以 a1 的格式完成（定义了函数）并且没有出错。如果不正确，我想知道如何处理错误。

正如您在 a3 中看到的，它出错了。所以它仍在检查类型，但不如 a2 中准确。好诡异。

“打字稿”：“^3.7.2”

Error in ide

interface State {a:string}
const similarToRealWorldIssue: (state:State ) => State  = (state) => {
  return {...state, b: 'ssda'} // here I meant to put `a`, but I put `b` by mistake and nobody complained.
}

Answer 1

您的similarToRealWorldIssue 函数可以分为两部分。

第一部分，

const similarToRealWorldIssue: (state:State ) => State

声明并指定similarToRealWorldIssue 的返回类型为State。

第二部分，

    = (state) => {
      return {...state, b: 'ssda'}
    }

这是一个没有明确定义返回类型的函数，因此返回any。 typescript 编译器不会抱怨，因为类型 any 也可能是 State。

您可以通过两种方式解决此问题。

解决方案 1：将 State 指定为箭头函数第二部分的返回类型。

    const similarToRealWorldIssue: (state:State ) => State  = (state): State => {
      return {...state, b: 'ssda'}
    }

解决方案 2：首选解决方案，因为它简化了您的功能并使其更易于阅读。

    const similarToRealWorldIssue = (state: State): State => {
      return{
        a: '',
      }
    };

在这种情况下，任何不需要的附加字段都会产生编译器错误，同样遗漏必填字段。

希望这会有所帮助。

Answer 2

本质上，第一种情况发生的情况是这样的：

const a1_anon = () => {
  return {a: '', b: ''} // not erroring!?
}
// inferred type of a1_anon is () => {a: string, b: string}
const a1: () => { a: string } = a1_anon

如果你不希望它发生，你需要指定类型，这样它就不会被这样推断：

const a1: () => { a: string } = (): {a: string} => {
  return {a: '', b: ''} // not erroring!?
}

我知道它被指定了两次，但由于您坚持定义一个匿名函数，然后将其分配给变量，所以没有其他办法。

当然，您可以采用定义 a2 的方式，因为它不会两次指定类型，而是执行您需要的操作，但您已经知道了。

对于您的具体问题，您可以使用a2 定义事物的方式。如果State 接口不是太大，那么您总是可以将所有值分配给返回的State 对象，这样，如果您输入错误的内容，它将是缺少的属性而不是额外的属性（这里的... 用法是无论如何，我认为有问题）。另一种方法是定义一个函数并在返回State 对象时始终使用它。

const statify = (state: State): State => { return state }
const exampleUsage: (state: State) => State = (state) => {
  return statify({...state, c: '' })
}

你可能想用 getter 和 setter 方法定义一个 State 类并使用它而不是任意对象。也不确定是否要始终复制状态并更改其属性，但如果这样做，您可以在该类中实现一个方法来制作副本。

想到另一个选项，这会将{...state, <properties>} 更改为stateAdd(state, {<properties>})

interface State { a: string, b: string }
interface StateAddition { a?: string, b?: string }
const stateAdd = (state: State, additional: StateAddition): State => {
  return { ...state, ...additional }
}
const exampleUsage: (state: State) => State = (state) => {
  return stateAdd(state, {c: ''})
}