Is it possible to link typescript interfaces to JSON files?

[sandy081]

From @Sequoia on June 16, 2016 20:3

I know it's possible to do this with json schemas but is it possible to do this with a typescript interface?

Copied from original issue: Microsoft/vscode#7792

[DanielRosenwasser]

Hey @sandy081, can you elaborate on the specific request here?

[sandy081]

@Sequoia is the original author of this issue.. Can you please help/reply to the above comment.

Thanks.

[DanielRosenwasser]

(Sorry, I might've just hit @s and pressed tab assuming it would auto-complete to @Sequoia)

[Sequoia]

Current behavior

{
   "$schema": "http://json.schemastore.org/coffeelint",
   "line_endings": "unix"
}

Requested

{
   "$schema": "./typings/foo/bar.d.ts#Bar"
   "version" : 0.1.2,
   "description": "It's a thing!!"
}

bar.d.ts:

export interface Bar {
  /** Version is the version number */
  version: number;

  description?: string;
}

Currently you can link an interface to an object in JS via

/** @type {Bar} */
var bar = require('bar.json');

And get type hinting. I'm wondering if you can link an interface to an object serialized in a json file & get that same hinting.

[RyanCavanaugh]

I still can't tell what you're describing.

[jlouros]

Actually I was looking for something similar. I will try to elaborate the idea using a practical example. For any given project, for a particular JSON structure that is known and expected, JSON schema or an TypeScript interface can used used to ensure correctness. If I'm editing a JSON data file locally, a JSON schema can be associated using "$schema" property. On the other hand, if I'm dealing with the JSON representation in code, I must use a TypeScript interface. In this case JSON schema and TypeScript are maintained separately. Any modification to the defined contract require a change in two places.

JSON data

{
  "logLevel": "LOG"
}

JSON schema

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "definitions": {},
    "id": "http://example.com/example.json",
    "properties": {
        "logLevel": {
            "default": "OFF",
            "enum": [
                "OFF",
                "LOG",
                "DEBUG",
                "INFO",
                "WARN",
                "ERROR"
            ],
            "id": "/properties/logLevel",
            "type": "string"
        }
    },
    "required": [
        "logLevel"
    ],
    "type": "object"
}

TypeScript interface

export interface RootObject {
  logLevel:  'OFF' | 'LOG' | 'DEBUG' | 'INFO' | 'WARN' | 'ERROR'
}

Is there a way to sync JSON schema and TypeScript interface? Or generate JSON schema from TypeScript interface and be able to use it directly in JSON (using '$schema') Or the other way around, generate a TypeScript interface from JSON schema.

[fearthecowboy]

I was thinking about something similar -- being able to substitute typescript .d.ts files instead of using JSON-Schema.

.d.ts files are a million times more readable than JSON-Schema, and there's really only a couple things that you can do in JSON-Schema that aren't covered in d.ts files.

[kitsonk]

I have manually taken schemas and output them to interfaces using json-schema-to-typescript though there are both examples of how to use it in browser as well as a server, which of course you could then do on the fly.

[fearthecowboy]

For our scenario, JSON-Schema is rapidly becoming a complete failure. The Azure Resource Schemas have well over a hundred types (and if I actually include everything, hundreds )... which grinds VS's json editor into the ground. (see https://github.com/azure/azure-resource-manager-schemas/blob/master/schemas/2015-01-01/deploymentTemplate.json#L40 )

Worse, because of the way that schema validation and 'intellisense' works, it gets pretty damn confused as what permissible values are in some cases.

And, to top that all off, upcoming work could explode that by an order of magnitude.

Which is why I'm looking at seeing if I can accomplish a similar feat using .d.ts files.

[Sequoia]

@ryancavanaugh I want to write a tsd and link to it via $schema from a json file like I would link to a json schema.

To think of it another way, I want to use tsd in a json file just as I can using @type to link a tsd to an object in a javascript file.

[cshaa]

If I get it correctly, this proposal would mean extending TypeScript to support json as an input format and then making the Compiler API provide type information about it, as well as warnings and errors. Then someone could change VS Code and other IDEs to start using TypeScript as a linter/highlighter for JSON, instead of whatever library they used previously.

This would be a really cool feature and I, personally, would love to use it. But it also seems to be quite complicated to implement and it probably wouldn't be worth it, unless there is a great demand from the community…

[kitsonk]

@m93a what you are asking for was delivered in TypeScript 2.9 and closed issue #7071. This is request is different.

[Sequoia]

For historical purposes: This was never a typescript issue and should not have been migrated here. Apologies for not noticing this sooner–it lead to the confusion around what I was asking for.

This was a VSCode feature request, the ability to add type hinting in JSON files by linking them via $schema to typescript definitions.

1. Write a tsd
2. If you have a javascript object in a javascript file, vscode can type-hint for that object
3. (desired): If you have a javascript object serialized in a json file, vscode can type-hint for that object

The behavior is almost the same, just s/in a javascript file/serialized in a json file/