为何Svelte中userData会出现隐式any类型错误？

你遇到的是TypeScript类型检查报错，因为userData初始赋值为null，TypeScript无法自动推断它的具体类型，所以标记为隐式any。下面是几种靠谱的解决办法：

1. 显式声明数据类型（推荐） #

先定义接口描述返回数据的结构，再给userData指定明确的类型，同时给axios的请求加上泛型约束，让返回数据的类型更清晰：

<script lang="ts">
    import axios from 'axios'
    import { onMount } from 'svelte';
    import Navigation from '../../navigation/+page.svelte'
    export let products = "products"
    
    // 定义JSONPlaceholder返回的Todo数据结构
    interface Todo {
        id: number;
        title: string;
        completed: boolean;
    }
    // 显式声明userData的类型为 Todo | null
    export let userData: Todo | null = null

    onMount(async ()=>{
        // 给axios.get指定泛型，明确返回数据类型
        const result = await axios.get<Todo>('https://jsonplaceholder.typicode.com/todos/1')
        userData = result.data
        console.log(userData)
    })
</script>

<Navigation />
<h1>I am {products}</h1>
{#if userData != null}
<div>
    <h3>{userData.title}</h3>
    <p>{userData.id}</p>
</div>
{/if}

2. 临时关闭隐式any检查（不推荐） #

如果只是临时跳过这个报错，可以在项目根目录的tsconfig.json里修改配置：

{
  "compilerOptions": {
    "noImplicitAny": false
  }
}

这种方法会关闭所有隐式any的类型检查，不利于代码的类型安全，只适合临时测试用。

3. 使用类型断言快速处理 #

也可以在赋值时用类型断言告诉TypeScript数据的类型，但这种方式不如显式声明变量类型规范：

userData = result.data as { id: number; title: string; completed: boolean };

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