能否通过可选构建步骤实现TypeScript属性转函数调用的转换？

完全可以通过构建步骤完成这个转换，不需要手动修改业务代码，而且能彻底解决正则替换搞不定的复杂场景（比如带类型断言的属性访问）。核心思路是基于AST（抽象语法树）做代码转换，而不是简单的字符串替换，这能精准识别所有合法的属性访问场景，包括你提到的带类型断言的情况。

推荐两种实现方式 #

1. TypeScript 自定义 Transformer（适配TS项目） #

因为你的代码是TypeScript，用TS官方的Transformer API最贴合，能完美处理类型断言、复杂表达式等场景：

• 核心逻辑：遍历TS的AST，找到所有访问shadowRoot/childNodes的PropertyAccessExpression节点，把el.shadowRoot替换成shadowRoot(el)、el.childNodes替换成childNodes(el)，同时自动在文件顶部添加对应的工具函数导入语句。
• 示例Transformer代码片段：

import * as ts from 'typescript';

export function domPropertyTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
  return (context) => {
    const visitor: ts.Visitor = (node) => {
      // 识别属性访问节点
      if (ts.isPropertyAccessExpression(node)) {
        const propName = node.name.getText();
        if (propName === 'shadowRoot' || propName === 'childNodes') {
          // 替换为函数调用：shadowRoot(el) 或 childNodes(el)
          const callExpr = ts.factory.createCallExpression(
            ts.factory.createIdentifier(propName),
            undefined,
            [node.expression]
          );
          return callExpr;
        }
      }

      // 自动导入工具函数（仅在文件用到目标属性时添加）
      if (ts.isSourceFile(node)) {
        const hasTargetProp = node.statements.some(stmt => {
          // 检查文件中是否存在目标属性访问
          let found = false;
          ts.forEachChild(stmt, child => {
            if (ts.isPropertyAccessExpression(child) && 
                (child.name.text === 'shadowRoot' || child.name.text === 'childNodes')) {
              found = true;
            }
          });
          return found;
        });

        if (hasTargetProp) {
          const importStmt = ts.factory.createImportDeclaration(
            undefined,
            undefined,
            ts.factory.createImportClause(
              false,
              undefined,
              ts.factory.createNamedImports([
                ts.factory.createImportSpecifier(undefined, ts.factory.createIdentifier('shadowRoot')),
                ts.factory.createImportSpecifier(undefined, ts.factory.createIdentifier('childNodes'))
              ])
            ),
            ts.factory.createStringLiteral('./utils.ts')
          );
          return ts.factory.updateSourceFile(node, [importStmt, ...node.statements]);
        }
      }

      return ts.visitEachChild(node, visitor, context);
    };

    return (node) => ts.visitNode(node, visitor);
  };
}

• 集成到Rollup：用rollup-plugin-typescript2插件，在配置中指定自定义Transformer：

import ts from 'rollup-plugin-typescript2';
import { domPropertyTransformer } from './dom-transformer';

export default {
  // ...其他配置
  plugins: [
    ts({
      transformers: {
        before: [domPropertyTransformer]
      }
    })
  ]
};

2. Babel 插件（适配Babel处理TS/JS的项目） #

如果你的项目用Babel做转译，也可以写一个Babel插件实现同样的逻辑，原理和TS Transformer一致，只是AST节点类型不同：

• 示例插件代码片段：

module.exports = function() {
  return {
    visitor: {
      MemberExpression(path) {
        const propName = path.node.property.name;
        if (propName === 'shadowRoot' || propName === 'childNodes') {
          // 替换为函数调用
          const callExpr = this.types.callExpression(
            this.types.identifier(propName),
            [path.node.object]
          );
          path.replaceWith(callExpr);

          // 标记当前文件需要导入工具函数
          path.hub.file.metadata.needsDomUtils = true;
        }
      },
      Program: {
        exit(path) {
          // 在文件顶部添加导入语句
          if (path.hub.file.metadata.needsDomUtils) {
            const importStmt = this.types.importDeclaration(
              [
                this.types.importSpecifier(this.types.identifier('shadowRoot'), this.types.identifier('shadowRoot')),
                this.types.importSpecifier(this.types.identifier('childNodes'), this.types.identifier('childNodes'))
              ],
              this.types.stringLiteral('./utils.ts')
            );
            path.unshiftContainer('body', importStmt);
          }
        }
      }
    }
  };
};

• 集成到Rollup：在@rollup/plugin-babel的配置中加入这个自定义插件即可。

核心优势 #

• 彻底解决正则替换的局限性：不管是(el as HTMLElement).shadowRoot、el.parentElement.childNodes还是其他复杂表达式，AST都能精准识别并替换。
• 零业务代码侵入：不需要手动修改任何业务代码，构建阶段自动完成转换，完全避免后续回归风险。
• 类型安全：基于TS AST转换的方案不会破坏原有的类型检查逻辑，保证代码类型正确性。

内容的提问来源于stack exchange，提问作者EoghanM