How to reduce javascript object to only contain properties from interface

by

It is not possible to do this. The reason being interface is a Typescript construct and the transpiled JS code is empty

//this code transpiles to empty!
interface MyInterface {
  test: string;
}

Thus at runtime there is nothing to ‘work with’ – no properties exist to interrogate.

The answer by @jamesmoey explains a workaround to achieve the desired outcome.
A similar solution I use is simply to define the ‘interface’ as a class – 

class MyInterface {
  test: string = undefined;
}

Then you can use lodash to pick the properties from the ‘interface’ to inject into you object:

import _ from 'lodash';  //npm i lodash

const before = { test: "hello", newTest: "world"};
let reduced = new MyInterface();
_.assign(reduced , _.pick(before, _.keys(reduced)));
console.log('reduced', reduced)//contains only 'test' property

see JSFiddle

This is a pragmatic solution that has served me well without getting bogged down on semantics about whether it actually is an interface and/or naming conventions (e.g. IMyInterface or MyInterface) and allows you to mock and unit test

More Related Contents:

  1. How To bind data using TypeScript Controller & Angular Js
  2. Error: Cannot invoke an expression whose type lacks a call signature
  3. simple form input request in angular
  4. Passing data between controllers in Angular JS?
  5. AngularJS : Difference between the $observe and $watch methods
  6. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  7. How to convert an array of objects to object with key value pairs
  8. Difference between the ‘controller’, ‘link’ and ‘compile’ functions when defining a directive
  9. How to make a directive update ng-model on jquery on event?
  10. In Angular, how do you determine the active route?
  11. How do I mock a service that returns promise in AngularJS Jasmine unit test?
  12. Typescript – Extending Error class
  13. using setInterval in angularjs factory
  14. Adding a custom header to HTTP request using angular.js
  15. Angular.module minification bug
  16. Showing alert in angularjs when user leaves a page
  17. How to pass parameters to a modal?
  18. TypeError: Cannot read property ‘then’ of undefined
  19. Error: ‘types’ can only be used in a .ts file – Visual Studio Code using @ts-check
  20. Call a function on click event in Angular 2
  21. How to make TypeScript output valid ES6 module import statements?
  22. Angular2 too many file requests on load
  23. Should we use useCallback in every function handler in React Functional Components
  24. AngularJS – placeholder for empty result from filter
  25. Dynamically assign ng-model
  26. angularjs custom filter to check for values inside a data array
  27. ng-mouseover and leave to toggle item using mouse in angularjs
  28. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  29. AngularJS application file structure
  30. AngularJS event on window innerWidth size change

Leave a Comment