uck of typeError：o.error不是一个功能

发布于 2025-02-10 12:58:39 字数 2547 浏览 2 评论 0原文

我真的是Typescript的新手，并遇到了“ O.Error不是功能”。以下是一个简单的待办事项应用程序的代码。我想创建将存储在数组中的对象，然后我将使用该数组在DOM内添加戒酒。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ts-todo</title>
    <link rel="stylesheet" href="../src/index.css">
</head>
<body>
    <main>
        <input type="text" name="todo" id="input" value="" >
        <button id="add-btn">Add Task</button>
        <ul id="todo">
        </ul>
    </main>
    <script src="./bundle.js"></script>
</body>
</html>

ts file

import { uuid } from "uuidv4"

// const ul = document.querySelector("#todo")as HTMLUListElement
const button = document.querySelector('#add-btn') as HTMLButtonElement
const input = document.querySelector("#input") as HTMLInputElement

//  array which stores the object 
let todos: object[] = []

interface Todos {
    id: string;
    todo: string; 
    completed: boolean;
    readonly createdDate: Date;
    updatedDate?: Date;
} 
// type storeObject = (a: string) => void;
let storeObject = (todo: string)=>{
    const item: Todos = {
        id: uuid(),
        todo: todo,
        completed: false ,
        createdDate: new Date,
    }
    todos.push({item})
    console.log('todos',todos);
}

button.addEventListener("click",(e)=>{
    console.log('enters in listener')
    if(input.value == "") return 
    storeObject(input.value)    
    input.value = ""
})

webpack config

const path = require('path');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  watch:true,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new NodePolyfillPlugin()
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], 
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

我在添加任务 btn时会遇到此特定错误可能导致这个问题的是什么？

原文

I am really new to typescript and running into "o.error is not a function". Below is the code for a simple to-do-list app. I want to create object which will be stored in the array and then I will use that array to add todos inside the dom.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ts-todo</title>
    <link rel="stylesheet" href="../src/index.css">
</head>
<body>
    <main>
        <input type="text" name="todo" id="input" value="" >
        <button id="add-btn">Add Task</button>
        <ul id="todo">
        </ul>
    </main>
    <script src="./bundle.js"></script>
</body>
</html>

ts file

import { uuid } from "uuidv4"

// const ul = document.querySelector("#todo")as HTMLUListElement
const button = document.querySelector('#add-btn') as HTMLButtonElement
const input = document.querySelector("#input") as HTMLInputElement

//  array which stores the object 
let todos: object[] = []

interface Todos {
    id: string;
    todo: string; 
    completed: boolean;
    readonly createdDate: Date;
    updatedDate?: Date;
} 
// type storeObject = (a: string) => void;
let storeObject = (todo: string)=>{
    const item: Todos = {
        id: uuid(),
        todo: todo,
        completed: false ,
        createdDate: new Date,
    }
    todos.push({item})
    console.log('todos',todos);
}

button.addEventListener("click",(e)=>{
    console.log('enters in listener')
    if(input.value == "") return 
    storeObject(input.value)    
    input.value = ""
})

webpack config

const path = require('path');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  watch:true,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new NodePolyfillPlugin()
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], 
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

I am getting this particular error when add task btn is clicked

What might be causing this issue?