分类 typescript 下的文章

2024-08-17

要在React项目中使用TypeScript，你需要执行以下步骤：

如果你还没有一个React项目，可以通过create-react-app创建一个新的项目，并且确保使用了--typescript标志。例如：




npx create-react-app my-app --typescript

如果你已经有一个React项目，并想要添加TypeScript支持，可以通过运行以下命令安装TypeScript：




npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

接下来，创建一个tsconfig.json文件来配置TypeScript编译选项。可以通过运行tsc --init来生成一个默认的配置文件。
修改项目中的js文件扩展名为tsx（对于React组件）或ts（对于非React代码）。
最后，确保你的编辑器或IDE支持TypeScript并配置了相应的插件。

以下是一个简单的TypeScript + React函数组件示例：




import React from 'react';
 
interface GreetingProps {
  name: string;
}
 
const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
 
export default Greeting;

在这个例子中，我们定义了一个Greeting组件，它接收一个name属性，并在页面上显示一个欢迎消息。我们使用了TypeScript的接口（interface）来定义GreetingProps，并且使用了React的FC（Function Component）类型来简化函数组件的定义。

System

2024-08-17

所有,typescript

在使用 Ant Design Vue 的 TreeSelect 组件时，如果你想要实现只能选中子节点而不能选中父节点的功能，你可以通过设置 treeCheckable 属性为 true 并且使用 checkStrictly 属性来确保父节点不能被选中。

以下是一个简单的实例代码：




<template>
  <a-tree-select
    v-model="value"
    style="width: 200px"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strictly="true"
    placeholder="Please select"
  />
</template>
 
<script>
export default {
  data() {
    return {
      value: undefined,
      treeData: [
        {
          title: 'parent 1',
          value: 'parent 1',
          children: [
            {
              title: 'child 1',
              value: 'child 1',
            },
            {
              title: 'child 2',
              value: 'child 2',
            },
          ],
        },
        {
          title: 'parent 2',
          value: 'parent 2',
          children: [
            {
              title: 'child 3',
              value: 'child 3',
            },
            {
              title: 'child 4',
              value: 'child 4',
            },
          ],
        },
      ],
    };
  },
};
</script>

在这个例子中，treeCheckable 设置为 true 允许选中子节点，而 show-checked-strictly 设置为 true 确保父节点不会被选中。当你选择一个子节点时，它会被选中，而父节点不会。

- 阅读更多 -

Vue3+Vite3+Ts4配置移动端适配

System

2024-08-17

所有,typescript

在Vue3+Vite3+TypeScript项目中配置移动端适配，可以通过以下步骤进行：

安装lib-flexible和postcss-px2rem：




npm install lib-flexible --save
npm install postcss-px2rem --save-dev

在项目入口文件main.ts或main.js中引入lib-flexible：




import 'lib-flexible/flexible'

在vite.config.ts中配置postcss-px2rem：




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-px2rem
import px2rem from 'postcss-px2rem'
 
// 配置rem转换
const postcss = px2rem({
  remUnit: 37.5 // 设计稿宽度/10，通常设置为750/10=75
})
 
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [postcss]
    }
  }
})

在index.html中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">以及lib-flexible的<script>标签：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
</head>
<body>
  <div id="app"></div>
  <!-- 引入lib-flexible -->
  <script src="//g.alicdn.com/fdilab/lib-flexible/0.3.21/lib-flexible.js"></script>
</body>
</html>

配置完成后，重新运行项目，你的Vue3+Vite3+TypeScript项目将支持移动端适配。

注意：确保在项目中使用的所有CSS单位，除了px，都使用rem单位来保证一致性。同时，可以利用CSS Media Queries来进行不同屏幕尺寸的适配。

System

2024-08-17

所有,typescript

以下是一个使用Express、TypeScript和Deno搭建REST API服务的简单示例。请注意，这里仅展示核心代码，并假设已经有相关的TypeScript和Deno配置。

Express REST API 服务器 (server.ts)




import express from 'express';
import { urlencoded, json } from 'body-parser';
 
// 创建 Express 应用
const app = express();
 
// 中间件：用于解析请求体
app.use(urlencoded({ extended: true }));
app.use(json());
 
// 简单的 GET 路由
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
// 监听端口
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Deno 版本的 REST API 服务器 (server\_deno.ts)




import { Application } from 'https://deno.land/x/oak/mod.ts';
 
// 创建 Oak (原 Deno 的 oak) 应用
const app = new Application();
 
// 简单的 GET 路由
app.get('/', (ctx) => {
  ctx.response.body = 'Hello World!';
});
 
// 监听端口
const PORT = Deno.env.get('PORT') || 3000;
await app.listen(`0.0.0.0:${PORT}`);
console.log(`Server is running on port ${PORT}`);

在这两个示例中，我们创建了一个简单的REST API服务器，它监听特定端口，并响应对根URL ('/') 的GET请求。在Express示例中，我们使用了body-parser中间件来解析请求体。在Deno示例中，我们使用了Oak（原来的Deno HTTP服务器库），它内置了请求体解析功能。

请注意，这些示例仅用于教学目的，并且在生产环境中可能需要额外的配置和安全措施。

- 阅读更多 -

Missing return type on function 报错

System

2024-08-17

所有,typescript

报错解释：

这个错误通常出现在编程语言中，特别是在PHP、Python或其他需要指定函数返回类型的语言中。当你定义一个函数但忘记指定返回类型时，编译器或解释器无法知道它应该期待的函数输出是什么，这可能导致类型错误或其他潜在问题。

解决方法：

确保每个函数都有明确的返回类型。根据你使用的编程语言，函数返回类型的语法可能略有不同。以下是一些常见编程语言中指定返回类型的方法：

PHP:




function myFunction(): int {
    // 函数体
    return 1;
}

Python 3 (使用类型提示):




def my_function() -> int:
    # 函数体
    return 1

Java:




public int myFunction() {
    // 函数体
    return 1;
}

确保在函数声明的括号后面指定返回类型，并在函数体后使用该类型的值来提供输出。

- 阅读更多 -

【JavaScript】预解析

System

2024-08-17

所有,typescript

在JavaScript中，预解析指的是在代码执行前，JavaScript引擎将变量和函数声明提升到它们作用域的顶部的过程。这意味着变量和函数声明会被提前，但赋值不会提前。

变量的预解析：




console.log(globalVar); // 输出 undefined
var globalVar = 'Hello, World!';

在上面的代码中，虽然变量globalVar是在后面定义的，但是在执行console.log之前，JavaScript引擎会将其声明提升到作用域的顶部，因此在输出时globalVar已经存在，但是值为undefined，直到执行到var globalVar = 'Hello, World!';时才被赋值。

函数的预解析：




console.log(globalFunc); // 输出函数定义
globalFunc(); // 输出 'Hello, World!'
 
function globalFunc() {
  console.log('Hello, World!');
}

在上面的代码中，虽然函数globalFunc是在后面定义的，但是在执行console.log之前，JavaScript引擎会将其声明提升到作用域的顶部，因此在输出时globalFunc已经是可用的，可以调用，但是调用globalFunc()会输出'Hello, World!'。

需要注意的是，函数表达式不会发生预解析，例如：




console.log(funcExpr); // 输出 undefined
var funcExpr = function() {
  console.log('This will not be executed.');
};

在这个例子中，funcExpr在执行console.log时仍然是undefined，因为函数表达式不会进行提升。

- 阅读更多 -

TypeScript Array(数组)声明和简单使用

System

2024-08-17

所有,typescript




// 声明一个数值类型的数组
let numbers: number[] = [1, 2, 3, 4, 5];
 
// 使用数组
// 访问第一个元素
console.log(numbers[0]); // 输出: 1
 
// 遍历数组
numbers.forEach((value, index) => {
  console.log(`索引 ${index} 的值为: ${value}`);
});
 
// 添加元素到数组
numbers.push(6);
 
// 输出整个数组
console.log(numbers); // 输出: [1, 2, 3, 4, 5, 6]

这段代码首先使用TypeScript声明了一个数值类型的数组numbers，接着通过索引访问了数组的第一个元素，遍历了数组中的每个元素，并将它们的索引和值打印到控制台。最后，使用push方法向数组中添加了一个新元素，并再次打印了整个数组。这个过程展示了如何在TypeScript中声明和使用数组。

- 阅读更多 -

关于typescript中的extends和infer以及用法

System

2024-08-17

所有,typescript

在TypeScript中，extends关键字被用于实现泛型类型和接口约束，而infer关键字则用于类型推断。

泛型约束：




interface A<T> {
    value: T;
}
 
interface B<T> extends A<T> {
    extra: T;
}

在这个例子中，接口B继承了接口A，并添加了一个新的属性extra。

类型推断：




type A<T> = T extends any ? T : never;

在这个例子中，infer关键字用于从泛型类型中推断出T的类型。

泛型类型推断：




type B<T> = T extends { a: infer U } ? U : never;

在这个例子中，如果T具有属性a，那么infer U将会是T.a的类型，并且这个类型将用来构建B的结果类型。

注意：infer关键字只能在泛型类型中的extends子句中使用，并且必须直接作用于类型参数。

- 阅读更多 -

vue 封装对象深拷贝方法

System

2024-08-17

所有,typescript

在Vue中，可以通过使用JSON.parse(JSON.stringify(object))来实现一个简单的对象深拷贝方法。但是，这种方法有局限性，它不能复制函数、undefined、循环引用等。

下面是一个使用JSON.parse(JSON.stringify(object))的示例：




function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
 
// 示例使用
const originalObject = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
 
const clonedObject = deepClone(originalObject);
 
console.log(clonedObject); // { name: 'John', age: 30, hobbies: [ 'reading', 'gaming' ] }

如果需要一个更完善的深拷贝方法，可以使用递归或第三方库，如lodash的cloneDeep方法。

下面是一个使用递归实现的深拷贝方法的示例：




function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
 
  if (obj instanceof Array) {
    return obj.reduce((arr, item, i) => {
      arr[i] = deepClone(item);
      return arr;
    }, []);
  }
 
  if (obj instanceof Object) {
    return Object.keys(obj).reduce((newObj, key) => {
      newObj[key] = deepClone(obj[key]);
      return newObj;
    }, {});
  }
}
 
// 示例使用
const originalObject = {
  name: 'John',
  age: 30,
  hobbies: ['reading', 'gaming']
};
 
const clonedObject = deepClone(originalObject);
 
console.log(clonedObject); // { name: 'John', age: 30, hobbies: [ 'reading', 'gaming' ] }

请注意，递归方法可能不适合包含大量嵌套对象的复杂对象，因为这可能导致栈溢出错误。对于复杂和大型的对象，使用第三方库可能是更好的选择。

- 阅读更多 -

vue3+ts 配置mockjs模拟数据

System

2024-08-17

所有,typescript

在Vue 3 + TypeScript项目中配置Mock.js来模拟数据的基本步骤如下：

安装Mock.js:




npm install mockjs --save-dev

在项目中创建一个mock.ts文件，用于配置模拟数据规则。




// mock.ts
import Mock from 'mockjs'
 
// 模拟数据规则
const data = Mock.mock({
  'items|30': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1
  }]
})
 
// 模拟API接口
Mock.mock('/api/users', 'get', () => {
  return {
    code: 200,
    data: data.items
  }
})

在main.ts或其他入口文件中引入mock.ts来启动Mock.js。




// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './mock' // 引入mock配置
 
const app = createApp(App)
 
app.mount('#app')

在组件中发送请求获取模拟数据。




// UserList.vue
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'
 
export default defineComponent({
  setup() {
    const users = ref<any[]>([])
 
    onMounted(async () => {
      try {
        const response = await axios.get('/api/users')
        if (response.status === 200) {
          users.value = response.data.data
        }
      } catch (error) {
        console.error('Error fetching users:', error)
      }
    })
 
    return { users }
  }
})
</script>

在这个例子中，当Vue应用启动时，会加载mock.ts文件，并启动Mock.js。在UserList组件加载时，会向模拟的API('/api/users')发送请求，并获取模拟数据用于展示。这样，你可以在不连接真实后端数据源的情况下进行前端开发和测试。

- 阅读更多 -