分类前端技术下的文章

2024-08-17




import * as path from 'path';
import * as webpack from 'webpack';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 
const config: webpack.Configuration = {
  entry: './src/index.ts', // 项目的入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则表达式，匹配.ts或.tsx文件
        use: 'ts-loader', // 使用ts-loader处理这些文件
        exclude: /node_modules/ // 排除node_modules目录
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'] // 自动解析的文件扩展名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' // 模板文件路径
    })
  ]
};
 
export default config;

这个代码实例展示了如何使用TypeScript创建一个简单的Webpack构建配置文件。它包括了入口点、输出配置、模块规则、解析策略以及插件的配置，并且可以被导出作为Webpack的构建配置使用。这个实例为开发者提供了一个清晰的构建工具配置示例，并且是学习Webpack和TypeScript结合使用的一个很好的起点。

- 阅读更多 -

Vue3+router路由元信息

System

2024-08-17

所有,typescript

在Vue 3中，使用Vue Router时，可以通过路由的元信息（meta fields）来添加额外的信息，以便在路由守卫或导航守卫中使用。

以下是如何在Vue Router中定义带有元信息的路由的示例代码：




import { createRouter, createWebHistory } from 'vue-router'
 
// 定义路由
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { requiresAuth: true } // 添加元信息
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: { title: 'About Page' } // 添加另一个元信息
  }
]
 
// 创建router实例
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
// 导出router实例
export default router

在这个例子中，我们定义了两个路由，每个路由都有自己的meta字段。例如，Home路由需要用户认证，因此我们添加了requiresAuth: true作为元信息。另一个路由About有自己的标题信息。

在组件中，你可以通过this.$route.meta来访问这些元信息。例如，你可以在导航守卫中根据这些信息来决定是否允许进入某个路由：




router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isUserAuthenticated) {
    next('/login'); // 需要认证，重定向到登录页
  } else {
    next(); // 允许进入路由
  }
})

在这个导航守卫例子中，我们检查目标路由是否需要认证，如果需要，我们检查用户是否已经认证，并根据结果决定是否重定向到登录页。

- 阅读更多 -

解析markdown文档并且代码高亮

System

2024-08-17

所有,typescript

要解析Markdown文档并实现代码高亮，你可以使用一些流行的JavaScript库，例如marked和Prism.js。以下是一个简单的例子：

首先，确保你的HTML页面中包含了Prism.js的CSS和JavaScript文件。




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Markdown with Syntax Highlighting</title>
  <link rel="stylesheet" href="path/to/prism.css">
</head>
<body>
 
  <div id="content"></div>
 
  <script src="path/to/prism.js"></script>
  <script src="path/to/marked.min.js"></script>
  <script>
    // 你的JavaScript代码将放在这里
  </script>
</body>
</html>

使用marked将Markdown转换为HTML，并通过Prism.highlightElement为代码块添加语法高亮。




document.addEventListener('DOMContentLoaded', function() {
  var markdownString = `
# Hello, World!
 
Here's some example code in JavaScript:
 
\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;
 
  var html = marked(markdownString);
  document.getElementById('content').innerHTML = html;
 
  // 高亮所有代码块
  Prism.highlightAll();
});

在这个例子中，当DOM加载完成后，我们使用marked将Markdown文档转换成HTML。然后，我们通过Prism.highlightAll()函数来初始化语法高亮。Prism.highlightAll会查找页面上所有的<code>和<pre>元素，并尝试根据其内容应用正确的语法高亮。

确保你已经通过适当的方式引入了marked和Prism.js库。你可以使用CDN链接或者将它们的文件下载到本地，然后通过相对路径或者绝对路径引入。

- 阅读更多 -

React路由表中TypeScript类型注解

System

2024-08-17

所有,typescript




import React from 'react';
import { Route, RouteProps } from 'react-router-dom';
 
// 定义一个接口，用于描述特定的路由属性
interface CustomRouteProps extends RouteProps {
  title: string;
}
 
// 使用自定义接口作为TypeScript的类型注解
const CustomRoute: React.FC<CustomRouteProps> = ({ title, ...rest }) => {
  return (
    <Route {...rest} />
  );
};
 
export default CustomRoute;

这段代码定义了一个CustomRoute组件，它接收一个title属性以及其他RouteProps中定义的属性。这样的定义可以让我们在组件使用时更清晰地知道每个属性的意义和它们所需要的类型。这有助于在编写和维护React应用时减少潜在的类型错误。

System

2024-08-17

所有,typescript

在React中使用TypeScript定义并赋值多层嵌套数组对象，可以通过useState钩子来管理状态。以下是一个简单的例子，演示如何定义一个两层数组的状态，并对其进行赋值。




import React, { useState } from 'react';
 
const ExampleComponent: React.FC = () => {
  // 定义一个两层数组的状态，初始值为一个空数组
  const [nestedArray, setNestedArray] = useState<string[][]>([]);
 
  // 示例中的函数用于设置两层数组的值
  const setNestedArrayValues = () => {
    // 定义外层数组的值
    const outerArray: string[] = ['React', 'Angular', 'Vue'];
    
    // 定义内层数组的值
    const innerArrays: string[][] = outerArray.map(() => ['TypeScript', 'JavaScript']);
    
    // 使用setNestedArray来更新状态
    setNestedArray(innerArrays);
  };
 
  return (
    <div>
      <button onClick={setNestedArrayValues}>Set Nested Array Values</button>
      {/* 渲染多层数组状态 */}
      {nestedArray.map((innerArray, index) => (
        <div key={index}>
          {innerArray.map((item, subIndex) => (
            <span key={subIndex}>{item}</span>
          ))}
        </div>
      ))}
    </div>
  );
};
 
export default ExampleComponent;

在这个例子中，我们定义了一个名为ExampleComponent的组件，它使用useState钩子来管理一个名为nestedArray的状态，其类型为string[][]（即字符串数组的数组）。setNestedArrayValues函数用于设置nestedArray的值，并通过setNestedArray来更新状态。在组件的渲染方法中，我们通过.map函数渲染了嵌套数组的内容。

- 阅读更多 -

TypeScript 报错信息解决方案

System

2024-08-17

所有,typescript




// 假设我们有一个函数，它接受一个字符串参数并返回一个数字：
function stringToNumber(value: string): number {
    return parseInt(value, 10);
}
 
// 使用时，如果传入的不是数字字符串，可能会出现NaN问题：
const result = stringToNumber('abc'); // 这里会报错，因为'abc'不能转换为数字
 
// 解决方案：
// 1. 使用TypeScript的类型守卫进行检查：
function stringToNumberSafe(value: string | number): number | undefined {
    if (typeof value === 'string') {
        const num = parseInt(value, 10);
        return isNaN(num) ? undefined : num;
    }
    return value;
}
 
// 使用时，如果传入的不是数字字符串，返回undefined：
const safeResult = stringToNumberSafe('abc'); // 现在返回undefined，而不是NaN
 
// 2. 使用TypeScript的自定义错误类型：
interface StringToNumberError {
    error: 'stringToNumberError';
    message: 'Invalid string for number conversion';
}
 
function stringToNumberWithError(value: string): number | StringToNumberError {
    const num = parseInt(value, 10);
    return isNaN(num) ? { error: 'stringToNumberError', message: 'Invalid string for number conversion' } : num;
}
 
// 使用时，处理可能的错误：
const errorResult = stringToNumberWithError('abc');
if ((errorResult as StringToNumberError).error) {
    console.error((errorResult as StringToNumberError).message);
} else {
    // 使用转换后的数字
}

这个例子展示了两种处理TypeScript错误的方法：一种是返回undefined来避免错误值，另一种是使用自定义错误类型来更明确地处理错误情况。开发者可以根据具体情况选择适合的解决方案。

- 阅读更多 -

vite项目中配置路径别名@

System

2024-08-17

所有,typescript

在Vite项目中配置路径别名@，你需要在项目根目录下的vite.config.js文件中使用resolve.alias配置选项。以下是一个配置示例：




// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      // 配置路径别名 @ 指向 src 目录
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

在完成上述配置后，你可以在项目中使用@来代替src目录，例如：




// 在任何模块中
import SomeComponent from '@/components/SomeComponent.vue';
 
// 相当于
// import SomeComponent from 'src/components/SomeComponent.vue';

确保重启Vite服务器使配置生效。

- 阅读更多 -

使用Vite快速构建Vue3+ts+pinia脚手架

System

2024-08-17

所有,typescript

要使用Vite快速搭建一个Vue 3、TypeScript 和 Pinia 的项目脚手架，你可以使用官方提供的Vite模板。以下是如何操作的步骤：

确保你已经安装了Node.js（建议版本8以上）。
在命令行中运行以下命令来创建一个新项目：




npm init vite@latest my-pinia-app -- --template vue-ts

或者使用yarn：




yarn create vite my-pinia-app --template vue-ts




cd my-pinia-app

安装依赖：




npm install
# 或者使用 yarn
# yarn

启动开发服务器：




npm run dev
# 或者使用 yarn
# yarn dev

现在你应该有一个运行中的Vue 3、TypeScript和Pinia项目，可以在浏览器中访问 http://localhost:3000 查看。

- 阅读更多 -

JavaSrcip类型转换

System

2024-08-17

所有,typescript

在Java中，将字符串转换为ScriptEngine类型通常意味着你想要使用Java的ScriptEngine API来执行某种类型的脚本代码（如JavaScript、Python等）。以下是如何将字符串转换为ScriptEngine类型并执行代码的示例：




import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;
 
public class ScriptEngineExample {
    public static void main(String[] args) {
        // 创建一个ScriptEngineManager实例
        ScriptEngineManager manager = new ScriptEngineManager();
 
        // 获取JavaScript引擎
        ScriptEngine engine = manager.getEngineByName("JavaScript");
 
        // 需要执行的JavaScript代码
        String script = "1 + 1";
 
        try {
            // 执行脚本
            Object result = engine.eval(script);
 
            // 输出结果
            System.out.println("结果: " + result);
        } catch (ScriptException e) {
            e.printStackTrace();
        }
    }
}

在这个例子中，我们首先创建了一个ScriptEngineManager实例，然后通过名称获取了JavaScript引擎。接着，我们执行了一个简单的加法操作的JavaScript代码，并打印出了结果。如果转换或执行过程中发生错误，将捕获ScriptException异常并进行处理。

- 阅读更多 -

ts如何定义数组中嵌套对象的类型

System

2024-08-17

所有,typescript

在TypeScript中，你可以使用嵌套的接口或类型别名来定义一个数组中嵌套对象的类型。以下是一个简单的例子：




// 定义嵌套对象的类型
interface NestedObject {
  key1: string;
  key2: number;
}
 
// 使用这个类型定义一个数组
let nestedArray: NestedObject[] = [
  { key1: 'value1', key2: 123 },
  { key1: 'value2', key2: 456 }
];

或者使用类型别名：




type NestedObject = {
  key1: string;
  key2: number;
};
 
let nestedArray: NestedObject[] = [
  { key1: 'value1', key2: 123 },
  { key1: 'value2', key2: 456 }
];

这两种方式都定义了一个NestedObject类型，然后声明了一个这个类型的数组nestedArray。数组中的每个元素都必须符合NestedObject的结构。

- 阅读更多 -