Angular 2+（Angular 5）中使用SharePoint GetUrlKeyValue函数报错的技术问询

我之前在Angular 2+项目对接SharePoint时也碰到过一模一样的问题，TypeScript的类型检查确实会对这些SharePoint全局API不太友好，不过你之前用window.parent['SP'].UI.ModalDialog的思路完全可以复用，甚至还有更简便的方式，给你几个可行的方案：

方案一：直接通过window对象断言调用 #

GetUrlKeyValue本身是挂载到全局window对象上的，只是TypeScript不知道这个方法的存在，所以我们可以用类型断言绕过检查：

// 调用示例，第三个参数可选，默认是当前页面URL
const queryValue = (<any>window).GetUrlKeyValue('你的参数名', false, window.location.href);

这种方式适合偶尔调用的场景，不用额外配置，直接写就行。

方案二：全局声明类型（推荐长期使用） #

如果你的项目里需要多次调用这个方法，最好在全局声明它的类型，这样不用每次都写断言。在项目的src/typings.d.ts文件里添加以下代码：

declare global {
  interface Window {
    GetUrlKeyValue: (key: string, noDecode?: boolean, url?: string) => string;
  }
}

export {};

之后你就可以在任何组件里直接调用，TypeScript不会再报错：

const queryValue = window.GetUrlKeyValue('你的参数名');

方案三：复用你之前的SP命名空间写法 #

和你处理ModalDialog的方式一致，GetUrlKeyValue也可以通过SharePoint的官方命名空间SP.Utilities.Utility来访问，这样写法更统一：

const queryValue = window.parent['SP'].Utilities.Utility.GetUrlKeyValue('你的参数名', false, window.location.href);

注意这种方式需要确保sp.js脚本已经加载完成，如果不确定的话，可以用SharePoint的脚本加载器确保依赖就绪：

ngOnInit() {
  // 等待sp.js加载完成后再调用
  SP.SOD.executeFunc('sp.js', 'SP.Utilities.Utility', () => {
    const queryValue = window.parent['SP'].Utilities.Utility.GetUrlKeyValue('你的参数名');
    // 在这里处理获取到的参数值
  });
}

这三个方案都能解决Cannot find name 'GetUrlKeyValue'的报错，你可以根据项目的实际使用场景选择最合适的一种。

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