teamoo24 / pixi_type_script

始める前に！

このソースが回すためにはPIXIの属性が

• "pixi.js": "^5.0.4"

になる必要があります。

pixi_type_script

• 最初に以下のリンクでnode.jsをインストール node.jsサイト
• インストールが終わったら以下のコマンドでインストール確認

node -v

• 次にフォルダーをnodeを使って初期化する(設定はpackage.jsonを確認)

npm init

本書で使用する開発環境

開発言語関連

• TypeScript

JavaScriptに静的型付けなどの拡張を行ったオープンソースプログラミング言語

• TypeDoc

TypeScriptのドキュメント生成ツール

• TSLint

TypeScriptのリントツール(構文チェッカー)

• tslint-config-airbnb

TSLintルールのテンプレート

描画ライブラリ

• PIXI.js

2D描画ライブラリ

• @types/pixi.js

PIXI.jsのTypeScript向け型定義

JavaScript実行ライブラリ

• node.js

JavaScript実行環境

• npm

Node.jsパッケージマネージャ

バンドラ

• webpack

JavaScriptファイルバンドラ

• webpack-cli

webpackのCLI実行環境

• ts-loader

webpackでTypeScriptをトランスパイルできるようにするためのプラグイン

Webサーバ

• webpack-dev-server

ローカル環境での開発用のWebサーバ

ここでインストールするTypeScriptモジュール

• typescript 以下のコマンドでインストールできます。

npm i --save-dev typescript tslint tslint-config-airbnb typedoc

• tslint
• tslint-config-airbng
• typedoc

ファイルの説明

• tsconfig.json 最低限の設定としてpackage.jsonと同いフォルダに保管

TypeScriptへのトランスファイル方法

• tscコマンドを実行してjsファイルをtsにトランスファイルする。 以下のコマンドでトランスファイル。

$ ./node_modules/.bin/tsc -p .

その後、index.jsを実行すると以下のような結果を得られる

$ node index.js
3

コマンド目録

tsc

npm run tsc

tslint

npm run tslint

typedoc

npm run typedoc

webpack

npm run webpack

server

npm run server