Compartilhar via

Migrar jQuery e a solução DataTables, compilada com a web part do Editor de Scripts, para a Estrutura do SharePoint

Um dos plug-ins jQuery usados com frequência é DataTables. Com a solução DataTables, você pode facilmente criar visões gerais de dados poderosas de dados provenientes APIs do SharePoint e externas.

Lista de solicitações de TI compilada usando a web part do Editor de Scripts

Para ilustrar o processo de migração de uma personalização do SharePoint usando DataTables para a Estrutura do SharePoint, use a solução a seguir, que mostra uma visão geral de solicitações de suporte de TI recuperada de uma lista do SharePoint.

Visão geral de solicitações de suporte de TI exibida em uma página do SharePoint

A solução é criada usando a web part padrão do Editor de Scripts do SharePoint. A seguir está o código usado pela personalização.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="requests" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Business unit</th>
      <th>Category</th>
      <th>Status</th>
      <th>Due date</th>
      <th>Assigned to</th>
    </tr>
  </thead>
</table>
<script>
  // UMD
  (function(factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery'], function ($) {
        return factory( $, window, document );
      });
    }
    else if (typeof exports === 'object') {
      // CommonJS
      module.exports = function (root, $) {
        if (!root) {
          root = window;
        }

        if (!$) {
          $ = typeof window !== 'undefined'
            ? require('jquery')
            : require('jquery')( root );
        }

        return factory($, root, root.document);
      };
    } else {
      // Browser
      factory(jQuery, window, document);
    }
  }
  (function($, window, document) {
    $.fn.dataTable.render.moment = function (from, to, locale) {
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }

      return function (d, type, row) {
        var m = window.moment(d, from, locale, true);

        // Order and type get a number value from Moment, everything else
          // sees the rendered value
          return m.format(type === 'sort' || type === 'type' ? 'x' : to);
        };
      };
    }));
</script>
<script>
$(document).ready(function() {
  $('#requests').DataTable({
    'ajax': {
      'url': "../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function(data) {
        return data.value.map(function(item) {
          return [
            item.ID,
            item.BusinessUnit,
            item.Category,
            item.Status,
            new Date(item.DueDate),
            item.AssignedTo.Title
          ];
        });
      }
    },
    columnDefs: [{
      targets: 4,
      render: $.fn.dataTable.render.moment('YYYY/MM/DD')
    }]
  });
});
</script>

Primeiro, a personalização carrega as bibliotecas que utiliza: jQuery, DataTables, e Moment.js.

A seguir, especifica a estrutura da tabela utilizada para apresentar os dados.

Depois de criar a tabela, ela envolve o Moment.js em um plug-in DataTables para que as datas exibidas na tabela possam ser formatadas.

Finalmente, a personalização usa a DataTables para carregar e apresentar a lista de solicitações de suporte de TI. Os dados são carregados usando AJAX de uma lista do SharePoint.

Graças ao uso do DataTables, os usuários finais têm uma solução poderosa onde podem facilmente filtrar, classificar e percorrer os resultados sem qualquer esforço de desenvolvimento adicional.

Lista de solicitações de suporte de TI exibida usando DataTables filtrada por solicitações atribuídas a Lidia classificadas em ordem decrescente pela data de conclusão

Migrar a solução de visão geral de solicitações de TI da web part do Editor de Scripts para a Estrutura do SharePoint

A transformação desta personalização para o SharePoint Framework oferece uma série de benefícios, tais como uma configuração mais fácil de usar e uma gestão centralizada da solução. A seguir, está uma descrição passo a passo de como você migraria a solução para a Estrutura do SharePoint. Primeiro, você migrará a solução para o SharePoint Framework com o menor número possível de mudanças no código original. Mais tarde, você transformará o código da solução em TypeScript para se beneficiar de seus recursos de segurança do tipo tempo de desenvolvimento.

Observação

O código-fonte do projeto nas diferentes etapas da migração está disponível em Tutorial: Migrar a solução jQuery e DataTables compiladas usando a web part do Editor de Script para a Estrutura do SharePoint.

Criar um novo projeto da Estrutura do SharePoint

  1. Comece criando uma nova pasta para o projeto:

    md datatables-itrequests

  2. Navegue até a pasta do projeto:

    cd datatables-itrequests

  3. Na pasta do projeto, execute o gerador Yeoman da Estrutura do SharePoint para estruturar um novo projeto da Estrutura do SharePoint:

    yo @microsoft/sharepoint

  4. Quando solicitado, insira os seguintes valores (selecione a opção padrão para todos os avisos omitidos abaixo):

    • Qual é o seu nome de solução?: datatables-itrequests
    • Que tipo de componente para o cliente você deseja criar?: Web Part
    • Qual é o nome da sua Web part?: IT requests
    • Qual é a sua descrição da Web Part?: Mostra uma visão geral dos pedidos de suporte de TI
    • Qual é a estrutura que você gostaria de usar?: Nenhuma estrutura JavaScript

  5. Abra a pasta do projeto no seu editor de código. Nesse tutorial, você usará o Visual Studio Code.

Carregar bibliotecas JavaScript

Semelhante à solução original criada usando a Web Part do Editor de Scripts, primeiro você precisa carregar as bibliotecas JavaScript necessárias pela solução. Em Estrutura do SharePoint isso geralmente consiste em duas etapas: especificar a URL da qual a biblioteca deve ser carregada e fazer referência à biblioteca no código.

  1. Especifique as URLs das quais as bibliotecas devem ser carregadas. No editor de código, abra o arquivo ./config/config.json, e altere a seção externals para:

    {
  // ..
  "externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-1.12.4.min.js",
      "globalName": "jQuery"
    },
    "datatables.net": {
      "path": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
      "globalName": "jQuery",
      "globalDependencies": [
        "jquery"
      ]
    },
    "moment": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"
  },
  // ..
}

    Isso serve dois propósitos:

    1. Quando a cadeia de ferramentas de construção do SharePoint Framework criar o pacote para a web part, ela ignorará quaisquer instruções import ou require para estes três pacotes e não incluirá sua fonte no pacote. Sem elas, o webpack (a ferramenta usada para criar o pacote) importaria essas bibliotecas JavaScript no pacote de componentes SPFx resultante.
    2. A cadeia de ferramentas de construção do SharePoint Framework adicionará estes três pacotes como dependências no manifesto do componente. Isso informa ao carregador de módulos do SharePoint Framework para garantir que essas bibliotecas tenham sido carregadas na página antes de carregar o pacote do componente.

    Observação

    Para obter mais informações sobre referências a bibliotecas externas em projetos SharePoint Framework, veja Adicionar uma biblioteca externa à sua web part do lado do cliente SharePoint.

  2. Abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e, depois da última import instrução, adicione:

    import 'jquery';
import 'datatables.net';
import 'moment';

Definir a tabela de dados

Como na solução original, a próxima etapa é definir a estrutura da tabela usada para exibir os dados.

No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e altere o método render() para:

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;
  }
  // ...
}

Registrar o plug-in Moment.js para DataTables

A próxima etapa é definir o plug-in Moment.js para DataTables para que as datas na tabela possam ser formatadas.

  1. Na pasta ./src/webparts/itRequests, crie um novo arquivo denominado moment-plugin.js e cole o seguinte código:

    // UMD
(
  function (factory) {
    "use strict";

    if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery'], function ($) {
        return factory($, window, document);
      });
    } else if (typeof exports === 'object') {
      // CommonJS
      module.exports = function (root, $) {
        if (!root) {
          root = window;
        }

        if (!$) {
          $ = typeof window !== 'undefined'
            ? require('jquery')
            : require('jquery')(root);
        }

        return factory($, root, root.document);
      };
    } else {
      // Browser
      factory(jQuery, window, document);
    }
  }

  (function ($, window, document) {
    $.fn.dataTable.render.moment = function (from, to, locale) {
      // Argument shifting
      if (arguments.length === 1) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
      } else if (arguments.length === 2) {
        locale = 'en';
      }

      return function (d, type, row) {
        var moment = require('moment');
        var m = moment(d, from, locale, true);

        // Order and type get a number value from Moment, everything else
        // sees the rendered value
        return m.format(type === 'sort' || type === 'type' ? 'x' : to);
      };
    };
  })
);

  2. Para a web part carregar o plug-in, ele deve fazer referência ao arquivo moment-plugin.js recém-criado. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e, depois da última instrução import, adicione:

    import './moment-plugin';

Iniciar DataTables e carregar dados

A última etapa é incluir o código que inicia a tabela de dados e carrega os dados do SharePoint.

  1. Na pasta ./src/webparts/itRequests, crie um novo arquivo denominado script.js e cole o seguinte código:

    $(document).ready(function () {
  $('#requests').DataTable({
    'ajax': {
      'url': "../../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
      'headers': { 'Accept': 'application/json;odata=nometadata' },
      'dataSrc': function (data) {
        return data.value.map(function (item) {
          return [
            item.ID,
            item.BusinessUnit,
            item.Category,
            item.Status,
            new Date(item.DueDate),
            item.AssignedTo.Title
          ];
        });
      }
    },
    columnDefs: [{
      targets: 4,
      render: $.fn.dataTable.render.moment('YYYY/MM/DD')
    }]
  });
});

Observação

Certifique-se de usar o nome interno (ou nome estático) das colunas nos parâmetros $select e $expend.

  1. Para fazer referência a esse arquivo na web part, no editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e adicione require('./script'); ao fim do método render(). O método render() deve ser parecido com o seguinte:

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table id="requests" class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

    require('./script');
  }
  // ...
}

  2. Para verificar se a web part está funcionando conforme o esperado, execute na linha de comando:

    gulp serve --nobrowser

Como a web part carrega seus dados do SharePoint, você deve testá-la usando o Workbench hospedado da Estrutura do SharePoint. Navegue até https://{your-tenant-name}.sharepoint.com/_layouts/workbench.aspx e adicione a web part à tela. Agora você deve ver os pedidos de TI exibidos usando o plug-in DataTables jQuery.

Solicitações de TI mostradas em uma web part do lado do cliente da Estrutura do SharePoint

Adicionar suporte para configuração da web part por meio de propriedades da web part

Nas etapas anteriores, você migrou as soluções de solicitações de TI da web part do Editor de Scripts para a Estrutura do SharePoint. Embora a solução já funcione conforme o esperado, ela não usa nenhum dos benefícios da Estrutura do SharePoint. O nome da lista da qual as solicitações de TI são carregadas está incluído no código, e o próprio código é JavaScript simples, o que é mais difícil de refatorar do que o TypeScript.

As etapas a seguir ilustram como estender a solução existente para permitir que os usuários especifiquem o nome da lista para carregar os dados. Posteriormente, você transforma o código em TypeScript para se beneficiar de seus principais recursos de segurança.

Definir a propriedade da web part para armazenar o nome da lista

  1. Defina uma propriedade de web part para armazenar o nome da lista da qual as solicitações da TI devem ser carregadas. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.manifest.json e renomeie a propriedade padrão description para listName e limpe seu valor.

    Propriedade listName no manifesto da web part destacado no Visual Studio Code

  2. Atualize a interface de propriedades da web part para refletir as alterações no manifesto. No editor de código, abra o arquivo ./src/webparts/itRequests/IItRequestsWebPartProps.ts e altere seu conteúdo para:

    export interface IItRequestsWebPartProps {
  listName: string;
}

  3. Atualizar as etiquetas do display para a propriedade listName. Abra o arquivo ./src/webparts/itRequests/loc/mystrings.d.ts e altere seu conteúdo para:

    declare interface IItRequestsStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  ListNameFieldLabel: string;
}

declare module 'itRequestsStrings' {
  const strings: IItRequestsStrings;
  export = strings;
}

  4. Abra o arquivo ./src/webparts/itRequests/loc/pt-br.js e altere seu conteúdo para:

    define([], function() {
  return {
    "PropertyPaneDescription": "IT Requests settings",
    "BasicGroupName": "Data",
    "ListNameFieldLabel": "List name"
  }
});

  5. Atualize a web part para usar a propriedade recém-definida. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e altere o método getPropertyPaneConfiguration() para:

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
// ...
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [{
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [{
          groupName: strings.BasicGroupName,
          groupFields: [
            PropertyPaneTextField('listName', {
              label: strings.ListNameFieldLabel
            })
          ]
        }]
      }]
    };
  }

  protected get disableReactivePropertyChanges(): boolean {
    return true;
  }
}

Para impedir que a web part recarregue conforme os usuários digitem o nome da lista, você também configurou a web part para usar o painel de propriedades não reativo adicionando o método disableReactivePropertyChanges() e definindo seu retorno de valor para true.

Usar o nome configurado da lista da qual carregar dados

Inicialmente, o nome da lista da qual os dados devem ser carregados foi incorporado na consulta REST. Agora que os usuários podem configurar esse nome, o valor configurado deve ser injetado na consulta REST antes de carregar os dados. A maneira mais fácil de fazer isso é movendo o conteúdo do arquivo script.js para o arquivo principal da web part.

  1. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e altere o método render() para:

    var $: any = (window as any).$;

export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

    $(document).ready(() => {
      $('table', this.domElement).DataTable({
        'ajax': {
          'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          'dataSrc': function (data) {
            return data.value.map(function (item) {
              return [
                item.ID,
                item.BusinessUnit,
                item.Category,
                item.Status,
                new Date(item.DueDate),
                item.AssignedTo.Title
              ];
            });
          }
        },
        columnDefs: [{
          targets: 4,
          render: $.fn.dataTable.render.moment('YYYY/MM/DD')
        }]
      });
    });
  }

  // ...
}

  2. Em vez de fazer referência ao código do arquivo script.js, todos os conteúdos são parte do método render da web part. Na consulta REST, agora você pode substituir o nome fixo da lista pelo valor da propriedade listName que contém o nome da lista como configurado pelo usuário. Antes de usar o valor, a função escapedo lodash está sendo usada para desativar a injeção de script.

    Neste ponto, a maior parte do código ainda está escrito usando JavaScript simples. Para evitar problemas de compilação com a variável jQuery $, você deve defini-la como tipo any antes da definição da classe. Posteriormente, ao transformar o código para TypeScript, você o substitui por uma definição de tipo apropriada.

    Como você moveu o conteúdo do arquivo script.js para o arquivo principal da web part, o script.js não é mais necessário, e você pode excluí-lo do projeto.

  3. Para verificar se a web part está funcionando conforme o esperado, execute o seguinte na linha de comando:

    gulp serve --nobrowser

  4. Acesse o Workbench hospedado e adicione a web part à tela. Abra o painel de propriedades da web part, especifique o nome da lista com solicitações de TI e selecione o botão Aplicar para confirmar as alterações.

    Agora você deve ver as solicitações de TI exibidas na web part.

    Solicitações de TI carregadas a partir da lista configurada e exibidas em uma web part do lado do cliente da Estrutura do SharePoint

Transformar o código JavaScript simples em TypeScript

Usar o TypeScript no lugar do JavaScript simples oferece uma série de benefícios. Não só o TypeScript é mais fácil de manter e refatorar, como também permite capturar erros mais cedo. As etapas a seguir descrevem como você transformaria o código JavaScript original em TypeScript.

Adicionar definições de tipo para bibliotecas usadas

Para funcionar corretamente, TypeScript requer definições de tipo para as diferentes bibliotecas usadas no projeto. As definições de tipo geralmente são distribuídas como pacotes npm no @types namespace.

  1. Instale definições de tipo para jQuery e DataTables executando na linha de comando a seguir:

    npm install @types/jquery@1.10.34 @types/datatables.net@1.10.15 --save-dev --save-exact

    Dica

    Neste exemplo, estamos especificando a versão exata do pacote NPM que queremos instalar. Isso garantirá que a NPM instale um pacote de declaração do tipo que corresponda à versão do jQuery e à biblioteca de dados que estamos usando em nosso projeto.

    O argumento --save-dev diz ao NPM para salvar as referências a estes dois pacotes na coleção devDependencies do arquivo package.json. As declarações TypeScript só são necessárias no desenvolvimento, e é por isso que não as queremos na coleção dependencies.

    O argumento --save-exact diz ao NPM para adicionar referências à versão específica no arquivo package.json e não adicionar a notação para permitir atualizações automáticas para uma versão mais recente.

    As definições de tipo para Moment.js são distribuídas em conjunto com o pacote de Moment.js. Mesmo que você esteja carregando Moment.js a partir de uma URL para usar suas tipificações, ainda precisa instalar o pacote de Moment.js no projeto.

  2. Para instalar o pacote de Moment.js, execute o seguinte na linha de comando:

    npm install moment@2.27.0 --save-exact

Atualizar referências do pacote

Para usar tipos das definições de tipo instaladas, é preciso mudar a forma como se faz referência às bibliotecas.

  1. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts e altere a instrução import 'jquery'; para:

    import * as $ from 'jquery';

  2. Após definir $ como jQuery, você pode remover a definição do local $ adicionada anteriormente:

    var $: any = (window as any).$;

Atualizar arquivos principais da web part para TypeScript

Agora que você já inseriu definições para todas as bibliotecas instaladas no projeto, você pode começar a transformar o código JavaScript simples em TypeScript.

  1. Defina uma interface para as informações de solicitação de TI que você recupera da lista do SharePoint. No editor de código, abra o arquivo ./src/webparts/itRequests/ItRequestsWebPart.ts, e logo acima da classe da web part, adicione o seguinte trecho de código:

    interface IRequestItem {
  ID: number;
  BusinessUnit: string;
  Category: string;
  Status: string;
  DueDate: string;
  AssignedTo: { Title: string; };
}

  2. Em seguida, na classe web part, altere o método render() para:

    export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
      <table class="display ${styles.itRequests}" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Business unit</th>
            <th>Category</th>
            <th>Status</th>
            <th>Due date</th>
            <th>Assigned to</th>
          </tr>
        </thead>
      </table>`;

      $('table', this.domElement).DataTable({
        'ajax': {
          'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          'dataSrc': (data: { value: IRequestItem[] }): any[][] => {
            return data.value.map((item: IRequestItem): any[] => {
              return [
                item.ID,
                item.BusinessUnit,
                item.Category,
                item.Status,
                new Date(item.DueDate),
                item.AssignedTo.Title
              ];
            });
          }
        },
        columnDefs: [{
          targets: 4,
          render: ($.fn.dataTable.render as any).moment('YYYY/MM/DD')
        }]
      });
  }

  // ...
}

  3. Observe como a solicitação AJAX, para recuperar os dados da lista do SharePoint, agora é digitada e ajuda você a garantir que está se referindo às propriedades corretas ao passá-las para uma matriz para DataTables. A estrutura de dados usada por DataTables para representar uma linha na tabela é uma matriz de tipos mistos, então, por simplicidade, foi definida como any[]. Usar o tipo any neste contexto não é ruim, porque os dados retornados dentro da propriedade dataSrc são usados internamente pelas DataTables.

    Enquanto está atualizando o método render(), você também adiciona mais duas alterações. Primeiro, você removeu o atributo id da tabela. Isso permite que você coloque várias instâncias da mesma web part na página. Além disso, você removeu a referência para a função $(document).ready(), que não é necessária porque o DOM do elemento onde a tabela de dados é renderizada é definido antes do código de iniciação DataTables.

Atualizar o plug-in Moment.js DataTables para TypeScript

A última parte da solução que precisa ser transformada em TypeScript é o plug-in Moment.js DataTables.

  1. Renomeie o arquivo ./src/webparts/itRequests/moment-plugin.js para ./src/webparts/itRequests/moment-plugin.ts para que ele seja processado pelo compilador TypeScript.

  2. Abra o arquivo moment-plugin.ts no editor de código e substitua seu conteúdo por:

    import * as $ from 'jquery';
import * as moment from 'moment';

/* tslint:disable:no-function-expression */
($.fn.dataTable.render as any).moment = function (from: string, to: string, locale: string): (d: any, type: string, row: any) => string {
/* tslint:enable */
  // Argument shifting
  if (arguments.length === 1) {
    locale = 'en';
    to = from;
    from = 'YYYY-MM-DD';
  } else if (arguments.length === 2) {
    locale = 'en';
  }

  return (d: any, type: string, row: any): string => {
    let m: moment.Moment = moment(d, from, locale, true);

    // Order and type get a number value from Moment, everything else
    // sees the rendered value
    return m.format(type === 'sort' || type === 'type' ? 'x' : to);
  };
};

  3. Você começa com o carregamento de referências para jQuery e Moment.js para permitir que o TypeScript saiba a que se referem as variáveis. Em seguida, você define a função de plug-in. Geralmente no TypeScript você usa a notação de seta para funções (=>). Neste caso, no entanto, como você precisa ter acesso à propriedade arguments, você tem que usar a definição regular da função. Para evitar que o tslint relate um aviso sobre não usar a notação de seta, você pode desativar explicitamente a regra no-function-expression relativa à definição da função.

  4. Para verificar se tudo está funcionando conforme esperado, na linha de comando, execute:

    gulp serve --nobrowser

  5. Acesse o Workbench hospedado e adicione a web part à tela. Embora nada tenha mudado visualmente, a nova base de código usa TypeScript e suas definições de tipo para ajudar você a manter a solução.

  • Last updated on