在SPFX命令集中使用SP.Modal对话框

我的要求是使用列表中的命令集在模态对话框中打开 SharePoint 页面 . 我跟着这个：MSDN tutorial to create command set

而这个问题：How to refernence sp.js

这是我的 .ts 文件代码

import { override } from '@microsoft/decorators';
            import { Log } from '@microsoft/sp-core-library';
            import {
              BaseListViewCommandSet,
              Command,
              IListViewCommandSetListViewUpdatedParameters,
              IListViewCommandSetExecuteEventParameters
            } from '@microsoft/sp-listview-extensibility';
            import { Dialog } from '@microsoft/sp-dialog';
            import { SPComponentLoader } from '@microsoft/sp-loader';
            import * as strings from 'DocManagerCommandSetStrings';
            require('sp-init');
              require('microsoft-ajax');
              require('sp-runtime');
              require('sharepoint');
            /**
             * If your command set uses the ClientSideComponentProperties JSON input,
             * it will be deserialized into the BaseExtension.properties object.
             * You can define an interface to describe it.
             */
            export interface IDocManagerCommandSetProperties {
              // This is an example; replace with your own properties
              sampleTextOne: string;
              sampleTextTwo: string;
            }

            const LOG_SOURCE: string = 'DocManagerCommandSet';

            export default class DocManagerCommandSet extends BaseListViewCommandSet<IDocManagerCommandSetProperties> {

              @override
              public onInit(): Promise<void> {
                Log.info(LOG_SOURCE, 'Initialized DocManagerCommandSet');
                return Promise.resolve();

              }

              @override
              public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
                const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
                if (compareOneCommand) {
                  // This command should be hidden unless exactly one row is selected.
                  compareOneCommand.visible = event.selectedRows.length === 1;
                }
              }

              @override
              public onExecute(event: IListViewCommandSetExecuteEventParameters): void {

                switch (event.itemId) {
                  case 'COMMAND_1':
                    Dialog.alert(`${this.properties.sampleTextOne}`);
                    break;
                  case 'COMMAND_2':
            //DocManagerCommandSet._loadSPJSOMScripts();

                  var options = {
                title: "My Dialog Title",
                width: 400,
                height: 600,
                url: "/_layouts/DialogPage.aspx" };
                var value = SP.UI.ModalDialog.showModalDialog(options);
                  //  Dialog.alert(`${this.properties.sampleTextTwo}`);
                    break;
                  default:
                    throw new Error('Unknown command');
                }
              }
             private static getSiteCollectionUrl(): string { 
                 let baseUrl = window.location.protocol + "//" + window.location.host; 
               const pathname = window.location.pathname; 
                 const siteCollectionDetector = "/sites/"; 
                 if (pathname.indexOf(siteCollectionDetector) >= 0) { 
                   baseUrl += pathname.substring(0, pathname.indexOf("/", siteCollectionDetector.length)); 
                 } 
                 return baseUrl; 
               } 

               private static _loadSPJSOMScripts() {
                 const siteColUrl = "https://shelldevelopment.sharepoint.com/sites/SPODA0332/";
                 SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', { 
                    globalExportsName: '$_global_init' 
                  }) 
                     .then((): Promise<{}> => { 
                       return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', { 
                         globalExportsName: 'Sys' 
                       }); 
                     }) 
                     .then((): Promise<{}> => { 
                       return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', { 
                         globalExportsName: 'SP' 
                       }); 
                     }) 
                     .then((): Promise<{}> => { 
                       return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', { 
                        globalExportsName: 'SP' 
                       }); 

                     }) .then((): Promise<{}> => {
                  return SPComponentLoader.loadScript('/_layouts/15/sp.init.js', {
                    globalExportsName: 'SP'
                  });
                }).then((): Promise<{}> => {
                  return SPComponentLoader.loadScript('/_layouts/15/sp.ui.dialog.js', {
                    globalExportsName: 'SP'
                  });
                });

               }
            }

我收到以下错误：

在SP.UI.ModalDialog.showModalDialog（选项）中找不到名称'SP' .

请提供一些见解，因为我是SPFX的初学者