swchrm logs

妄想技術録

three.jsをIonicに導入したときの型定義ファイルの設定 覚書

はじめに

個人の覚書です。

格闘記

typingsというツールを使ってインストールする。

インストール実行結果

MyMacBookAir:VNavi swchrm$ npm install -g typings
npm WARN deprecated typings@2.1.1: Typings is deprecated in favor of NPM @types -- see README for more information
/Users/swchrm/.nodebrew/node/v10.15.0/bin/typings -> /Users/swchrm/.nodebrew/node/v10.15.0/lib/node_modules/typings/dist/bin.js
+ typings@2.1.1
added 184 packages from 100 contributors in 14.965s

どんなファイルが有るか検索してみる。

MyMacBookAir:VNavi swchrm$ typings search three
Viewing 20 of 20

NAME                                SOURCE HOMEPAGE                                                                                             DESCRIPTION VERSIONS UPDATED
three                               dt     http://mrdoob.github.com/three.js/                                                                               2    2017-03-23T14:45:37.000Z
three-canvasrenderer                dt     https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js                           2    2016-09-16T16:36:06.000Z
three-copyshader                    dt     https://github.com/mrdoob/three.js/blob/r68/examples/js/shaders/CopyShader.js                                    1    2016-04-05T22:50:30.000Z
three-css3drenderer                 dt     https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js                            1    2016-04-05T22:50:30.000Z
three-editorcontrols                dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/EditorControls.js                            1    2016-04-05T22:50:30.000Z
three-effectcomposer                dt     https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/EffectComposer.js                         1    2016-04-05T22:50:30.000Z
three-firstpersoncontrols           dt     http://mrdoob.github.com/three.js/                                                                               2    2016-07-04T01:07:34.000Z
three-maskpass                      dt     https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/MaskPass.js                               1    2016-04-05T22:50:30.000Z
three-orbitcontrols                 dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js                             2    2016-07-04T01:07:34.000Z
three-orthographictrackballcontrols dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrthographicTrackballControls.js             1    2016-04-05T22:50:30.000Z
three-projector                     dt     https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/Projector.js                                1    2016-04-05T22:50:30.000Z
three-renderpass                    dt     https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/RenderPass.js                             1    2016-04-05T22:50:30.000Z
three-shaderpass                    dt     https://github.com/mrdoob/three.js/blob/r68/examples/js/postprocessing/ShaderPass.js                             1    2016-04-05T22:50:30.000Z
three-trackballcontrols             dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js                         2    2016-07-30T16:09:25.000Z
three-transformcontrols             dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js                         1    2016-04-05T22:50:30.000Z
three-vrcontrols                    dt     https://github.com/mrdoob/three.js/blob/master/examples/js/controls/VRControls.js                                2    2016-10-28T13:55:57.000Z
three-vreffect                      dt     https://github.com/mrdoob/three.js/blob/master/examples/js/effects/VREffect.js                                   2    2016-10-28T13:55:57.000Z
react-icons/go/three-bars           dt                                                                                                                      1    2017-02-02T22:44:13.000Z
three/detector                      dt     https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js                                           1    2016-04-05T22:50:30.000Z
vorpal                              dt     https://github.com/dthree/vorpal                                                                                 1    2016-08-31T00:59:05.000Z

どれをインストールすればいいかわからないのでひとまず何も指定せずにインストールしてみる。

MyMacBookAir:VNavi swchrm$ typings install three --save
typings ERR! message Unable to find "three" ("npm") in the registry.
typings ERR! message However, we found "three" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/three/versions/latest responded with 404, expected it to equal 200
typings ERR!
typings ERR! cwd /Users/swchrm/Documents/MyProject/VNavi
typings ERR! system Darwin 18.2.0
typings ERR! command "/Users/swchrm/.nodebrew/node/v10.15.0/bin/node" "/Users/swchrm/.nodebrew/current/bin/typings" "install" "three" "--save"
typings ERR! node -v v10.15.0
typings ERR! typings -v 2.1.1
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

エラーが大量に出た。 --ambientを付与してみた。

MyMacBookAir:VNavi swchrm$ typings install three --save --ambient
typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead

s/--ambient/--global

MyMacBookAir:VNavi swchrm$ typings install three --save --global
typings ERR! message Unable to find "three" ("npm") in the registry.
typings ERR! message However, we found "three" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/three/versions/latest responded with 404, expected it to equal 200
typings ERR!
typings ERR! cwd /Users/swchrm/Documents/MyProject/VNavi
typings ERR! system Darwin 18.2.0
typings ERR! command "/Users/swchrm/.nodebrew/node/v10.15.0/bin/node" "/Users/swchrm/.nodebrew/current/bin/typings" "install" "three" "--save" "--global"
typings ERR! node -v v10.15.0
typings ERR! typings -v 2.1.1
typings ERR!
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

typing initをする必要があることに気づく。 実行。 特に応答はない。
ファイルの確認。

MyMacBookAir:VNavi swchrm$ cat typings.json
{
  "name": "VNavi",
  "dependencies": {}
}

typings install dt~three --save --globalでうまくいきました。dt~がないとエラーになりました。 以下はログです。

MyMacBookAir:VNavi swchrm$ typings install dt~three --save --global
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/detec
tor.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-canvasrenderer.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-copyshader.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-css3drenderer.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-editorcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-effectcomposer.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-FirstPersonControls.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-maskpass.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-orbitcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-orthographictrackballcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-projector.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-renderpass.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-shaderpass.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-trackballcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-transformcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-vrcontrols.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-vreffect.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-ctmloader.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-octree.d.ts" during installation from "three" (main)
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/three
-colladaLoader.d.ts" during installation from "three" (main)
three

typings.jsonの確認

MyMacBookAir:VNavi swchrm$ more typings.json
{
  "name": "VNavi",
  "dependencies": {},
  "globalDependencies": {
    "three": "registry:dt/three#0.84.0+20170323144537"
  }
}

まとめ

TypeScriptでJavaScriptのライブラリは使える。
ただし、型定義ファイルが最初は用意されてないので、用意する必要がある。
その用意するときに使うのが「typings」。

参考文献