LoginSignup
2

More than 5 years have passed since last update.

TypeScript 勉強中

Last updated at Posted at 2016-12-04

ここから

TypeScript Deep Dive

前提

  • コンパイルは 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 コマンド

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

% tsc --listFiles

モジュールの検索

% tsc --traceResolution
  • 型定義ファイルの参照のされ方?

参考

その他

  • 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"]
  }
}

tslint

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2