以编程方式从界面创建打字稿用户定义的类型防护

Question

In my Angular2 project I have created an Interface for GridMetadata :

grid-metadata.ts

export interface GridMetadata {
  activity: string;
  createdAt: object;
  totalReps: number;
  updatedAt: object;
}

Inside my Service I have a public method create which requires on argument which should be an Object with one property activity that has a String value eg { activity: 'Push-Ups' } . You can find this towards the bottom of GridService :

grid.service.ts

import { Injectable } from '@angular/core';

import {
  AngularFireDatabase,
  FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
// import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';
// TODO: Is this the correct order for interfaces?
import { GridMetadata } from './grid-metadata';

@Injectable()
export class GridService {
  private gridMetadata: FirebaseListObservable<any>;

  constructor(
    private afDb: AngularFireDatabase,
    private authService: AuthService
  ) {
    this.init();
  }

  private init(): void {
    this.gridMetadata = this.afDb.list('gridMetadata');
  }

  create(metadata: GridMetadata): Promise<any> {
    function isGridMetadata(obj: any): obj is GridMetadata {
      return typeof obj.activity === 'string' &&
        typeof obj.createdAt === 'object' &&
        typeof obj.totalReps === 'number' &&
        typeof obj.updatedAt === 'object' ?
          true :
          false;
    }

    return new Promise((resolve, reject) => {
      if (this.authService.isAuthenticated === false) {
        return reject(new Error('Can’t create new grid; you’re not auth’d.'));
      }

      let key: string = this.gridMetadata.push(undefined).key;
      let uri: string = [this.authService.currentUserId, key].join('/');

      metadata.createdAt = firebase.database.ServerValue.TIMESTAMP;
      metadata.totalReps = 0;
      metadata.updatedAt = firebase.database.ServerValue.TIMESTAMP;

      if (isGridMetadata(metadata) === false) {
        return reject(new TypeError('`metadata` doesn’t match the signature of the `GridMetadata` interface.'));
      }

      this.gridMetadata.update(uri, metadata)
        .then(() => {
          resolve();
        })
        .catch((error) => {
          reject(new Error(error.message));
        });
    });
  }
}

Question 1

First of all notice that in my create method I've said the required argument metadata should match the Interface GridMetadata — which it doesn't. I'm only passing it an Object { activity: 'Push-Ups' } and notice in the interface that there are three other required properties ( createdAt , totalReps and updatedAt ).

There are no errors at either compile-time or runtime. Why is this?

I have most likely just misunderstood this as I am new to TypeScript.

Question 2

I believe in question 1 there should be an error; this could be fixed easily I am just curious as to why no error is thrown.

My real question is you can see I go on to build the metadata Object to match the signature of the Interface GridMetadata by adding the missing properties ( createdAt , totalReps and updatedAt ).

I then reject the Promise if the Object does not match the Interface.

How can I check that createdAt and updatedAt are not only Objects, but also match the signature { .sv: 'timestamp' } , and is there a better way to do this than the if statement I'm using now?

Question 3

And finally; for convenience is there a way to programatically create a User Defined Type Guard from an Interface?

I would imaging not as the Interface in the eyes of TypeScript is not an object, therefore can't be programatically worked with in a function, for eg extract the properties activity, createdAt, ... and the values string, object, ... and use these to loop through and programatically check against in the guard.

---

While there a three questions here, in reality Q2 is my primary concern as I am sure Q1 has a simple answer and Q3 is just bonus points — I will accept answers to just Q2 and really appreciate your help!

Answer 1

Question 1

The Typescript compiler doesn't complain b/c the compiler isn't looking at your HTML templates.

Question 2

In the end it's all Javascript, so there's no way to verify the "signature" of an object without checking to see if the object has the desired properties. For example, adding to your original logic:

typeof obj.createdAt === 'object' &&
    obj.createdAt.hasOwnProperty('.sv') && 
    typeof obj.createdAt['.sv']  === 'string'

But I might be more inclined to first check for the existence of the properties that are objects (rather than checking their type):

if (!obj.createdAt || !obj.updatedAt) {
    return false;
}
// now check for the child properties
return obj.createdAt.hasOwnProperty('.sv') &&
    typeof obj.createdAt['.sv'] === 'string' &&
    ...

You could obviously structure this differently, but it all boils down to the same sorts of checks.

Question 3

Interfaces in Typescript are only used at compile time. They are never included in the compiled output. So at run time the interfaces do not exist and cannot be accessed programmatically.