javascript - A function whose declared type is neither 'void' nor 'any' must return a value. Typ

admin管理员组

文章数量:1312702

In my ponent I have a function called AuthForm which uses a switch to render 1 of 3 ponents. In the method param I pass in an array of class methods. I've got all the types down except for how to correctly type the class methods themselves.

The error:

(alias) interface ISignInData

import ISignInData

A function whose declared type is neither 'void' nor 'any' must return a value.ts(2355)

First here are the interfaces & types

export interface ISignInData {
  email: string
  password: string
}

export interface IAccountData {
  email: string
  password: string
  password2: string
}

export interface IForgotData {
  email: string
}

export type TSignIn = (email: string, password: string) => (ISignInData)

export type TCreateAccount = (email: string, password: string, password2: string) => (IAccountData)

export type TForgot = (email: string) => (IForgotData)

The ponent

import React from 'react'

import { Astronaut, Login, Create, Forgot, NomicsLink } from '../ponents'
import { TSignIn, TCreateAccount, TForgot, ISignInData, IAccountData, IForgotData } from '../shared/types'
import { AuthContainer } from '../styles'

interface IState { view: string }

interface IAuthView {
  type: string
  methods: [
    (email: string, password: string) => ISignInData,
    (email: string, password: string, password2: string) => IAccountData,
    (email: string) => IForgotData
  ]
  changeView: any
}

const AuthForm = ({ type, methods, changeView }: IAuthView) => {
  switch(type) {
    case 'signin':
      return <Login signIn={methods[0]} changeView={changeView} />
    case 'create':
      return <Create createAccount={methods[1]} changeView={changeView} />
    case 'forgot':
      return  <Forgot resetPassword={methods[2]} changeView={changeView} />
    default:
      return null;
  }
}

class Account extends React.Component<null, IState> {
  constructor(props: any) {
    super(props);
    this.state = { view: 'signin' }
  }

  render() {
    const { view } = this.state;

    return (
      <div id="login-container">
        <AuthContainer>
          {
            <AuthForm
              type={view}
              methods={[this.handleSignIn, this.handleCreateAccount, this.handleResetPassword]}
              changeView={this.handleChangeView}
            />
          }
        </AuthContainer>
        <NomicsLink />
        <Astronaut className="astronaut" showLogo={false}/>
      </div>
    )
  }

  handleSignIn = (email: string, password: string): ISignInData => {
    console.log('handleSignIn')
  }

  handleCreateAccount = (email: string, password: string, password2: string): IAccountData => {
    console.log('handleSignIn')
  }

  handleResetPassword = (email: string): IForgotData => {
    console.log('handleResetPassword')
  }

  handleChangeView = (view: string) => {
    console.log('handleChangeView')
    this.setState({ view })
  }
}

export default Account

In my ponent I have a function called AuthForm which uses a switch to render 1 of 3 ponents. In the method param I pass in an array of class methods. I've got all the types down except for how to correctly type the class methods themselves.

The error:

(alias) interface ISignInData

import ISignInData

A function whose declared type is neither 'void' nor 'any' must return a value.ts(2355)

First here are the interfaces & types

export interface ISignInData {
  email: string
  password: string
}

export interface IAccountData {
  email: string
  password: string
  password2: string
}

export interface IForgotData {
  email: string
}

export type TSignIn = (email: string, password: string) => (ISignInData)

export type TCreateAccount = (email: string, password: string, password2: string) => (IAccountData)

export type TForgot = (email: string) => (IForgotData)

The ponent

import React from 'react'

import { Astronaut, Login, Create, Forgot, NomicsLink } from '../ponents'
import { TSignIn, TCreateAccount, TForgot, ISignInData, IAccountData, IForgotData } from '../shared/types'
import { AuthContainer } from '../styles'

interface IState { view: string }

interface IAuthView {
  type: string
  methods: [
    (email: string, password: string) => ISignInData,
    (email: string, password: string, password2: string) => IAccountData,
    (email: string) => IForgotData
  ]
  changeView: any
}

const AuthForm = ({ type, methods, changeView }: IAuthView) => {
  switch(type) {
    case 'signin':
      return <Login signIn={methods[0]} changeView={changeView} />
    case 'create':
      return <Create createAccount={methods[1]} changeView={changeView} />
    case 'forgot':
      return  <Forgot resetPassword={methods[2]} changeView={changeView} />
    default:
      return null;
  }
}

class Account extends React.Component<null, IState> {
  constructor(props: any) {
    super(props);
    this.state = { view: 'signin' }
  }

  render() {
    const { view } = this.state;

    return (
      <div id="login-container">
        <AuthContainer>
          {
            <AuthForm
              type={view}
              methods={[this.handleSignIn, this.handleCreateAccount, this.handleResetPassword]}
              changeView={this.handleChangeView}
            />
          }
        </AuthContainer>
        <NomicsLink />
        <Astronaut className="astronaut" showLogo={false}/>
      </div>
    )
  }

  handleSignIn = (email: string, password: string): ISignInData => {
    console.log('handleSignIn')
  }

  handleCreateAccount = (email: string, password: string, password2: string): IAccountData => {
    console.log('handleSignIn')
  }

  handleResetPassword = (email: string): IForgotData => {
    console.log('handleResetPassword')
  }

  handleChangeView = (view: string) => {
    console.log('handleChangeView')
    this.setState({ view })
  }
}

export default Account

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Sep 8, 2019 at 20:07 Leon GabanLeon Gaban 39k122122 gold badges349349 silver badges550550 bronze badges 2

• 4 You've declared ISignInData as the return type. But the method doesn't return anything. Just change it to void if you don't plan on returning anything. – lukasgeiter Commented Sep 8, 2019 at 20:10
• @lukasgeiter Ah right! Do you want to post your answer? I just used : void and it fixes everything :) – Leon Gaban Commented Sep 8, 2019 at 20:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You've declared ISignInData as the return type. But the method doesn't return anything. Just change it to void if you don't plan on returning anything:

handleSignIn = (email: string, password: string): void => {
    console.log('handleSignIn')
}

本文标签：