Ошибка подключения приложения activjs с машинописью к SharePoint онлайн для локальной разработки

Question

Я новичок в TypeScript и responsejs.

Когда я хочу подключить React-Typescript к SharePoint через Интернет для локальной разработки, я всегда получаю следующую ошибку Ошибка типа: Свойство «listInformation» не существует для типа «Readonly <{}>».TS2339

Свойство listInformation не должно существовать, но оно существует.Следующий код это то, что у меня уже есть.Когда я пытаюсь сделать это в приложении React без TypeScript, нет проблем с запуском этого кода.

import React, { Component, Props } from 'react';
import { initializeIcons } from '@uifabric/icons';
import { NavHeader } from './NavHeader';
import { Navigation } from './Navigation';
import { DetailsList, IColumn } from 'office-ui-fabric-react';

initializeIcons();

class Templates extends Component{
  constructor(props: {}) {
    super(props);
    this.state = {
      listInformation:[{
          Title: '',
          DocumentSetDescription: '',
          OData__UIVersionString:'',
          Type_x0020_of_x0020_Template:'',
          Functional_x0020_area:'',
          ContentTypeId:''}
      ]
    };
}  

componentDidMount() {  
  // Custom function to retrieve the list info  
  this.GetListInfo();  
}  

GetListInfo(){  
  var reactHandler = this;  

  var request = new XMLHttpRequest();  
  request.open('GET', "/_api/web/lists/getbytitle('Templates')/items", true);  
  request.setRequestHeader("Accept","application/json");  

  //this callback gets called when the server responds to the ajax call  
  request.onreadystatechange = function(){  
      if (request.readyState === 4 && request.status === 200){  
          var result = JSON.parse(request.responseText);  

          reactHandler.setState({  
            listInformation: result.value  
          });  
      }  
      else if (request.readyState === 4 && request.status !== 200){  
          console.log('Error in retrieving data!');  
      }  
  };  
  request.send();  
} 

  public render() {
   this.state.listInformation.map(function(info,key){
    if(info.ContentTypeId === '0x0120D52000C935C192A6B8E84F80068B394AAEF962'){ 
      let listInfo = [{Name: info.Title , Description: info.DocumentSetDescription, Version: info.OData__UIVersionString, Type_of_template: info.Type_x0020_of_x0020_Template, Functional_area: info.Functional_x0020_area}]
    }
  }) 
    return (
      <div> 
          <div>
              <NavHeader />
          </div>
          <div>
              <Navigation />
          </div>

          <div>
              <h1>TEMPLATES</h1>
              <DetailsList items={listInfo} columns={columns}/>
          </div>
       </div>
    );
  }
}

export default Templates;

Я работаю со следующим сайтом в качестве примера https://www.c -sharpcorner.com / article / retrieve-and-display-sharepoint-list-items-using-rest-api-and-responsejs /

Спасибо за помощь в этом.

Answer 1

Вы должны объявить состояние как интерфейс в машинописи.

export interface MyState{
  listInformation: any[];
}

class Templates extends Component<any, MyState>{
  constructor(props: {}) {
    super(props);
    this.state = {
      listInformation:[{
          Title: '',
          DocumentSetDescription: '',
          OData__UIVersionString:'',
          Type_x0020_of_x0020_Template:'',
          Functional_x0020_area:'',
          ContentTypeId:''}
      ]
    };
}  

Вы также можете создать интерфейс для реквизита, который вам может понадобиться экспортировать - который можно экспортировать вдоль бокового состояния как <MyProps, MyState>,Вам также может потребоваться объявить каждое свойство внутри вашего объекта состояния в интерфейсе.Не совсем уверен.