分类 typescript 下的文章

runtime-core.esm-bundler.js?d2dd:218 Uncaught TypeError: formRef.value?.validate is not a function

2024-08-13

报错信息提示为 Uncaught TypeError: formRef.value?.valid 这表明在 JavaScript 代码中尝试调用一个对象的 valid 方法，但是遇到了 TypeError，这通常意味着 formRef.value 是 undefined 或 null。

解决方法：

确认 formRef 是否已经正确地被初始化。在 Vue 中，确保你已经使用 ref() 函数来创建一个响应式引用。
确认 formRef.value 是否是你预期的表单对象。如果不是，可能需要调整你的代调用，以获取正确的表单实例。
确认 formRef.value 是否在你尝试调用 valid 方法时已经被赋值。如果它是异步获取的（例如，通过 AJAX 请求），你可能需要等待它完成。
如果 formRef.value 可能是 undefined 或 null，使用可选链操作符（?.）来安全地访问属性。如果 formRef.value 是 undefined 或 null，valid 调用将不会执行，而是返回 undefined。

例如，修改代码：




if (formRef.value?.valid) {
  // ...
}

或者：




formRef.value?.valid && formRef.value.validate();

确保在调用 valid 方法前，formRef.value 已经被正确赋值，并且不是 undefined 或 null。

- 阅读更多 -

TypeScript Map 对象和TypeScript 元组

System

2024-08-13

所有,typescript

在TypeScript中，Map对象是一种存储键值对的集合。而元组（Tuple）是一种用来表示固定长度的数组，其中每个位置都指定了数据类型。

以下是一些使用TypeScript Map对象和元组的示例：

使用Map对象存储键值对：




let map = new Map<string, number>();
map.set("one", 1);
map.set("two", 2);
map.set("three", 3);
 
console.log(map.get("one")); // 输出：1
console.log(map.get("two")); // 输出：2
console.log(map.get("three")); // 输出：3

在这个例子中，我们创建了一个Map对象，并在其中存储了一些键值对。我们使用字符串作为键，数字作为值。

使用元组存储数据：




let tuple: [number, string, boolean];
tuple = [1, "hello", true];
 
console.log(tuple[0]); // 输出：1
console.log(tuple[1]); // 输出："hello"
console.log(tuple[2]); // 输出：true

在这个例子中，我们创建了一个元组，并在其中存储了一些数据。元组的长度是固定的，这里是3。我们分别存储了一个数字，一个字符串和一个布尔值。

使用Map对象和元组结合存储数据：




let map = new Map<string, [number, string, boolean]>();
map.set("user1", [1, "user1@example.com", true]);
map.set("user2", [2, "user2@example.com", false]);
 
console.log(map.get("user1")); // 输出：[1, "user1@example.com", true]
console.log(map.get("user2")); // 输出：[2, "user2@example.com", false]

在这个例子中，我们创建了一个Map对象，并在其中存储了一些键值对。这一次，每个键关联的值是一个元组，包含了数字，字符串和布尔值。

以上就是使用TypeScript Map对象和元组的一些基本示例。

- 阅读更多 -

我是如何看Vue源码的

System

2024-08-13

所有,typescript

在上一部分中，我们已经设置好了环境，并且成功地运行了Vue的构建系统。在这一部分，我们将通过一个简单的例子来看看Vue的源码是如何工作的。

首先，我们需要创建一个新的Vue实例，并且可以通过mount方法将其挂载到DOM中。




// main.js
import Vue from './vue'
 
const app = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
 
app.$mount('#app')

在这个例子中，我们导入了自定义的Vue模块，并创建了一个新的Vue实例，其中包含一个数据属性message。然后，我们调用$mount方法，并传入一个DOM选择器#app，告诉Vue应该挂载到页面上哪个元素内部。

接下来，我们需要一个HTML文件来挂载我们的Vue实例：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="main.js"></script>
</body>
</html>

在浏览器中打开index.html，你应该能看到页面上显示了"Hello Vue!"。

通过这个简单的例子，我们可以看到Vue实例是如何被创建和挂载到DOM上的。在下一部分，我们将更深入地探讨这个过程中发生了什么，包括Vue的响应式系统和虚拟DOM的创建过程。

- 阅读更多 -

vite+ts+vue3 知识点（自定义指令，自定义插件）

System

2024-08-13

所有,typescript

在Vite + TypeScript + Vue 3项目中，可以通过以下方式实现自定义指令和插件：

自定义指令

创建一个自定义指令的文件，例如src/directives/focus.ts:




import { App, DirectiveBinding } from 'vue';
 
export const focus = {
  // 当被绑定的元素插入到 DOM 中时调用
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  },
  // 当绑定的值更新时调用
  updated(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  }
};
 
export default {
  install(app: App) {
    app.directive('focus', focus);
  }
};

然后在main.ts中使用这个指令：




import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives/focus'; // 导入自定义指令
 
const app = createApp(App);
 
app.use(directives); // 使用自定义指令插件
 
app.mount('#app');

在Vue组件中使用这个指令：




<template>
  <input v-focus="true" type="text">
</template>

自定义插件

创建一个自定义插件的文件，例如src/plugins/myPlugin.ts:




import { App } from 'vue';
 
export default {
  install(app: App) {
    // 添加全局方法或属性
    app.config.globalProperties.$myGlobalMethod = () => {
      console.log('This is a global method!');
    };
  }
};

在main.ts中使用这个插件：




import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';
 
const app = createApp(App);
 
app.use(myPlugin);
 
app.mount('#app');

在Vue组件中使用插件提供的方法：




<template>
  <button @click="$myGlobalMethod">Call Global Method</button>
</template>

以上代码展示了如何在Vite + TypeScript + Vue 3项目中创建和使用自定义指令和插件。

- 阅读更多 -

TypeScript的类型声明

System

2024-08-13

所有,typescript

在TypeScript中，类型声明可以让你指定变量的类型，以及函数参数和返回值的类型。这有助于编译器在编译时进行类型检查，从而帮助你发现潜在的错误。

以下是几种常见的TypeScript类型声明方式：

基本类型声明：




let isDone: boolean = false;
let count: number = 10;
let name: string = "Alice";

数组类型声明：




let items: number[] = [1, 2, 3];
let items: Array<number> = [1, 2, 3];

元组类型声明（当你想要一个数组中的每个元素有不同的类型时）：




let tuple: [number, string];
tuple = [1, "hello"];

枚举类型声明（当你想为一个数值集合定义一个更友好的名字时）：




enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}
 
let color: Color = Color.Green;

任意类型（当你不清楚一个类型时）：




let notSure: any = 10;
notSure = "maybe a string instead";
notSure = false; // 任意类型可以是任何类型

空类型（当你想设置一个变量可以是任何类型，但你不想设置一个具体的类型）：




let nothing: void = null; // 不建议这样使用，void通常用于函数返回值

接口类型声明（当你想要定义一种复杂类型的外观）：




interface Person {
  name: string;
  age: number;
}
 
let person: Person = {
  name: "Alice",
  age: 25
};

类类型声明：




class MyClass {
  property: string;
  constructor(value: string) {
    this.property = value;
  }
}
 
let myClass: MyClass = new MyClass("Hello");

类型断言（当你确定一个变量的类型，但TypeScript无法推断出时）：




let someValue: any = "this is a string";
let stringLength: number = (<string>someValue).length;
let stringLength: number = (someValue as string).length;

函数类型声明：




let add: (x: number, y: number) => number = function(x, y) {
  return x + y;
};

这些是TypeScript中类型声明的基础。根据你的应用需求，你可以选择合适的类型来声明变量和函数。

- 阅读更多 -

Vue2源码里的flow与TypeScript之间的对比

System

2024-08-13

所有,typescript

Flow和TypeScript都是静态类型检查器，但它们有一些不同。

出现时间：Flow是Facebook在2014年开发的，而TypeScript是Microsoft在2012年开发的。
运行方式：Flow在编码时不需要任何运行时开销，类型检查是在代码编译时进行的。而TypeScript在编码时不会有额外的运行时开销，但需要通过编译器将代码转换成JavaScript。
类型检查：Flow主要提供了类型注解，而TypeScript提供了完整的类型系统，包括泛型、接口等高级特性。
第三方库支持：Flow通常需要库的定义文件（.js.flow）来提供类型支持，而TypeScript可以直接提供类型声明文件。
配置和工具：Flow通常需要Eslint、Flow等工具配合，而TypeScript可以直接使用tslint等工具。
类型推断：Flow有基本的类型推断，而TypeScript有更高级的类型推断能力。
社区和支持：Flow社区较小，而TypeScript社区较大，并且有更多的第三方库和工具支持。
学习曲线：Flow的学习曲线较低，容易上手，而TypeScript的学习曲线较陡峭，但提供了更多的类型系统特性。

Vue2中使用Flow的情况较多，因为它提供了快速的类型检查，同时对代码的侵入性小。而随着TypeScript的发展和更多支持，在新项目中可能会更多地使用TypeScript。

- 阅读更多 -

react-10 函数式写法rsc，配合HOOKS钩子函数

System

2024-08-13

所有,typescript

React 10函数式写法和HOOKS的结合使用，可以使代码更为简洁和功能化。以下是一个简单的React函数式组件的例子，它使用了useState钩子来管理组件的状态，并用useEffect钩子处理副作用。




import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    // 假设这里是一个副作用，比如设置文档的标题
    document.title = `You clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
 
export default MyComponent;

这个组件是一个计数器，当用户点击按钮时，计数器会增加，同时我们用useEffect更新了文档的标题。这个例子展示了如何使用函数式组件和React的hooks API来管理状态和进行有状态的操作。

System

2024-08-13

所有,typescript

报错信息不完整，但如果你在使用 Vue 和 TypeScript 时遇到了与 node_modules 相关的 vue-tsc 错误，可能是以下原因：

类型定义不匹配：可能是某个库的类型定义与其实际导出的值不匹配。
缺少类型定义：项目中可能使用了一个没有自带类型定义文件的库。
类型检查失败：代码中可能存在不符合 TypeScript 规则的类型标注。

解决方法：

更新类型定义：确保所有库的类型定义是最新的。
安装类型定义：如果库没有内置类型定义，可以通过 @types/库名 来安装。
修改 TypeScript 配置：在 tsconfig.json 中，可以调整类型检查的严格程度，比如将 strict 设置为 false 来暂时忽略某些类型错误。
修正代码：根据错误信息修正代码中的类型不匹配问题。

如果能提供具体的错误信息，可以提供更精确的解决方案。

- 阅读更多 -

react项目typescript版本过低导致build报错的问题

System

2024-08-13

所有,typescript

报错问题：React项目在使用TypeScript时，如果TypeScript版本过低可能会导致在构建项目时出现错误。

报错解释：

TypeScript版本不兼容：项目可能使用了某些特性，这些特性可能在旧版本的TypeScript中不支持。
缺少类型定义文件：项目可能依赖了某些第三方库的类型定义文件，而这些定义文件可能需要更高版本的TypeScript。

解决方法：

更新TypeScript版本：检查package.json中的devDependencies部分，找到TypeScript相关的条目，并将其更新到支持项目所需特性的最新版本。
安装或更新类型定义文件：如果缺少特定于TypeScript版本的类型定义文件，可以通过npm或yarn安装或更新这些文件。
修改tsconfig.json：确保tsconfig.json文件中的compilerOptions与项目兼容，特别是target和lib选项。
清理缓存和重新安装依赖：有时候，旧的依赖或缓存文件可能导致问题，可以尝试运行npm cache clean --force或yarn cache clean来清理缓存，然后删除node_modules文件夹和package-lock.json或yarn.lock文件，之后重新运行npm install或yarn install来安装依赖。

在更新TypeScript版本时，确保项目中的所有依赖项也都兼容新版本的TypeScript。如果问题依然存在，可能需要查看具体的错误信息，以便进一步诊断问题。

System

2024-08-13

所有,typescript




import React from 'react';
import { Select } from 'antd';
import { Dictionary } from '@/types/global';
 
interface DXSelectProps<T> {
  dataSource: Dictionary<T>;
  value?: T;
  onChange?: (value: T) => void;
}
 
function DXSelect<T>({ dataSource, value, onChange }: DXSelectProps<T>) {
  const options = Object.entries(dataSource).map(([key, item]) => (
    <Select.Option key={key} value={item}>
      {key}
    </Select.Option>
  ));
 
  return (
    <Select value={value} onChange={onChange} placeholder="请选择">
      {options}
    </Select>
  );
}
 
export default DXSelect;

这段代码定义了一个泛型组件DXSelect，它接受一个泛型T作为选项值的类型，并且使用了Ant Design的Select组件来渲染一个下拉选择框。该组件可以接受一个字典对象作为数据源，并允许用户选择其中的条目。当选项变化时，它会调用提供的onChange回调函数。这个组件可以用于任何需要从固定数据集中进行选择的场景。

- 阅读更多 -