TypeScriptでA-Frameのコンポーネントを書く

TypeScriptを使っているプロジェクトでA-Frameのコンポーネントを書く時の方法。まだざっと試したところなのでおかしなところがあれば適宜調整が必要かも。

とりあえず型を入れる。

yarn add @types/aframe

これで適当なtsファイル内でAFRAME.registerComponentとかを実行しても未定義エラー等が発生しなくなるため定義できるようになる。

また、下記のようにimportして実行する方法もある。

import { registerComponent } from 'aframe'

registerComponent('my-component', {

コンポーネント内部で使うパラメータはオブジェクト内に定義すればいい。JavaScriptの場合だと、initメソッド内で初期化したりするが、それだと型エラーになるので要定義。

registerComponent('my-component', {
  hoge: true,
  fuga: 100,

というか、型定義のテストファイルに一通りのものが書かれている。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/aframe/test/aframe-tests.ts

const Component = registerComponent('test-component', {
    schema: {
        myProperty: {
            default: [],
            parse() {
                return [true];
            }
        },
        string: { type: 'string' },
        num: 0
    },
    init() {
        this.data.num = 0;
        this.el.setAttribute('custom-attribute', 'custom-value');
    },
    update() {},
    tick() {},
    remove() {},
    pause() {},
    play() {},

    multiply(f: number) {
        // Reference to system because both were registered with the same name.
        return f * this.data.num * this.system!.data.counter;
    }
});

他にも色々書かれているのでこちらを参考にしていけばなんとかなるのではないかと思う。

プロパティの型を明示的に指定する場合は？

事前にinterfaceを定義する感じ？　ただこれだとメソッドも再定義しないといけないので非常に面倒。何か良い方法は無いのだろうか。