ember-cli-meta-tags icon indicating copy to clipboard operation
ember-cli-meta-tags copied to clipboard

TypeScript ambient type information

Open mike-north opened this issue 7 years ago • 1 comments
trafficstars

Requires

  • [ ] merge of https://github.com/ronco/ember-cli-head/pull/44
  • [ ] ember-cli-head new version release

Because this is an 'extension of ember' kind of addon (often used without being explicitly imported), consumers will need to do one of two things in order to take advantage of this type information.

A. Indicate that this type information is to be included

tsconfig.json
{
  "compilerOptions": {
      "types": [
         "ember-cli-meta-tags"
       ]
  }
}

B. Import the entry point for this addon from somewhere in their project

app/app.ts
import Application from '@ember/application';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
import Resolver from './resolver';
// ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ 
import 'ember-cli-meta-tags';

const App = Application.extend({ ... });

After doing either (A) or (B), type-checking will

  • Accurately represent that there's a head-tags service with a collectHeadTags() function on it
  • Accurately represent that the head-data service has a headTags property on it
  • Accurately represent that Routes can now have a headTags property, containing either the array of tags or a function that returns the array

A "tag" is represented as an object having a type and tagId property, an an attrs property defined by an optional generic (by default, an any). This allows developers to define their own specific constraints on top of this

import { HeadTag } from 'ember-cli-meta-tags';

type TwitterCardTag = HeadTag<'meta', {name: string, content: string}>;

// <meta name='twitter:card' content='video' />
let twCardTypeTag: TwitterCardTag = {
  type: 'meta',
  tagId: 'card-type',
  attrs: {
    name: 'twitter:card',
    content: 'video'
  }
}

mike-north avatar Dec 30 '17 05:12 mike-north

Is there any intension in moving TypeScript types here further?

josemarluedke avatar Mar 06 '19 00:03 josemarluedke