文章目录
📈「作者简介」:不知名十八线技术博主【ai_todo】
📚「推荐主页」:前端小姐姐【阿珊和她的猫】
🎁「推荐专栏」:《从0到0.01入门React》
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)
TypeScript(简称 TS)是一种由Microsoft开发和维护的开源编程语言。
它是JavaScript
的一个超集,意味着任何有效的JavaScript代码也是有效的TypeScript代码。
TypeScript通过添加静态类型、类、模块和接口
等概念来扩展JavaScript,提供了更强大的工具和功能,用于开发大型、复杂的应用程序。
TypeScript的主要目标是提供更好的开发工具和开发体验,通过在编译阶段捕获潜在的错误和提供更丰富的代码提示,帮助开发者编写更可靠、可维护的代码。它引入了类型注解系统,允许开发者为变量、函数参数、返回值等添加类型注解,以提供更严谨的类型检查。
TypeScript
编译器将TypeScript
代码转换为JavaScript
,使得它可以在任何支持JavaScript的环境中运行,包括浏览器、服务器和移动应用程序等。
通过使用TypeScript,开发者可以利用JavaScript生态系统的优势,并获得更强大的工具支持和更高的安全性,将其应用于各种规模的项目中。
当使用 TypeScript 技术栈时,可以封装一些常用的方法函数来提高代码的可重用性和可维护性。
下面是常用的方法函数的示例:
1. debounce
防抖函数:
在一定时间内只触发最后一次操作,用于处理频繁触发的事件,如搜索输入框的实时搜索。
const debounce = (fn: () => void, delay: number) => {
let timeout: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn(...args);
}, delay);
};
};
2. throttle
节流函数
以一定时间间隔触发操作,用于控制连续触发的事件,比如页面滚动事件的处理。
const throttle = (fn: () => void, delay: number) => {
let lastTime = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - lastTime >= delay) {
fn(...args);
lastTime = now;
}
};
};
3. serialize
序列化函数
将对象转换为 URL 查询字符串,用于将对象数据编码为可传输或可保存的字符串格式。
const serialize = (obj: object): string => {
return Object.entries(obj)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
};
4. deserialize
反序列化函数
将 URL 查询字符串解析为对象,用于将字符串格式的数据解码为对象数据。
const deserialize = (str: string): object => {
const params = new URLSearchParams(str);
const obj: any = {};
for (const [key, value] of params.entries()) {
obj[key] = decodeURIComponent(value);
}
return obj;
};
5. capitalize
首字母大写函数
将字符串的首字母转换为大写。
const capitalize = (str: string): string => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
6. formatCurrency
格式化货币函数
将数字格式化为指定货币的字符串表示,并添加货币符号。
const formatCurrency = (value: number, currency: string): string => {
return `${currency}${value.toFixed(2)}`;
};
7. isEmpty
判断是否为空函数
用于检查给定的值是否为空,包括空数组、空对象、空字符串等。
const isEmpty = (value: any): boolean => {
if (Array.isArray(value)) {
return value.length === 0;
}
if (typeof value === 'object' && value !== null) {
return Object.keys(value).length === 0;
}
return !value;
};
8. deepClone
深拷贝函数
用于创建给定对象的深层副本,确保不会更改原始对象。
const deepClone = <T>(obj: T): T => {
return JSON.parse(JSON.stringify(obj));
};
9. formatDate
格式化日期函数
将 Date 对象格式化为指定格式的日期字符串。
const formatDate = (date: Date, format: string): string => {
// 使用合适的日期格式库进行日期格式化,例如 moment.js 或 date-fns
// 这里只是简单示例,可根据实际需求进行调整
const year = date.getFullYear().toString();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
// 替换格式中的占位符
return format
.replace('YYYY', year)
.replace('MM', month)
.replace('DD', day);
};
10. shuffle
数组洗牌函数
随机打乱数组中元素的顺序,生成一个新的洗牌后的数组。
const shuffle = <T>(array: T[]): T[] => {
const copyArray = [...array];
for (let i = copyArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copyArray[i], copyArray[j]] = [copyArray[j], copyArray[i]];
}
return copyArray;
};
使用这些封装好的方法函数可以提高代码的重用性,并减少重复编写类似功能的代码。记得根据实际情况进行类型声明,以让 TypeScript 提供类型检查和智能提示的好处。