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
}

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

这 2 个应该是同一件事，但不知何故 a2 有 typescript 错误。

我的代码以 a1 的格式完成(定义函数)并且没有错误。我想知道如果不正确我必须做些什么来解决错误。

如您在 a3 中所见，它出错了。所以它仍在检查类型，但不像 a2 中那样准确。太奇怪了。

“ typescript ”:“^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: '',
      }
    };

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

希望这对您有所帮助。