小编Raf*_*hne的帖子

我正在使用 Vue 3、Vite 和 TypeScript。我想尝试使用 TypeScript 构建 Vue 项目。到目前为止，配置确实很困难。我一直在查看各种文档，但我正在努力实现我的目标。如果代码有问题，项目不应构建并抛出错误。

我附上下面的代码，我想寻求帮助。

应用程序.vue

<template>
  <header>
    <h1>The Learning Resources App</h1>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// import StoredResource from '//StoredResource';

interface VueData {
  storedResources: StoredResource[];
}

export default defineComponent({
  name: 'App',
  data(): VueData {
    return {
      storedResources: [
        {
          id: 'official-guide' as number,
          title: 'Official Guide',
          description: 'The official Vue.js documentation.',
          link: 'https://vuejs.org/',
        },
        {
          id: 'google',
          title: 'Google',
          description: 'Learn to google...',
          link: 'https://www.google.co.uk/',
        },
      ],
    }; …

这篇文章实际上不是一个问题。更像是为那些在 Nuxt.js 和 SendGrid 中苦苦挣扎的人们提供帮助。我已经使用 stackoverflow 很长时间了，所以也许现在轮到我开始帮助别人了。

过去 8 周我一直致力于 Nuxt.js WebApp 开发。Nuxt.js 对我来说是一个巨大的学习曲线和挑战，但我真的很喜欢使用这项技术。

我花了 2 天时间开发使用 SendGrid 发送表单。网上没有太多帮助，我一直在努力，但我做到了！所以也许有些人会发现我的帖子有用。

这是我的表格：

<form 
                        v-show="!isSubmitted"
                        class="contact-us__form" 
                        @submit.prevent="validate">

                        <b-form-group :class="{'form-group--error': $v.name.$error}">

                            <b-form-input
                                id="name"
                                v-model.trim="$v.name.$model"
                                type="text"
                                placeholder="Full Name">
                            ></b-form-input>

                            <div class="error" v-if="!$v.name.required">Field is required</div>
                            <div class="error" v-if="!$v.name.minLength">Name must have at least {{$v.name.$params.minLength.min}} letters.</div>

                        </b-form-group>
                        

                        <b-form-group :class="{'form-group--error': $v.phone.$error}">
                            <b-form-input
                                id="phone"
                                v-model.trim="$v.phone.$model"
                                type="number"
                                placeholder="Phone Number">
                            ></b-form-input>

                            <div class="error" v-if="!$v.phone.required">Field is required</div>

                        </b-form-group>
                        

                        <b-form-group :class="{'form-group--error': $v.email.$error}">
                            <b-form-input
                                id="email"
                                v-model.trim="$v.email.$model"
                                type="email"
                                placeholder="Email Address">
                            ></b-form-input>

                            <div class="error" v-if="!$v.email.required">Field is required</div> …

我目前正在使用 React 学习 TypeScript，我发现有些部分非常具有挑战性。我已经创建了 cart.context.tsx 但我不断收到以下错误：

(property) React.ProviderProps<AppContextInterface>.value: AppContextInterface
Type '{ isCartOpen: boolean; setIsCartOpen: React.Dispatch<React.SetStateAction<boolean>>; }' is not assignable to type 'AppContextInterface'.
  Types of property 'setIsCartOpen' are incompatible.
    Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(value: Dispatch<SetStateAction<boolean>>) => boolean'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type 'SetStateAction<boolean>'.
          Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(prevState: boolean) => boolean'.
            Type 'void' is not assignable to type 'boolean'.ts(2322)
index.d.ts(338, 9): The expected type comes …

我正在努力处理 Vuetify 中的自定义variables.scss。我希望能够编辑当前设置。我已将所有代码添加到 stackblitz 中。

https://stackblitz.com/edit/vitejs-vite-f8eyba?file=src/sass/variables.scss

我一直在查看 Vuetify 文档，但我不知道我做错了什么。有人可以帮忙吗？

我正在尝试创建一个包含 25 到 300 个数字的数组。例如：

const arr = [25, 50, 75, 100, 125...., 300];

这是我到目前为止所拥有的：

var every25to300 = 300; 

for (var i = 0; i <= every25to300; i++) {
   console.log(i);
}

我尝试过类似的方法console.log(i + 25)，但从 25 开始一直到 325。我知道我做错了什么，只是不确定到底是什么。我可以寻求帮助吗？

非常感谢！