TypeScript 常用代码片段
Siona
TypeScript 常用代码片段
Arrays 数组
请确保数组和目标元素的类型匹配，否则 TypeScript 可能会发出类型错误。 在这里，我将数组定义为 string[]，因为'aaa' 是字符串。
如果你的数组包含其他类型的元素，记得将类型调整为相应的类型。
let arr: string[] = ['aaa', 'bbb', 'ccc'];
/* includes() 检查数组是否包含特定元素 */
if (arr.includes('aaa')) {
console.log('数组包含 "aaa"');
} else {
console.log('数组不包含 "aaa"');
}
/* 扩展运算符 [...Arrays].reduce() 求和 */
const arrays = [0, 1, 2, 3, 4];
const sum = [...arrays].reduce((acc, currentValue) => acc + currentValue, 0);
console.log(sum); // 输出 10
Json 数组
let json_array = [{name: 'Allen', age: 20}, {name: 'Siona', age: 18}, {name: 'Roc', age: 18}];
Arrays.forEach()
forEach是一个用于遍历数组的方法，它接受一个回调函数作为参数，该回调函数将在数组的每个元素上被调用。forEach不会创建一个新的数组，它只是用来对数组进行迭代操作，对原数组进行修改或者执行一些操作。forEach的回调函数接受三个参数：当前元素、当前元素的索引和数组本身。
const numbers = [1, 2, 3];
numbers.forEach((num, index) => {
console.log(`Element ${num} at index ${index}`);
});
Arrays.map()
map也是用于遍历数组的方法，但它会创建一个新的数组，该数组的元素是对原数组元素应用某个函数后的结果。map不会改变原数组，而是返回一个新的数组，原数组保持不变。map的回调函数同样接受三个参数：当前元素、当前元素的索引和数组本身。
const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(num => num ** 2);
console.log(squaredNumbers); // [1, 4, 9]
总体来说，forEach 主要用于执行对数组的操作，而 map 主要用于创建一个新的数组，其中的元素是对原数组元素进行转换后的结果。 选择使用其中哪一个方法通常取决于您的具体需求。
Arrays.filter()
const duty = [{}, {}]
// 过滤出当前月份数据
const currentMonthDuty = duty.filter(item => new Date(item.calendar).getMonth() === month.value.getMonth())
工具类封装
/* LogicFlow node 工具类 */
const NodeUtilTS = {
getRelateNode: getRelateNode,
getFlowsByNodeId: getFlowsByNodeId,
setNodeStatus: setNodeStatus,
getHistoryNodes: getHistoryNodes
};
/**
* 获取所有出边对应的节点
* @param graphData Logic 画布数据
* @param id 节点 id
*/
function getRelateNode(graphData: any, id: string) {
const {nodes, edges} = graphData;
// 该节点所有的出边
const relates_edges = edges.filter((item: any) => item.sourceNodeId === id);
// 该节点所有出边，对应的节点
const relate_nodes = [];
relates_edges.forEach((edge: any) => {
const relate_node = nodes.find(
(node: any) => node.id === edge.targetNodeId
);
relate_nodes.push(relate_node);
});
return relate_nodes;
}
/**
* 获取指定节点的 “逻辑流”，并封装成 "边条件": "节点key"
* @param graphData Logic 画布数据
* @param id 节点 id
*/
function getFlowsByNodeId(graphData: any, id: string) {
const {nodes, edges} = graphData;
// 该节点所有的出边
const relates_edges = edges.filter((item: any) => item.sourceNodeId === id);
// 该节点所有出边，对应的节点
const flows = {};
// 一个出边只对应一个节点，但是此处的 condition 是边的条件，可能存在相同的情况，代表多条边同时执行。
let next_node = [];
relates_edges.forEach((edge: any, index) => {
const relate_node = nodes.find(
(node: any) => node.id === edge.targetNodeId
);
const {properties} = edge;
if (properties && properties.condition && properties.condition !== 'default') {
if (flows[properties.condition] === undefined) {
next_node = [];
next_node.push(relate_node.properties.key);
flows[properties.condition] = next_node;
} else {
flows[properties.condition].push(relate_node.properties.key);
}
} else {
next_node.push(relate_node.properties.key);
flows['sequence'] = next_node
}
});
return flows;
}
/**
* 根据服务端 dfa 数据，设置节点状态
* @param graphData
* @param flows
* @param current_nodes
*/
function setNodeStatus(graphData: any, flows: any, current_nodes: any) {
const {historyNodes} = getHistoryNodes(flows, current_nodes);
const {nodes} = graphData;
nodes.forEach(item => {
if (current_nodes.includes(item.properties.key)) {
item.properties.status = 'running';
} else {
if (historyNodes.has(item.properties.key)) {
item.properties.status = 'completed';
}
}
});
return graphData;
}
/**
* 获取历史节点列表
* 获取服务端给的 dfa 数据，进行解构
* @param flows
* @param current_nodes
*/
function getHistoryNodes(flows: any, current_nodes: any) {
const historyNodes = new Set<any>();
flows.forEach((item: any, index: bigint) => {
if (!current_nodes.includes(item.current)) {
historyNodes.add(item.current);
historyNodes.add(item.prev);
}
});
return {historyNodes};
}
export default NodeUtilTS;