typescript专题

创建 typescript 项目.md

有时候需要创建一个最简单的 typescript 项目来验证一些东西，这里记录一下如何创建一个最简单的 typescript 项目。创建并初始化项目 $ mkdir my-typescript-project$ cd my-typescript-project$ npm init -y$ npm install typescript ts-node @types/node --save

TypeScript数据结构与算法系列(一) —— 链表

TypeScript目录链表常用操作1.初始化链表2. 插入节点3. 删除节点4. 访问节点5. 查找节点图源：你好算法内存空间是所有程序的公共资源，在一个复杂的系统运行环境下，空闲的内存空间可能散落在内存各处。我们知道，存储数组的内存空间必须是连续的，而当数组非常大时，内存可能无法提供如此大的连续空间。此时链表的灵活性优势就体现出来了。链表（linked list）

VueSax-解决Vue3报错问题，并支持typescript

以下为坑点根据官方提示，本人在vue3+typescript的项目中添加了vuesax的组件依赖根据正常的导入依赖思路编写代码，发现typescript一直报查询vuesax的目录文件发现存在ts文件，于是乎觉得是自己的问题，就查阅gpt与网上资料，查了一晚上加入各种方法，都没有解决，于是乎选择javascript进行测试，发现还是不行！ js里虽然不报错，但是在页面

Vue3 + TypeScript 实现防抖（Debounce）和节流（Throttle）

在Vue3项目中结合TypeScript使用防抖（Debounce）和节流（Throttle）技术，可以有效提升应用的性能和用户体验，尤其是在处理频繁触发的事件（如滚动、窗口大小调整、输入框内容变化等）时。下面将详细介绍这两种技术的原理、使用方法以及适用场景。一、防抖（Debounce）原理：防抖技术通过延迟函数的执行来减少函数的调用频率。在事件被触发n秒后再执行回调，如果在这

Typescript实现react-redux的useSelector和useDispatch的状态定义

背景：react中使用typescript,在引入redux之后很多状态定义有问题，记录下来（文章记录学习react-redux过程中的踩坑）。 1.useSelector时，state语法报错，类型为unknown,如下图我的store状态设置的很简单，两个模块导出，只在state中定义了一个基础类型在组件中使用useSelector取state中的值，然后报state类型未知我

TypeScript中的函数与类

TypeScript中的类传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript，我们允许开发者现在就使用这些特性，

Typescript 常用变量类型声明

函数声明变量 // 基础类型（number、boolean、string）const int = (arg1: number) {// ...}// 数组类型const arr1 = (arg1: number[]) {// ...}// 另一种写法，使用泛型const arr2 = (arg1: Array<number>) {// ...}// 任意类型(any)// a

VUE3+FLASK+TYPESCRIPT（实习接触，学习并自主实现）

开头不同于笔者在学校自学简单的html+js+css的模式，加入了前端框架VUE3真的是一个非常方便的工具，而且本人主攻于c++方向，像ts这种更严格的语法标准反而更加比原生js更能让我接受，由于这三个都是本人没接触的库框架和语言，所以笔者采取的是先学习在边做项目边巩固的方法。 VUE3初始化下面提供一个简单的VUE3+FLASK案例，旨在入门打通Vu

Typescript 使用 Jest 进行单元测试

参考文章：快速开始·Jest 安装所需依赖：npm install --save-dev ts-node jest @types/jest ts-jest Jest 转换 TypeScript 代码需要ts-node添加并配置 Jest 配置文件：jest.config.ts // jest.config.tsmodule.exports = {// TypeScript 代码预处理pres

TypeScript与vue

一、为组件的props标注类型 - 在没有使用TS之前，是这样接受props： - 在TS环境中，是这样接受props： - 对于props的可选项如何限制呢？ 1、类型限制类型限制在接收

TypeScript(TS) 自定义绑定快捷键

有很多软件中都可以让用户自定义快捷键如微信中的快捷键：思路： 1. 将快捷键分为两部分： a. 主要的键 'shift', 'ctrl', 'alt', 'command'； b. 非主要的键字母键、数字键等； 2. 键盘按下事件：比较按键和绑定的快捷键是否相同代码实现 /*** 快捷键信息对象*/interface Shortcuts {

VSCode中TypeScript调试配置

一、背景最近想用TypeScript编译项目，在创建完项目后，我发现VSCode只有在调试TypeScript的单个文件时生效，如果存在引用，再进行断点调试，则调试功能不生效了。随后，我让Chatgpt 生成一个一套配置，发现是生效的。因此记录一下。下面是具体内容：面临的问题是：在没有Test.ts 文件时，给hello()函数增加断点，断点功能正常；在有Test.ts 文

TypeScript类型检查错误 error TS2339

错误产生上一篇博客写了一个调用摄像头的 demo ，用了 vue3 + vite ，使用了 TypeScript ，代码大致如下： <script setup lang="ts">import { onMounted, ref } from 'vue';import WelcomeItem from './WelcomeItem.vue'import ToolingIcon from

vue.js3+element-plus+typescript add,edit,del,search

vite.config.ts server: {cors: true, // 默认启用并允许任何源host: '0.0.0.0', // 这个用于启动port: 5110, // 指定启动端口open: true, //启动后是否自动打开浏览器 proxy: {'/api': {target: 'http://localhost:8081/', //实际请求地址，数据库的rest APIsc

TypeScript教程（一）之我们为什么要学TypeScript

根据软件开发设计公司 The Software House 针对 2022 年前端市场状态的调查显示，84% 的受访者都在使用 TypeScript，43% 的受访者甚至认为 TypeScript 将超越 JavaScript 成为前端开发的主要语言。TypeScript 这些年越来越火，可以说是前端工程师的必备技能了，各大框架都基于它实现。什么是TypeScript？ TypeScrip

TypeScript入门简介

TypeScript（TS）是JavaScript的超集，其可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorato

TypeScript 类型注解（二）

一、TypeScript类型约束--对象对象其实和数组类似，不是限制对象本身的类型，而是对对象属性类型进行限制结构简化：对对象做类型限制的好处：大家都学习过一段时间编程了，会发现咱们经常操作的类型就是对象，尤其经常调用接口，获取对象结果，那么，通过对象类型限制就可以让编辑器很方便的提示你当前对象的属性有哪些。这就是做完限制之后，很方便的得到提示关于对象函数类型限

CocosCreator JSB学习：JavaScript/TypeScript调用C++函数

CocosCreator版本：v2.3.3 VS2015：编写C++程序，并且在win32平台验证结果。 Android Studio v3.5.2：在安卓平台验证结果官方学习文档：https://docs.cocos.com/creator/manual/zh/advanced-topics/JSB2.0-learning.html 想要系统的学习，还是需要认真去看官方学习文档（尽管一

TypeScript（JavaScript）二维数组深拷贝

最近遇到一个二维数组深拷贝的问题，原以为和一维数组深拷贝一样，实际上被打脸了。代码如下： //一维数组深拷贝let num1: number[] = [1,2,3,4];let num2: number[] = num1.concat();num2[0] = 6;num2.push(5);console.log("num1:" + num1);console.log("num

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 05 购物车和订单

将产品添加到购物车定义方法 // src\helpers\cart.tsimport { Product } from '../store/models/product'export interface CartItem extends Product {count: number}// 将产品添加到购物车export const addItem = (item: Product, n

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 04 首页产品展示、搜索、筛选和产品详情

构建首页布局搜索布局 // src\components\core\Search.tsximport { Button, Col, Divider, Form, Input, Row, Select } from 'antd'import ProductItem from './ProductItem'const Search = () => {return (<><Formlayout

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 03 分类、产品

创建添加分类组件创建组件文件 // src\components\admin\AddCategory.tsximport { Button, Form, Input } from 'antd'import { Link } from 'react-router-dom'import Layout from '../core/Layout'const AddCategory = () =

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 02 登录注册

创建导航菜单 // src\components\core\Navigation.tsximport { Menu } from 'antd'import { Link } from 'react-router-dom'import { useSelector } from 'react-redux'import { AppState } from '../../store/reduce

React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 01 基础配置

页面预览该实战项目是（不怎么严谨的）电子商务网站。首页商品列表页面登录页面注册页面购物车列表支付完成页面 Dashboard 页面普通用户页面购买历史页面资料更新页面管理员页面创建分类页面创建商品页面订单列表页面显示所有用户的订单客户端技术栈介绍脚本：TypeScript前端框架：

TypeScript：择使用 interface 还是 class 来定义数据模型

在 TypeScript 中，选择使用 interface 还是 class 来定义数据模型通常取决于你的需求和设计考虑。以下是一些关于为什么你可能会选择使用 interface 而不是 class 的原因： 1. 仅定义数据结构 interface: 用于定义数据的结构和形状，但不包含实现逻辑。它主要用于描述对象的类型和结构。例如，你可能只关心 id、title 和 icon 这三个属

在 TypeScript 中，Record 和 Map 都用于存储键值对，但它们有以下区别

1.Record<string, string> 定义: Record 是 TypeScript 的一种类型，用于表示一个对象，其中所有的键是特定类型（通常是 string 或 number），所有的值也是特定类型。语法: const record: Record<string, string> = {"key1": "value1","key2": "value2"}; 特性: