标签 elasticsearch 下的文章

【千题案例】TypeScript获取两点之间的距离 | 中点 | 补点 | 向量 | 角度

2024-08-16

// 定义点类
class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    // 计算两点间的距离
    static distance(p1: Point, p2: Point): number {
        const dx = p1.x - p2.x;
        const dy = p1.y - p2.y;
        return Math.sqrt(dx * dx + dy * dy);
    }
    // 计算两点间中点
    static middle(p1: Point, p2: Point): Point {
        return new Point((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
    }
    // 计算向量的补点
    static neg(p: Point): Point {
        return new Point(-p.x, -p.y);
    }
    // 计算向量的模（长度）
    static norm(p: Point): number {
        return Math.sqrt(p.x * p.x + p.y * p.y);
    }
    // 计算两点间的角度
    static angle(p1: Point, p2: Point): number {
        const norm1 = Point.norm(p1);
        const norm2 = Point.norm(p2);
        const dot = p1.x * p2.x + p1.y * p2.y;
        return Math.acos(dot / (norm1 * norm2));
    }
}

// 使用示例
const p1 = new Point(1, 2);
const p2 = new Point(4, 6);

console.log(Point.distance(p1, p2)); // 输出两点间的距离
console.log(Point.middle(p1, p2)); // 输出两点间的中点
console.log(Point.neg(p1)); // 输出点的补点
console.log(Point.angle(p1, p2)); // 输出两点间的角度

这段代码定义了一个Point类，并在其内部提供了计算两点间距离、中点、向量补点、向量模（长度）以及两点间角度的静态方法。使用时，创建两个点的实例，并调用相应的静态方法来获取结果。这个例子展示了如何在TypeScript中组织代码，并使用类和静态方法来提供功能性的计算。

- 阅读更多 -

配置webpack打包vue和typescript

System

2024-08-16

所有,typescript

为了配置Webpack打包Vue和TypeScript项目，你需要安装相关的loader，并且在webpack.config.js中进行配置。以下是一个基本的配置示例：

首先，确保你已经安装了Vue、TypeScript、ts-loader和vue-loader等依赖：

npm install --save-dev typescript ts-loader vue-loader vue-template-compiler

然后，在webpack.config.js中添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
      // 可以添加其他文件类型的loader配置
    ]
  }
};

确保你有一个基本的tsconfig.json文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true
    // 其他配置项...
  }
}

这个配置假设你的入口文件是main.ts，并且输出文件为build.js，它将被放置在dist目录下。这个配置同样假设你有一个Vue组件以.vue扩展名结尾。

请根据你的项目具体情况调整配置，例如添加对图片、字体文件等的loader支持。

- 阅读更多 -

安装 TypeScript 并编译成JS

System

2024-08-16

所有,typescript

要在你的项目中安装TypeScript并将其编译成JavaScript，你需要按照以下步骤操作：

确保你有Node.js和npm（Node.js包管理器）安装在你的计算机上。
在你的项目根目录中，运行以下命令来初始化一个新的npm项目（如果你还没有一个）并安装TypeScript：

npm init -y
npm install typescript --save-dev

创建一个tsconfig.json文件，该文件包含TypeScript编译器的配置选项。可以通过运行以下命令来生成一个默认的tsconfig.json文件：

npx tsc --init

编写你的TypeScript文件，比如index.ts。

// index.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet('World'));

使用TypeScript编译器将TypeScript文件编译成JavaScript。你可以手动运行编译器，也可以在package.json中添加一个脚本来自动执行编译。

手动编译：

npx tsc

或者添加一个npm脚本到package.json：

{
  "scripts": {
    "build": "tsc"
  }
}

然后运行：

npm run build

这将生成一个index.js文件，包含从index.ts文件转换过来的JavaScript代码。

- 阅读更多 -

基于TypeScript和egret游戏开发引擎星空大作战游戏设计

System

2024-08-16

所有,typescript

// 引入Egret的DisplayObject类
import { DisplayObject } from "egret/display";

// 定义一个星球类
class Star extends DisplayObject {
    constructor() {
        super();
        // 在这里可以添加更多的属性和方法，比如旋转、缩放等
    }
}

// 定义一个行星类
class Asteroid extends DisplayObject {
    constructor() {
        super();
        // 同样添加属性和方法来模拟行星的移动、碰撞检测等
    }
}

// 游戏主场景类
class GameScene extends egret.DisplayObjectContainer {
    private stars: Star[] = [];
    private asteroids: Asteroid[] = [];

    public constructor() {
        super();
        this.createGameScene();
    }

    private createGameScene() {
        // 创建一些星球和行星并添加到屏幕
        for (let i = 0; i < 100; i++) {
            let star = new Star();
            this.stars.push(star);
            this.addChild(star);

            let asteroid = new Asteroid();
            this.asteroids.push(asteroid);
            this.addChild(asteroid);

            // 随机位置初始化它们
            star.x = Math.random() * this.stage.stageWidth;
            star.y = Math.random() * this.stage.stageHeight;

            asteroid.x = Math.random() * this.stage.stageWidth;
            asteroid.y = Math.random() * this.stage.stageHeight;
        }
    }

    // 游戏更新逻辑
    public update(): void {
        // 更新星球和行星的位置、状态等
        for (let star of this.stars) {
            // 移动逻辑
        }

        for (let asteroid of this.asteroids) {
            // 移动逻辑和碰撞检测
        }
    }
}

// 在主类中启动游戏
class Main extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage);
    }

    private onAddToStage(event: egret.Event) {
        // 设置Egret的帧频率
        egret.ticker.framerate = 60;
        // 定义游戏更新函数
        egret.ticker.addEventListener(egret.Event.ENTER_FRAME, () => {
            let scene: GameScene = new GameScene();
            scene.update();
        }, this);
    }
}

// 启动Egret游戏
new Main();

这个简单的示例展示了如何在TypeScript中使用Egret引擎来创建一个基本的游戏场景，其中包括了一些星球（Star）和行星（Asteroid）。游戏场景会随机生成一些星球和行星，并且可以在主类中定期更新它们的位置和状态。这个例子旨在教育开发者如何使用Egret来开始他们自己的游戏项目。

- 阅读更多 -

vue3+typescript+vant3零经验开发者可用

System

2024-08-16

所有,typescript

对于零经验的开发者来说，使用Vue3、TypeScript和Vant 3创建一个简单的移动端应用可以遵循以下步骤：

安装Node.js和npm。
安装Vue CLI：npm install -g @vue/cli
创建一个新的Vue 3项目并选择TypeScript：vue create my-app，然后在提示时选择Vue 3和TypeScript。
进入项目目录：cd my-app
添加Vant 3：npm install vant
在main.ts中全局引入Vant 3组件：

import { createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)
app.use(Vant)
app.mount('#app')

在App.vue中使用Vant 3组件，例如Button：

<template>
  <div id="app">
    <van-button type="primary">按钮</van-button>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
  components: {
    [Button.name]: Button,
  },
});
</script>

启动开发服务器：npm run serve

这样，你就拥有了一个基础的Vue 3 + TypeScript + Vant 3应用，可以根据需要进行扩展和学习。

- 阅读更多 -

Vue3+Typescript+Ros2简单示例

System

2024-08-16

所有,typescript

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

export default defineComponent({
  name: 'Ros2VueComponent',
  setup() {
    const msg = ref('Hello, ROS2!');

    function sendMessage() {
      // 假设有一个全局的ROS2实例和发布者
      // ROS2.Publisher.publish(msg.value);
      console.log(`Message sent: ${msg.value}`);
    }

    return { msg, sendMessage };
  }
});
</script>

这个简单的Vue组件使用Vue3和TypeScript，展示了如何在Vue组件中使用TypeScript。它包含了一个响应式的数据属性msg和一个方法sendMessage，用于模拟发送一个消息到ROS2系统。在实际应用中，你需要替换掉ROS2.Publisher.publish这部分代码，以实现与ROS2的通信。

- 阅读更多 -

【TypeScript】TS全解

System

2024-08-16

所有,typescript

TypeScript（TS）是JavaScript的一个超集，并且添加了一些静态类型的特性，使得它可以在代码编译阶段就发现一些类型错误。

以下是TypeScript的一些关键概念和基本用法的示例代码：

安装TypeScript:

npm install -g typescript

编译TypeScript文件:

tsc filename.ts

基本类型：

let isDone: boolean = false;
let count: number = 10;
let name: string = "Hello, World";
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

函数：

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

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

类：

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        return 'Hello, ' + this.name;
    }
}

let person = new Person('World');
console.log(person.greet());

接口：

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: 'Alice',
    age: 25
};

类型别名：

type Person = {
    name: string;
    age: number;
};

let person: Person = {
    name: 'Alice',
    age: 25
};

泛型：

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>('Hello, World');

异步函数：

async function fetchData(): Promise<string> {
    let response = await fetch('https://api.example.com/data');
    return await response.text();
}

修饰符：

class MyClass {
    private myField: string = 'Hello, World';
    constructor(value: string) {
        this.myField = value;
    }
    getMyField(): string {
        return this.myField;
    }
}

let myClass = new MyClass('Hello, TypeScript');
console.log(myClass.getMyField());

这些代码片段展示了TypeScript的基本特性和用法，涵盖了基本数据类型、函数、类、接口、类型别名、泛型、异步编程和修饰符等方面。

- 阅读更多 -

使用Webpack打包Typescript ES6项目（转ES5）

System

2024-08-16

所有,typescript

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.ts', // 项目入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包后的目录
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'] // 自动解析的文件扩展名
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 正则匹配ts或tsx文件
        use: [
          {
            loader: 'babel-loader', // 使用babel-loader进行转换
            options: {
              presets: [
                '@babel/preset-env' // 转换ES6到ES5
              ]
            }
          },
          'ts-loader' // 使用ts-loader处理ts/tsx文件
        ],
        exclude: /node_modules/ // 排除node_modules目录
      },
      {
        test: /\.json$/,
        type: 'json',
        exclude: /node_modules/
      }
    ]
  }
};

这个配置文件定义了一个简单的Webpack打包流程，它将Typescript代码转换为ES5代码，并输出到dist目录下的bundle.js文件中。在这个配置中，我们使用了babel-loader来处理ES6语法，并使用ts-loader来处理Typescript代码。这样，你就可以将你的项目打包成一个兼容大部分浏览器的JavaScript文件了。

- 阅读更多 -

ElasticSearch的Node.js客户端：实战技巧

System

2024-08-16

所有,nodejs

const elasticsearch = require('elasticsearch');

// 创建Elasticsearch客户端实例
const client = new elasticsearch.Client({
  host: 'localhost:9200',
  log: 'trace'
});

// 使用客户端执行基本的搜索操作
client.search({
  index: 'myindex',
  type: 'mytype',
  body: {
    query: {
      match: {
        title: 'Elasticsearch'
      }
    }
  }
}).then(response => {
  console.log('搜索结果:', response.hits.hits);
}, error => {
  console.error('搜索出错:', error);
});

// 创建一个新的文档
client.create({
  index: 'myindex',
  type: 'mytype',
  id: '1',
  body: {
    title: 'Elasticsearch: The Definitive Guide',
    published_date: '2015-02-06',
    author: 'Zachary Tong'
  }
}).then(response => {
  console.log('文档创建成功:', response);
}, error => {
  console.error('创建文档出错:', error);
});

这段代码展示了如何使用Elasticsearch的Node.js客户端来执行基本的搜索操作和创建文档。它首先配置了Elasticsearch客户端，然后执行了一个搜索查询，并在控制台输出了结果。接着，它演示了如何创建一个新的文档，并在文档成功创建后输出响应。这些操作都使用了Promises进行异步处理，这是当前在Node.js中实现异步编程的推荐方式。

- 阅读更多 -

项目架构：eslint 代码检测、提交代码审查

System

2024-08-16

所有,typescript

为了实现上述项目架构，你可以使用以下工具和流程：

ESLint: 用于检查JavaScript代码质量和风格问题。
Git Hooks: 用于在提交代码到版本库前自动运行代码检查。

首先，确保你已经安装了ESLint：

npm install eslint --save-dev

然后，在项目根目录下创建一个.eslintrc.js配置文件，并配置你的规则：

module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    // 自定义规则
  }
};

接下来，安装husky来管理Git hooks：

npm install husky --save-dev
npx husky install

使用npx husky add .husky/pre-commit 'npm test'来设置在每次提交前运行npm test。

在package.json中，添加一个test脚本来运行ESLint：

{
  "scripts": {
    "test": "eslint ."
  }
}

现在，每次提交前，都会自动运行ESLint检查你的代码风格和错误。如果代码中有不符合规则的地方，ESLint会报错，阻止提交。

注意：这个例子假设你的项目是一个Node.js项目，并且使用npm作为包管理器。如果你的项目是一个React或其他类型的项目，你可能需要安装额外的ESLint插件和相关依赖。

- 阅读更多 -