DEV Community

Eyas
Eyas

Posted on

Schema-DTS: TypeScript Shims for Schema.org and the Semantic Web

#typescript #javascript #webdev #semanticweb

schema-dts is a new library (and related tools) providing TypeScript definitions for Schema.org vocabulary in JSON-LD format. The typings are exposed as complete sets of discriminated type unions, allowing for easy completions and stricter validation.

Example of Code Completion using schema-dts

Motivation

I noticed while Schema.org schema has had a lot of usage throughout the web, few Schema validation tools were integrated as part of a Developer's toolchain. For example, Google's Structured Data Testing Tool remains a main resource for many in validating the correctness of hand-written Schema.org schema.

Enter TypeScript, and the ease of defining JSON schema using typings. Thanks to the JSON-LD format and the recommendation of Google and other search engines to encode structured data using JSON-LD (rather than microdata and other structured data formats), there's an opportunity to make writing structured data much easier. We can tighten the write-test-debug iteration by including the Schema.org schema we are writing against in our development toolchain.

Usage

To use the typings for your project, simply add the schema-dts NPM package to your project:

npm install schema-dts
Enter fullscreen mode Exit fullscreen mode

Then you can use it by importing "schema-dts".

Examples

Defining Simple Properties 

import {Person} from "schema-dts"; const inventor: Person = { "@type": "Person", "name": "Grace Hopper", "disambiguatingDescription": "American computer scientist", "birthDate": "1906-12-09", "deathDate": "1992-01-01", "awards": [ "Presidential Medal of Freedom", "National Medal of Technology and Innovation", "IEEE Emanuel R. Piore Award", ] };
Enter fullscreen mode Exit fullscreen mode

Using 'Context'

JSON-LD requires a "@context" property to be set on the top-level JSON object, to describe the URIs represeting the types and properties being referenced. schema-dts provides the WithContext<T> type to facilitate this.

import {Organization, Thing, WithContext} from "schema-dts"; export function JsonLd<T extends Thing>(json: T): string { return `<script type="application/ld+json"> ${JSON.stringify(json)} </script>`; } export const MY_ORG = JsonLd<Organization>({ "@context": "https://schema.org", "@type": "Corporation", "name": "Google LLC" });
Enter fullscreen mode Exit fullscreen mode

See Also

Top comments (1)

Collapse
 
mikcaweb profile image
Mark Foster • • Edited

@jdgamble555 Check this out! Type Script for JSON-LD! What! Mind Blown! JSON-LD is awesome, you can build Web Component and Hypermedia APIs with it. bit.ly/3weft3t It compiles to RDFs that can be used for querying with SPARQL. It stands for linked data. Here is a playground to play and read with it, you can also sign it with Bitcoin in the this example: json-ld.org/playground/ There is also JSON-LD query language: json-rql.org/ It can also help with Semantic Interoperability the @context is designed to link to a vocabulary. There are hundreds of Types and Properties at Schema.org located here schema.org/docs/full.html There are tons of Linked Open Vocabularies that can be represented in JSON-LD Schema.org and FOAF are my favorite FOAF stands for Friend Of A Friend and it is designed to build a Social Network, under the hood Facebook is build on this technology and there is a major project going on at the core of the web to make Social Linked Data and open protocol. You can find out more here solidproject.org
Here is a resource to learn about all the different Linked Open Vocabularies you will Schema.org and FOAF there: lov.linkeddata.es/dataset/lov/