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;