TypeScript での作業

このセクションでは、 TypeScript で HERE Maps API for Javascript を使用する方法について説明します。以下のセクションでは、 WebPack を使用して TypeScript コードの出力を生成する簡単なボイラープレートコードについて説明します。

はじめに

NPM で HERE Maps API for Javascript を使用できるようにするには、 HERE パブリックリポジトリを NPM 設定に追加する必要があります。

npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

node.js と npm がインストールされていると仮定して、プロジェクトを含むディレクトリを作成し、コンソールから次のコマンドを実行します。

npm init

次 package.json のようなファイルが作成されます。

 {
     "name": "typescript-demo",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
 }

HERE Maps API for Javascript ライブラリに依存関係を追加します。
```
 npm install @here/maps-api-for-javascript --save
```
開発の依存関係を WebPack に追加します。
```
 npm install webpack webpack-cli  --save-dev
```
プロジェクトの TypeScript コンパイラーおよびローダーをインストールします。
```
 npm install --save-dev typescript ts-loader
```
このステップの後、すべての開発前提条件がインストールされ、プロジェクトを構成する必要があります。

ルートディレクトリに、 tsconfig.json TypeScript コンパイラの最小構成を定義する次のものを追加します。

 {
     "compilerOptions": {
         "outDir": "./dist/",
         "noImplicitAny": true,
         "module": "es6",
         "target": "es5",
         "jsx": "react",
         "allowJs": true,
         "moduleResolution": "node"
     }
 }

webpack.config.js 次の構成で、プロジェクトのルートディレクトリにファイルを作成します

 const path = require('path');

 module.exports = {
     entry: './index.ts',
     module: {
         rules: [
         {
             test: /\.tsx?$/,
             use: 'ts-loader',
             exclude: /node_modules/,
         }
         ],
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
     },
     output: {
         filename: 'index.js',
         path: path.resolve(__dirname, 'dist'),
     },
     mode: 'production',
     node: {
         global: false,
     },
     performance: {
         maxEntrypointSize: 2048000,
         maxAssetSize: 2048000
     }
 };

次のステップで index.tsは、基本マップの表示を担当するルートディレクトリ TypeScript ファイルを作成します。

 import "@here/maps-api-for-javascript";

 let platform = new H.service.Platform({
     apikey: "{YOUR_API_KEY}",
 });

 let maptypes = platform.createDefaultLayers();

 let map = new H.Map(
     document.getElementById("mapContainer"),
     maptypes.vector.normal.map,
     {
         zoom: 10,
         center: { lng: 13.4, lat: 52.51 },
     }
 );

 new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

およびdistディレクトリからのコンパイル済み出力を使用する、対応する index.htmlHTML ファイル。

 <html>
     <head>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
         <meta charset="utf-8">
         <style>
         #map {
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
         }
         </style>
     </head>
     <body>
         <div id="mapContainer"></div>
         <script src="./dist/index.js"></script>
     </body>
 </html>

webpack のローカルインストールで、build ターゲットを追加してpackage.jsonのscriptセクションを更新します。
```
 "build": "webpack"
```
コンソールから次のコマンドを実行します。
```
npm run build
```
これ dist により、バンドルされたビルドが作成され、ディレクトリに配置されます。 index.html ブラウザからページにアクセスすると、次の結果が表示されます。

TypeScript での作業

TypeScript での作業

はじめに

「」に一致する結果は件です

「」に一致する結果はありません

開発者

TypeScript での作業

はじめに

「」に一致する結果は 件です

「」に一致する結果はありません

開発者

「」に一致する結果は件です