分类 typescript 下的文章

2024-08-21

在TypeScript中，模块是一种将代码分割成多个独立部分的方法，以提高代码组织性和可维护性。TypeScript模块系统与JavaScript模块系统相兼容，支持import/export语法。

以下是一个简单的TypeScript模块示例：




// greeter.ts
export function greet(name: string) {
    return `Hello, ${name}!`;
}
 
// main.ts
import { greet } from './greeter';
 
console.log(greet('World')); // 输出: Hello, World!

在这个例子中，我们定义了一个名为greeter.ts的模块，它导出了一个greet函数。然后在main.ts文件中，我们导入了greeter.ts模块中的greet函数，并调用它打印了一条消息。

要运行这个例子，你需要先将TypeScript编译成JavaScript，使用命令：




tsc main.ts greeter.ts

然后执行编译后的JavaScript文件：




node main.js

这将输出：




Hello, World!

TypeScript模块还支持默认导出和导入（export default 和 import ... from ...），命名空间导出和导入（namespace 和 import * as ... from ...），以及export =和import ... = require("module")的CommonJS模块语法兼容。

- 阅读更多 -

VUE3 +TypeScript + i18n多语言结合使用

System

2024-08-21

所有,typescript




import { createI18n } from 'vue-i18n';
 
// 定义多语言资源
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
};
 
// 设置默认语言和语言资源
const i18n = createI18n({
  locale: 'en', // 设置默认语言
  fallbackLocale: 'en', // 设置后备语言
  messages, // 语言资源
});
 
// 在Vue应用中使用i18n
export default i18n;

在Vue 3应用程序中，你可以通过以上代码创建并配置i18n实例，并在应用程序中使用。这个例子展示了如何定义多语言资源，并通过createI18n函数创建i18n实例，最后将其导出以供Vue应用使用。

- 阅读更多 -

canvas画板之绘画元素的框选

System

2024-08-21

所有,typescript

在HTML5 Canvas上实现元素的框选，通常需要监听鼠标事件来获取起点和终点，然后在两点间绘制一个矩形框。以下是一个简单的实现示例：




<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
 
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var starting = false; // 标记是否正在绘制
var startPoint = null; // 起点坐标
var endPoint = null; // 终点坐标
 
canvas.addEventListener('mousedown', function(e) {
    starting = true;
    startPoint = { x: e.offsetX, y: e.offsetY };
});
 
canvas.addEventListener('mousemove', function(e) {
    if (starting) {
        // 重绘画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        endPoint = { x: e.offsetX, y: e.offsetY };
        drawSelectionBox(startPoint, endPoint);
    }
});
 
canvas.addEventListener('mouseup', function(e) {
    starting = false;
    endPoint = { x: e.offsetX, y: e.offsetY };
    drawSelectionBox(startPoint, endPoint);
});
 
function drawSelectionBox(start, end) {
    ctx.beginPath();
    ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
    ctx.strokeStyle = 'blue';
    ctx.stroke();
}
</script>
 
</body>
</html>

在这个例子中，我们定义了一个drawSelectionBox函数来绘制选择框。当用户在画布上按下鼠标时，我们记录下起点坐标，并开始绘制模式。当用户移动鼠标时，我们重绘画布并绘制一个以鼠标位置为终点的矩形框。当用户释放鼠标时，我们完成选择框的绘制。

- 阅读更多 -

【TypeScript】枚举类型和泛型的详细介绍

System

2024-08-21

所有,typescript




// 定义一个简单的枚举类型
enum SimpleEnum {
    A,
    B,
    C = "hello", // 枚举成员可以是任意类型
    D = 42,
}
 
// 使用枚举
function printEnumValue(value: SimpleEnum) {
    console.log(value);
}
printEnumValue(SimpleEnum.A); // 输出: 0
printEnumValue(SimpleEnum.C); // 输出: "hello"
 
// 使用泛型定义一个枚举映射的工厂函数
function createEnum<T>(enumObj: T): T {
    return enumObj;
}
 
// 使用泛型定义一个枚举映射
enum Coin {
    Penny = 1,
    Nickel = 5,
    Dime = 10,
    Quarter = 25,
}
 
type CoinMap = {
    [Coin.Penny]: "penny",
    [Coin.Nickel]: "nickel",
    [Coin.Dime]: "dime",
    [Coin.Quarter]: "quarter",
};
 
const coinMap: CoinMap = createEnum({
    [Coin.Penny]: "penny",
    [Coin.Nickel]: "nickel",
    [Coin.Dime]: "dime",
    [Coin.Quarter]: "quarter",
});
 
console.log(coinMap); // 输出: { 1: "penny", 5: "nickel", 10: "dime", 25: "quarter" }

这个代码示例展示了如何在TypeScript中使用枚举类型，并通过泛型来创建复杂的类型映射。首先定义了一个简单的枚举SimpleEnum，然后通过一个函数printEnumValue来打印不同枚举成员的值。接着使用泛型来创建一个枚举映射，并展示如何使用这个映射。这个示例有助于理解枚举的使用以及TypeScript中泛型的应用。

- 阅读更多 -

【TypeScript】接口类型 Interfaces 的使用理解

System

2024-08-21

所有,typescript




// 定义一个简单的接口
interface Point {
  x: number;
  y: number;
}
 
// 使用接口
let point: Point = { x: 1, y: 2 };
 
// 接口可以是继承的
interface ColoredPoint extends Point {
  color: string;
}
 
// 使用继承的接口
let coloredPoint: ColoredPoint = { x: 1, y: 2, color: "red" };
 
// 接口可以声明只读属性
interface ReadonlyPoint {
  readonly x: number;
  readonly y: number;
}
 
// 使用只读接口
let readonlyPoint: ReadonlyPoint = { x: 1, y: 2 };
// 尝试修改readonlyPoint的属性会导致错误
// readonlyPoint.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.
 
// 接口可以声明可选属性
interface OptionalPoint {
  x?: number;
  y?: number;
}
 
// 使用可选接口
let optionalPoint: OptionalPoint = { x: 1 };
 
// 接口可以声明函数类型
interface PointFactory {
  (x: number, y: number): Point;
}
 
// 使用接口声明函数
let pointFactory: PointFactory = function(x: number, y: number): Point {
  return { x: x, y: y };
};
 
// 接口可以声明类类型
interface PointConstructor {
  new (x: number, y: number): Point;
}
 
// 使用接口声明类
class PointClass implements Point {
  constructor(public x: number, public y: number) { }
}
 
// 接口可以声明类中的方法
interface PointMutations {
  move(dx: number, dy: number): void;
}
 
// 使用接口声明类中的方法
class MutablePoint implements Point, PointMutations {
  x: number;
  y: number;
 
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
 
  move(dx: number, dy: number): void {
    this.x += dx;
    this.y += dy;
  }
}
 
// 使用接口可以进行mixin编程模式
interface ClonablePoint {
  clone(): Point;
}
 
class PointCloner implements ClonablePoint {
  clone(): Point {
    return { x: this.x, y: this.y };
  }
}
 
// 接口可以是合成类型
interface Shape {
  color: string;
}
 
interface PointShape extends Point, Shape {
  // 新属性，Point和Shape的属性都有
}
 
// 使用合成类型
let pointShape: PointShape = { x: 1, y: 2, color: "red" };

这个例子展示了TypeScript中接口的不同使用方式，包括声明一个接口、接口的继承、只读属性、可选属性、函数类型声明、类类型声明以及类中方法的声明。同时，它也演示了如何使用接口进行mixin编程模式，以及如何创建合成类型。这些概念对于学习TypeScript和理解面向对象编程非常有帮助。

- 阅读更多 -

【TypeScript】TS进阶-泛型

System

2024-08-21

所有,typescript




// 定义一个函数，它接受两个参数，第一个是数组的类型，第二个是函数的类型
function compose<A, B>(f: (x: A) => B, g: (x: A) => A): (x: A) => B {
  return x => f(g(x));
}
 
// 使用泛型定义一个类型，它将一个联合类型的每个成员都转换为大写
type UppercaseUnion<T> = {
  [P in T]: uppercase(P);
};
 
// 使用泛型定义一个类型，它将一个对象的键转换为大写
type UppercaseKeys<T> = {
  [K in keyof T as uppercase(K)]: T[K];
};
 
// 使用泛型定义一个类型，它将一个对象的值转换为可选的
type MakeOptional<T> = {
  [K in keyof T]?: T[K];
};
 
// 使用泛型定义一个类型，它将一个对象的值转换为只读的
type MakeReadonly<T> = {
  readonly [K in keyof T]: T[K];
};
 
// 使用泛型定义一个类型，它将一个对象的键和值都转换为只读的
type MakeDeepReadonly<T> = {
  readonly [K in keyof T]: MakeDeepReadonly<T[K]>;
};
 
// 使用泛型定义一个类型，它将一个对象的键和值都转换为可选的并且是只读的
type DeepPartial<T> = {
  [K in keyof T]?: DeepPartial<T[K]>;
};
 
// 使用泛型定义一个类型，它将一个对象的键和值都转换为必需的并且是只读的
type DeepRequired<T> = {
  -readonly [K in keyof T]-?: DeepRequired<T[K]>;
};

这个代码示例展示了如何使用TypeScript中的泛型来创建自定义的类型操作。每个函数和类型都是对泛型的一个具体应用，它们展示了如何使用泛型来创建更加灵活和可重用的类型定义。

- 阅读更多 -

读取swagger接口文档、自动生成前端ts或js代码

System

2024-08-21

所有,typescript

要读取Swagger接口文档并自动生成前端TypeScript(ts)或JavaScript(js)代码，你可以使用工具如swagger-typescript-api或swagger-js-codegen。以下是使用swagger-typescript-api的示例步骤：

安装swagger-typescript-api：




npm install -g swagger-typescript-api

运行该工具并指定Swagger文档的URL：




stapi -s http://your-swagger-api-docs-url.com/swagger.json -o ./src/api

这将会根据Swagger定义生成TypeScript接口和模型文件，并将它们保存在./src/api目录下。

如果你想生成JavaScript代码，可以使用swagger-js-codegen：

安装swagger-js-codegen：




npm install -g swagger-js-codegen

运行该工具并指定Swagger文档的文件：




swagger-js-codegen generate-node -i ./swagger.json -o ./src/api

这会生成JavaScript代码，并将其保存在./src/api目录下。

请注意，这些工具需要你的Swagger文档是JSON格式的，并且它们都需要网络连接以从指定的URL下载文档。如果你的Swagger文档是YAML格式的，你可能需要先将其转换为JSON格式。

- 阅读更多 -

使用TypeScript实现一个浏览器事件的集中管理

System

2024-08-21

所有,typescript




// 定义事件管理器接口
interface EventManager {
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
  trigger(event: string, ...args: any[]): void;
}
 
// 实现事件管理器
class BrowserEventManager implements EventManager {
  private events: { [key: string]: Function[] } = {};
 
  on(event: string, handler: Function): void {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(handler);
  }
 
  off(event: string, handler: Function): void {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(h => h !== handler);
    }
  }
 
  trigger(event: string, ...args: any[]): void {
    if (this.events[event]) {
      this.events[event].forEach(handler => handler.apply(this, args));
    }
  }
}
 
// 使用事件管理器
const eventManager = new BrowserEventManager();
 
const handler = (message: string) => {
  console.log(`Event triggered with message: ${message}`);
};
 
eventManager.on('myEvent', handler);
eventManager.trigger('myEvent', 'Hello, World!');  // 输出: Event triggered with message: Hello, World!
 
eventManager.off('myEvent', handler);

这段代码定义了一个EventManager接口，并实现了BrowserEventManager类来管理浏览器中的事件。on方法用于注册事件处理器，off方法用于注销，而trigger方法用于触发事件，调用所有注册的处理器。这是一个简单的事件管理示例，适用于学习和教育目的。

- 阅读更多 -

typescript入门

System

2024-08-21

所有,typescript

TypeScript 是 JavaScript 的一个超集，并添加了一些静态类型的特性。这使得编写大型应用程序变得更加容易，并可以在编译时捕获许多常见的错误。

以下是一个简单的 TypeScript 示例，它定义了一个函数，该函数接收两个字符串参数并返回它们的连接。




function joinStrings(a: string, b: string): string {
    return a + b;
}
 
const result = joinStrings('Hello, ', 'World!');
console.log(result);  // 输出: Hello, World!

在这个例子中，a 和 b 的类型被指定为 string，这告诉 TypeScript 这两个参数应该是字符串类型。函数的返回类型也是 string，这样 TypeScript 可以在编译时检查函数是否正确地返回了一个字符串。

要运行这段 TypeScript 代码，你需要先安装 TypeScript 编译器。可以使用 npm 安装：




npm install -g typescript

然后，你可以使用 tsc 命令来编译 TypeScript 文件：




tsc example.ts

这将生成一个 JavaScript 文件 (example.js)，你可以在任何浏览器或 Node.js 环境中运行这个 JavaScript 文件。

- 阅读更多 -

前端学习笔记（15）-Vue3状态管理store及Vuex的使用

System

2024-08-21

所有,typescript




<template>
  <div>
    <h1>Vuex 示例</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
 
<script>
import { mapState, mapMutations } from 'vuex';
 
export default {
  computed: {
    // 使用对象展开运算符将此组件的计算属性添加到组件的计算属性中
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    // 使用对象展开运算符将此组件的方法添加到组件的方法中
    ...mapMutations({
      increment: 'INCREMENT',
      decrement: 'DECREMENT'
    })
  }
};
</script>

这个简单的Vue组件展示了如何使用Vuex来管理状态。它使用mapState帮助器函数来访问状态，并使用mapMutations帮助器函数来提交变更。这是一个更加符合现代Vue开发实践的示例。

- 阅读更多 -