TypeScript项目引入JS代码报TS2698、TS7006错误如何修复？

第一个报错：TS2698 扩展类型只能从对象类型创建 #

• 报错原因：react-router-dom 中 useLocation 返回的 location.state 默认类型为 unknown/undefined，不满足对象展开的类型要求
• 解决方法：
  1. 先给 location.state 加兜底空对象，避免 undefined 场景：{ ...(location.state || {}), ...data }
  2. 如果你明确知道跳转过来的页面传的 state 结构，可以给 useLocation 加泛型约束，示例：

  // 先定义你的state类型
  type LocationState = {
    // 这里放你之前其他页面传过来的state字段，比如之前的表单数据之类的
    prevForm?: string
  }
  // 使用时指定泛型
  const location = useLocation<LocationState>();
  

第二个报错：TS7006 参数e隐式含有any类型 #

• 报错原因：TypeScript 要求所有参数必须有明确类型，表单事件的参数需要手动指定对应的 React 事件类型
• 解决方法：给 onChange 的事件参数 e 指定类型为 React.ChangeEvent<HTMLInputElement>（如果是Select组件就改成React.ChangeEvent<HTMLSelectElement>）
  示例：

<TextField 
  label="Your number" 
  variant="outlined" 
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    setIban(e.target.value)
  }} 
/>

额外优化建议 #

你现在的 useState 没有指定类型，默认会推导为 undefined 类型，后续赋值也会报错，建议加上对应类型：

const [currency, setCurrency] = useState<string>('');
const [iban, setIban] = useState<string>('');
const [confirmIban, setConfirmIban] = useState<string>('');

修改后完整代码 #

import { useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom'
import { Container, FormControl, Typography, Grid, TextField, Button } from '@material-ui/core';
import SelectOption from '../../components/Navbar/Select/SelectOption';

// 定义location.state的类型，可根据实际业务调整
type LocationState = {
  // 补充你实际需要的字段
}

export default function BankDetails() {
    const [currency, setCurrency] = useState<string>('');
    const [iban, setIban] = useState<string>('');
    const [confirmIban, setConfirmIban] = useState<string>('');

    const history = useHistory();
    const location = useLocation<LocationState>();

    const next = () => {
        const data = {
            currency,
            iban,
            confirmIban
        }

        history.push({
            pathname: '/summary',
            state: { ...(location.state || {}), ...data }
        })
    }

    return (
        <Container>
            <Typography variant="h4">Select an account for payouts</Typography>

            <FormControl>
                <Grid xs={12}>
                    <SelectOption handleValue={(e: React.ChangeEvent<HTMLSelectElement>) => {
                        setCurrency(e.target.value)
                    }}>
                        <option value="">Select your currency</option>
                        <option value="lev">USD</option>
                    </SelectOption>
                </Grid>

                <Grid xs={12}>
                    <label>IBAN</label>
                    <TextField label="Your number" variant="outlined" onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                        setIban(e.target.value)
                    }} />
                </Grid>

                <Grid xs={12}>
                    <label>Confirm USD</label>
                    <TextField label="Confirm your USD" variant="outlined" onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                        setConfirmIban(e.target.value)
                    }} />
                </Grid>
                <Button variant="contained" color="primary" onClick={next}>
                    Continue
                </Button>
            </FormControl>
        </Container>
    )
}

内容的提问来源于stack exchange，提问作者Peter Penzov