ここから
前提
- コンパイルは FuseBox
gulpwebpack 2を利用する. - Node.js の環境は構築済とする
ざっくり
この辺りを押さえたい
- 環境構築
- linter
- testing framework
準備
- typescript, tslint, ts-node をグローバルにインストール
- FuseBox は project 毎にインストール
ゼロから
mkdir ts-project
cd ts-project
mkdir src dist
npm init -y
tsc --init
tslint --init
npm install typescript --save-dev
npm install @types/node --save-dev
npm install fuse-box --save-dev
- tsconfig.json 編集
- tslint.json 編集
- fuse.ts 作成
- package.json に run-script を追加
Tips
tsc コマンド
コンパイル対象のファイルの確認
% tsc --listFiles
モジュールの検索
% tsc --traceResolution
- 型定義ファイルの参照のされ方?
参考
- ES2015 から見ていった方がいいかも Exploring ES6
- Module Resolution
- http://stackoverflow.com/questions/30176289/using-external-modules-in-typescript/30176523#30176523
- これが一番分かり易かった: TypeScriptで複数ファイル構成する2つの方法
その他
- reference path は1ファイルにマージされてグローバルになる
- import は名前空間を作る
- 添え字を無くしたければ,"export =" で export する
これから
- clojure
- tslint と eslint の typescript plugin との違い
Electron
TypeScript -> ES6 -> ES5 か TypeScript -> ES5 のどちらかだと思うけど,エラーが消えない.
今の tsconfig.json でエラーは出なくなったけど,理由はわからない
index.html 内で require するときはカレントパスを push しないと見つけてくれない
index.html(抜粋)
<script>
module.paths.push(__dirname);
require("app/renderer");
</script>
main.js
// import * as electron from 'electron';
// const app = electron.app;
// const BrowserWindow = electron.BrowserWindow;
import {app, BrowserWindow} from 'electron';
function hello(compiler: string) {
console.log(`Hello from ${compiler}`);
}
hello("TypeScript");
let mainWindow: Electron.BrowserWindow = null;
app.on('ready', () => {
console.log("Electron: Ready to start");
mainWindow = new BrowserWindow();
mainWindow.webContents.loadURL(`file://${__dirname}/../index.html`);
});
webpack 関連
webpack のマニュアルには target として指定できる値が書かれていないので,ソースから
引っ張っておく
マニュアル: https://webpack.js.org/configuration/target/#target
webpack/schemas/webpackOptionsSchema.json
atom, electron が廃止されて,eletron-main, electron-renderer を使う
export class
import の使い方
import {A} from 'A';
import * as A from 'A';
import A from 'A';
import A, {B} from 'A';
import A = require('A');
設定
package.json
{
"name": "typescript-electron",
"version": "1.0.0",
"description": "",
"main": "app/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"devDependencies": {
"@types/electron": "^1.4.29",
"@types/jquery": "^2.0.34",
"@types/marked": "0.0.28",
"@types/react": "^0.14.55",
"@types/react-dom": "^0.14.19",
"gulp": "^3.9.1",
"gulp-typescript": "^3.1.3",
"typescript": "^2.0.10"
},
"dependencies": {
"electron": "^1.4.12",
"gulp-download-stream": "0.0.13",
"gulp-unzip": "^0.2.0",
"jquery": "^3.1.1",
"marked": "^0.3.6",
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}
tsconfig.json
{
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"lib": ["dom", "es6"]
}
}