KanbanBoardWebPart05.ts

// ...
import pnp from "sp-pnp-js";
// ...
export default class KanbanBoardWebPart extends BaseClientSideWebPart<IKanbanBoardWebPartProps> {
  // ...
  public onInit(): Promise<any> {
    return super.onInit().then(_ => {
      // Configure PnP Js for working seamlessly with SPFx
      pnp.setup({
        spfxContext: this.context
      });
    })
      // Load the available lists in the current site
      .then(() => this._loadAvailableLists())
      .then((lists: IListInfo[]) => this.availableLists = lists);
  }

  private _loadAvailableLists(): Promise<IListInfo[]> {
       return pnp.sp.web.lists.expand("Fields").select("Id", "Title", "Fields/Title", "Fields/InternalName", "Fields/TypeAsString").get();
  }

  private _loadTasks(): Promise<ITask[]> {
    return pnp.sp.web.lists.getById(this.properties.tasksListId).items.select("Id", "Title", this.properties.statusFieldName).get()
      .then((results: ITask[]) => results && results.map(t => ({
        Id: t.Id,
        Title: t.Title,
        Status: t[this.properties.statusFieldName]
      })));
  }

  private _loadStatuses(): Promise<string[]> {
    console.log("Load statuses...");
    return pnp.sp.web.lists.getById(this.properties.tasksListId).fields.getByInternalNameOrTitle(this.properties.statusFieldName).get()
      .then((fieldInfo: IFieldInfo) => fieldInfo.Choices || []);
  }

  public render(): void {
    // Only if properly configured
    if (this.properties.statusFieldName && this.properties.tasksListId) {
      // Load the data
      this._loadStatuses()
        .then((statuses: string[]) => this.statuses = statuses)
        .then(() => this._loadTasks())
        .then((tasks: ITask[]) => this.tasks = tasks)
        // And then render
        .then(() => this._renderBoard())
        .catch(error => {
          console.log(error);
          console.log("An error occured while loading data...");
        });
    } else {
      this.domElement.innerHTML = "<div>Please configure the WebPart</div>";
    }
  }
 // ...
  private changeTaskStatus(taskId: number, newStatus: string) {
    // Set the value for the configured "status" field
    let fieldsToUpdate = {};
    fieldsToUpdate[this.properties.statusFieldName] = newStatus;

    // Update the property on the list item
    pnp.sp.web.lists.getById(this.properties.tasksListId).items.getById(taskId).update(fieldsToUpdate);
  }
// ...
}