TypeScript 勉強中


# ここから

[TypeScript Deep Dive](https://www.gitbook.com/book/basarat/typescript/)

## 前提
- コンパイルは FuseBox ~~gulp~~ ~~webpack 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 コマンド

コンパイル対象のファイルの確認

```shell-session
% tsc --listFiles
```

モジュールの検索

```shell-session
% tsc --traceResolution
```

- 型定義ファイルの参照のされ方？

# 参考
- ES2015 から見ていった方がいいかも [Exploring ES6](http://exploringjs.com/es6/)
- [Module Resolution](https://www.typescriptlang.org/docs/handbook/module-resolution.html)
- http://stackoverflow.com/questions/30176289/using-external-modules-in-typescript/30176523#30176523
- これが一番分かり易かった: [TypeScriptで複数ファイル構成する2つの方法](http://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules)

# その他

- reference path は１ファイルにマージされてグローバルになる
- import は名前空間を作る
- 添え字を無くしたければ，"export =" で export する

## これから

- clojure
- tslint と eslint の typescript plugin との違い


# Electron

TypeScript -> ES6 -> ES5 か TypeScript -> ES5 のどちらかだと思うけど，エラーが消えない．
今の tsconfig.json でエラーは出なくなったけど，理由はわからない

index.html 内で require するときはカレントパスを push しないと見つけてくれない

```html:index.html(抜粋)
<script>
    module.paths.push(__dirname);
    require("app/renderer");
</script>
```

```js: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](https://github.com/webpack/webpack/blob/master/schemas/webpackOptionsSchema.json)

atom, electron が廃止されて，eletron-main, electron-renderer を使う

```typescipt
export class
```

# import の使い方

```typescript
import {A} from 'A';
```

```typescript
import * as A from 'A';
```

```typescript
import A from 'A';
```

```typescript
import A, {B} from 'A';
```

```typescript
import A = require('A');
```

# 設定

```json: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"
  }
}
```

```json:tsconfig.json
{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "lib": ["dom", "es6"]
  }
}
```

# tslint

# JavaScript の外部モジュールの使い方