[TypeScript] Interface and Class

Posted 2020-08-13 Answer1215

When to use Interface and when to use Class.

Let‘s see one example:

export interface Lesson {
 courseId: string;
 description: string;
 duration?: string;
 longDescription?: string;
 tags: string | string[];
 url?: string;
 videoUrl: string;
 }

export class Lesson {
  constructor(
              public courseId: string,
              public description: string,
              public duration: string,
              public longDescription: string,
              public tags: string | string[],
              public url: string,
              public videoUrl: string) {
  }
}

We have an Interface ‘Lesson‘ and a Class ‘Lesson‘. At this point, I would love to say, there is no differece between using interface or using Class. Actually I prefer Interface in this case, because its short-hand syntax.

 

We when you want to add more functionalities, you need to using Class instead of Interface.

For example:

export class Lesson {
  constructor(public $key: string,
              public courseId: string,
              public description: string,
              public duration: string,
              public longDescription: string,
              public tags: string | string[],
              public url: string,
              public videoUrl: string) {
  }

  get hasVideoUrl() {
    return !!this.videoUrl;
  }

  get hasMultiTags() {
    if (this.tags instanceof Array) {
      return true;
    } else {
      return false;
    }
  }

  static fromJsonList(array): Lesson[] {
    return array.map(Lesson.fromJson);
  }

  static fromJson({
    $key,
    courseId,
    description,
    duration,
    longDescription,
    tags,
    url,
    videoUrl
  }): Lesson {
    return new Lesson($key,
      courseId,
      description,
      duration,
      longDescription,
      tags,
      url,
      videoUrl)
  }
}

We add two getter and setter, hasMuliTags and hasVideoUrl. Basiclly we add two more props into the class dynamically based on other props.

 

‘fromJson‘ & ‘formJsonList‘ are two static function, which helps to stucture our Lesson instance, in Angualr2 we can use like this:

// Service

@Injectable()
export class CourseService {
  lessons$: FirebaseListObservable<Lesson[]>;

  constructor(private rt: RealtimeService) {
    this.lessons$ = rt.getLessonObs();
  }

  getLessons() {
    return this.lessons$
      .map(Lesson.fromJsonList);
  }
}