Question

I m using Angular and Typescript.I have an object that contains many properties: This object values are controlled by a form. The form contains many fields such as a form upload a text input etc... Since, I have many form uploads. I wanted to make a function that would run on each and every form upload field else I d have to write a function for each and every file upload. Basically, the function has this signature function fileUpload (file : File,field : string) assuming that the file is the File I m trying to pass to the object and field is the field of the object. I was trying to implement that function and TypeScript started giving some errors regarding the object and the field.

这是安热部分的法典。文档上载功能的定义如下:

import { Component } from  @angular/core ;
import { ChatWidgetSettings } from  ./models/chat-widget-settings ;
@Component({
  selector:  app-widget-chat ,
  templateUrl:  ./widget-chat.component.html ,
  styleUrls: [ ./widget-chat.component.scss ]
})
export class WidgetChatComponent {
 settings : ChatWidgetSettings = {
    botActivation : false,
    chatButtonColor :  #34C4FC ,
    closeIconColor :  #FFFFFF ,
    launcherImage : null,
    profileClientAvatar:null,
    profileAvatar:null,
    titleAvatar:null,
    title :  TestA ,
    subtitle :  TestB ,
    titleFontColor :  #FFFFFF ,
    subtitleFontColor :  #FFFFFF ,
    titleBoxBackgroundColor :  #00687B ,
    chatBoxBackgroundColor :  #FFFFFF ,
    userMessageColor : "#00ACC7",
    botMessageColor :  #F4F7F9 ,
    userMessageFontColor :  #FFFFFF ,
    responseMessageFontColor :  #000000 ,
    inputBoxBackgroundColor :  #00ACC7 ,
    inputBoxFontColor :  #000000 ,
    inputBoxPlaceholderFontColor :  #B4B4B4 ,
    inputBoxSendIconFontColor :  #4B4B4B ,
    botMessageBorderColor:"#00ACC7",
    launcherImageURL:  ,
    titleAvatarURL:  ,
    profileClientAvatarURL:  ,
    profileAvatarURL:  ,
    showAvatar:false,
    
  };
  uploadFile(item : {
    field : string,
    file : File,
  }){
    // null fields in the object settings are the ones that would get the file object.
    //Error is generated on this level : element implicitly has an any 
    //type because expression of type string can t be used to index type
    this.settings[item.field] = file;
  }

}

Answer 1

当我们用自己的名称建立一个物体场时,它就会破坏这种系统。我们需要做许多复杂的事情,以确保目标领域在试图分配价值之前是正确的。

更好的办法是通过订立合同来利用类型系统。如果每个物体想要使用<代码>上载荷File功能,我们可以实现这一点。

type FileViewModel = {
  file: File;
};

type ChatWidgetSettings = {
    name: string;
};

//Intersect ChatWidgetSettings with FileViewModel so it has file property.
type ChatWidgetSettingsViewModel = ChatWidgetSettings & FileViewModel;

function uploadFile<T extends FileViewModel>(setting: T, fileToUpload: File) {
    setting.file = fileToUpload;
}

const newFile = new File([],  pdf );

const settings: ChatWidgetSettingsViewModel = {
    name:  Widget ,
    file: newFile
};

// call the function
uploadFile(settings, newFile);

Most people will complain that it is a lot of work to have each of the objects joins the contract. It would be easier and faster to access the field using its name and set the value.

I agree that it s a lot of work upfront, but the long-term benefit of type system will always outweigh the drawback of the fews extra keystrokes.

友情链接