Building Your First App - Photo type question

tutorials
1

Hi! This error seems really obvious so I am assuming I’m doing something wrong, but the tutorial seems to have us import a Photo type from @capacitor/camera, as well as declaring a Photo interface. When compiling the code as copied, it complains about this collision.

import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Storage } from '@capacitor/storage';

@Injectable({
  providedIn: 'root'
})
export class PhotoService {
  public photos: Photo[] = [];

  constructor() { }

  public async addNewToGallery() {
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });

    this.photos.unshift({
      filepath: "soon...",
      webviewPath: capturedPhoto.webPath
    });
  }
}

export interface Photo {
  filepath: string;
  webviewPath: string;
}

As mentioned, the error thrown is

[ng] Error: src/app/services/photo.service.ts:22:7 - error TS2345: Argument of type '{ filepath: string; webviewPath: string; }' is not assignable to parameter of type 'Photo'.
[ng]   Object literal may only specify known properties, and 'filepath' does not exist in type 'Photo'.

Wondering if I’m missing something, or if this is an error in the tutorial and I should simply refrain from importing the Photo type / rename the interface type something different.

1 Like
2

Hi @shaun-meyer-25 welcome!
You are right! Doesn’t have this fields in the Photo interface.
I think you might check the Capacitor Camera docs and correct your code.
There are the all the fields for the interface, so easy.
Have a goo job!

3

You can rename imports using import {Foo as Bar} syntax to avoid collisions like this.

4

I assume it would be fair to update the tutorial then…

5

I would just rename your interface from Photo to IPhoto or Image

6

I’m doing the tutorial as I write this, the problem is at 2-taking-photos.
If you import Photo you get access to the Photo interface from @capacitor/camera

The final version of photo.service.ts does call the Photo interface as a type check in functions not yet created,
private async savePicture(cameraPhoto: Photo){..}
and
private async readAsBase64(cameraPhoto: Photo) {..}
The argument cameraPhoto implements the properties of Photo. The interface that the tutorial creates is instead named UserPhoto in the final version and has different properties.

The import should happen later in the tutorial, and the interface Photo should be UserPhoto.

7

Suitable code to build your First App.

8

Hello !
I’m running on the same issue.
What is the fix to avoid the error ?
Why noone from ionic has updated the tutorial ?

Regards