Angular / Typescript - Cast imported '*.json' file impossible due to module definition

Question

In my Angular / Typescript2.2 project, for development purposes, I import *.json files from time to time as test data in my components. To allow importing a .json file as a module, I added the following to typings.d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

Of course I can assign the content of these files to a field with type any, but I want to assign them to a field with type of one of my interfaces instead. Make note that I want to keep the value in the module definition open to all types. I don't want to hard-code it to 1 interface.

import {ProcessMilestone} from '../../../domain';
import * as milestones from './test.json';

export class MilestoneSearchComponent implements OnInit {
  data: ProcessMilestone[];

  ngOnInit(): void {
      this.data = <ProcessMilestone[]> milestones;
  }
}

This gives me following error:

Type 'typeof '*.json'' cannot be converted to type 'ProcessMilestone[]>'. Property 'includes' is missing in type 'typeof '*.json''.

It's clear than due to the current module definition of '*.json', casting is not possible. Is it possible to tweak this so that this is possible? I have no idea of the possibilities.

Only minimal-effort solutions are viable. If not, I'll instead fetch the data from the back-end.

jcalz · Accepted Answer · 2017-09-04 12:42:54Z

11

Does whatever you're doing work at runtime? If so, you can always force TypeScript to allow a type assertion by passing through any:

this.data = <ProcessMilestone[]> <any> milestones;

That's as minimal effort as I can think of. Of course if it turns out that your JSON file doesn't contain an object of the right type, it will blow up at runtime with no warning from TypeScript, which has been forced into silence by the type assertion.

answered Sep 4, 2017 at 12:42

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nico Van Belle Over a year ago

Works like a charm and very minimal indeed! Never tried a double type assertion. Thanks!

Collectives™ on Stack Overflow

Angular / Typescript - Cast imported '*.json' file impossible due to module definition

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related