Zenn
📖

Typescriptの覚え書き

2021/08/10に公開
memo
old
tech

だいぶ古い記事です。

先にお詫び

自分用のメモなので大分荒い部分があります。ごめんなさい。

そしてかなりあやふやです。間違い見つけたら是非教えて下さい。

外部モジュールか、内部モジュールか

内部モジュール

module MyModule {} 形式。別のファイルに分ける必要はない。コンパイル結果を 1 ファイルに

まとめて出力するときに使う。

tsconfig 等で outFile: を指定する場合こちらを使うぽい。 ※実験してません。

import 文を書くと自動的に外部モジュール扱いになる模様。

外部モジュール

1 ファイル＝ 1 モジュール。コンパイル結果は、 .ts1 ファイルに付き .js 1 ファイル。

使用する際は、 import mymodule = require('./MyModule'); みたいな感じで使う。

モジュールのファイル名がモジュール名として扱われる。

MyClass.ts

export class MyClass {
  test:string
}

app.ts

import MyClass = require('./MyClass'); // ./入れないとダメ

var test = new MyClass.MyClass();  // 名前がイマイチ

外部モジュールの際、モジュール名の名前空間を切って欲しくない場合の記述

MyClass.ts

class MyClass {  // export class　にしない
  test:string
}
export = MyClass; // exportに入れた部分だけexportされる
                  // exportできるのは1つだけ

app.ts

import MyClass = require('./MyClass'); // ./入れないとダメ
var test = new MyClass();  // すっきり!

その他覚え書き

所感

基本的には外部モジュールを使っておけば良いんじゃないかなというのが今の所の感想です。

Web 向けだとロード時間の問題とかがあるのでそう単純ではなさそうですが。

Electron であればレンダラプロセスでも標準で require 使えますし、そうでなければ

require.js を入れれば良いのではないかなと。

gulp

開発には gulp とか使うと思うのですが、Typescript のコンパイルは gulp プラグインに

任せない方が幸せになれました。具体的には gulp-shell を使って、

tsconfig -u で tsconfig.json の中の filesGlob に書いたディレクトリ内の

ファイル一覧で files を更新して貰って、tsc -p ./path/to/tsconfig/ で

コンパイルさせると IDE と設定の整合性が取れて良い感じです。

こうすると、 /// reference 　タグを書かずに型が参照できて見た目がスッキリします。

<code class="language-json:tsconfig.json">{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "../../app/"
    },
    "filesGlob": [
        "*/**/*.ts",
        "**/*.tsx",
        "**/*.ts"
    ],
    "files": [ 略 ]
}

sourceMap

tsconfig.json で sourceMap: true と指定すると、 .map ファイルが生成されるようになり、

ブラウザの開発者ツールでソースを見た時、Typescript がそのまま表示されるようになる。

確認した限りでは、ソースの Path は相対パスなので、ユーザー名が漏れるような事故は起きなそう。

function

Typescript で function () { } と書くと割と不幸になりがち。

通常はそれほど困ったことにはなりませんが、class 内で callback を指定するときは、

() => {} で書いておかないと、this があらぬ所を差してしまい困ったことになります。

ハマった例を以下にメモしておきます。これ、コンパイル後の出力を見るとすぐにわかるのですが、

() => { } で書くと、自動的に this を _this に保存して、関数内の this を _this に

自動的に置換してくれています。

<code class="language-ts:sample.ts">class MyClass {

  private instanceVariable = 'ABC';

  method1() {
    needCallbackMethod(this.callback1); // callback1の書き方によってはNG

    needCallbackMethod( () => { this.callback1() }); // OK

    needCallbackMethod(function() {
      console.log(this.instanceVariable); // NG! this -> Global
    }

    needCallbackMethod(() => {
      console.log(this.instanceVariable); // OK!
    }

  }

  callback1() {
    console.log(this.instanceVariable);  // NG! this -> Global
  }

  callback1 = () => {
    console.log(this.instanceVariable);  // OK!
  }

}

参考にした URL

これさえやれば大丈夫! TypeScript の Import が取っ付きにくい人向け

<a href="http://qiita.com/armorik83/items/d93fb9c80c489f0fabcf">http://qiita.com/armorik83/items/d93fb9c80c489f0fabcf

本文とコメント欄、どちらも参考になります。

TypeScript で複数ファイル構成する 2 つの方法 - teppeis blog

<a href="http://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules">http://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules

export = ; はこちらに書いてありました。

Discussion