Блог

Главная - Вопросы по программированию - Объект ‘File’ не имеет свойства ‘path’. (TypeScript)

Объект ‘File’ не имеет свойства ‘path’. (TypeScript)

#javascript #html #typescript

#javascript #HTML #машинописный текст

Вопрос:

Я передаю File объект, который приходит из браузера (путем удаления), в функцию, подобную этой:

 // .... logic here...
accept(file)

public static accept(file: File) {
   console.log(file)
   /* prints:
      => lastModified: 1555453309243
         lastModifiedDate: Wed Apr 17 2019 01:21:49 GMT 0100 (GMT 01:00) {}
         name: "test.txt"
         path: "test.txt" --> as you can see there is a path variable in here.
         size: 16
         type: "text/plain"
         webkitRelativePath: ""
         __proto__: File
   */

   console.log(file.name) // => prints 'test.txt'
   console.log(file.size) // => prints '16'
   console.log(file.path) // => !! error given. path does not exists in File object. Also IDE does not show this parameter in IDE autocomplete list.
}

Ошибка дана:

 Property 'path' does not exist on type 'File'.ts(2339)

File Почему нет path параметра? Как я могу убедиться, что path существует? Есть ли какой- нибудь другой тип для File ? Это удаление HTML5.

Если я сделаю это:

 public static accept(file: any) {
   alert(file.path);
}

Он показывает относительный путь:

путь

Комментарии:

1. Я могу получить к нему доступ. Это проект перетаскивания HTML5. Я обновил вопрос. Взгляните на это. Я просто не могу использовать статическую типизацию. Как я могу обмануть IDE и webpack, что path в нем есть a??

2. Если недвижимость есть , вы всегда можете получить к ней доступ (file as any).path .

3. @mbojko Да, это сделало свое дело. Спасибо! Вы можете написать это как ответ.

4. В идеале вы должны создать свой собственный интерфейс interface MyFile extends File { path: string; /* etc */ } и использовать его. Однако где задокументировано, что File у path него есть свойство? Вы должны знать, поддерживаете ли вы только какую-то конкретную или нестандартную среду.

5. Ах, значит, React-Dropzone добавляет это свойство. Я бы подумал, что это должно быть частью типизации TypeScript для React-Dropzone… возможно DropZoneFile , или DropZoneFolder , который расширяется File с помощью необязательного path свойства? Поскольку они не сделали этого в библиотеке, я думаю, вам нужно сделать это для вашего собственного кода.

Ответ №1:

Для тех, кто еще использует react-dropzone , кажется, что они получают набор текста FileWithPath из этой библиотеки file-selector

Смотрите строку 3 здесь: https://github.com/react-dropzone/react-dropzone/blob/master/typings/react-dropzone.d.ts

Вы можете просто импортировать это FileWithPath из react-dropzone любого места, где вам это нужно.

Ответ №2:

Ответ Китсона верен. Я просто хотел добавить точный способ реализации этого ответа для тех, кто новичок в Typescript. Если вы только начинаете с базового примера в документах Dropzone, вы можете просто добавить FileWithPath к своему импорту react-dropzone и определить тип каждого файла, поступающего с карты. Обратите внимание на два добавления FileWithPath здесь:

 import { useDropzone, FileWithPath } from "react-dropzone";
 
function Basic(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
 
  const files = acceptedFiles.map((file: FileWithPath) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
...

Ответ №3:

 interface FileWithPath extends File {
  path: string
}

const path = (file as FileWithPath).path
Метки: