yaakaito.org

TypeScriptでライブラリ書くときのあれこれメモ

Memo, TypeScript

こんにちは!うきょーです!ほぼ自分用のメモなのであとでまともに書くかもしれません。 TypeScriptでライブラリ作って公開したいときのあれこれです。

配布方法

bowerでの配布を想定。一旦registryには置かずに、URLを直で指定する。 いつも通りgithubから配布

配布するもの

  • 本体.js
  • 本体.min.js
  • 本体.d.ts

あとは必要ならREADMEとかLICENCEあたり。

d.tsはDefinitelyTypedという手もあるが、せっかくTypeScriptで書いてあるんだから、入っている分には問題ないだろう。

d.ts

DefinitelyTypedに準拠するように作った方がよさげ。 依存ライブラリなにもないなら深く考えなくていい。

依存ライブラリがある場合、DefinitelyTypedは以下のような構成をとっているので

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// ....
├── jake
│   ├── jake-tests.ts
│   └── jake.d.ts
├── jasmine
│   ├── jasmine-tests.ts
│   └── jasmine.d.ts
├── jasmine-matchers
│   ├── jasmine-matchers-tests.ts
│   └── jasmine-matchers.d.ts
├── jqrangeslider
│   ├── jqrangeslider-tests.ts
│   └── jqrangeslider.d.ts
├── jquery
│   ├── jquery-tests.ts
│   └── jquery.d.ts
├── jquery.autosize
│   └── jquery.autosize.d.ts
├── jquery.bbq
│   ├── jquery.bbq-tests.ts
│   └── jquery.bbq.d.ts
├── jquery.bootstrap.wizard
│   └── jquery.bootstrap.wizard.d.ts
├── jquery.clientSideLogging
│   ├── jquery.clientSideLogging-tests.ts
│   └── jquery.clientSideLogging.d.ts
├── jquery.colorbox
│   ├── jquery.colorbox-tests.ts
│   └── jquery.colorbox.d.ts
// ....

たとえばjQueryに依存するライブラリ hogefuga を書くなら、hogefuga/hogefuga.d.ts<reference path="../jquery/jquery.d.ts">と読むようにしなければいけない。

で、最初からTypeScriptで書くとおそらくこういう構成にはならない。(src以下に外部ライブラリがたくさん並んでたらいやですよね?) なんで面倒なのであとでくっつける。具体的に言えばgrunt concatで、コンパイルされたd.tsの頭にreferenceだけ書いたd.tsくっつける。

本体のビルド

JavaScriptとそんな変わらん。コンパイルしてminifyしてライセンスくっつけて終わり。

moduleが分裂する

複数ファイルになった時に同じようなmoduleが複数定義される場合がある。(というかほとんどそうなる) 言語の仕様上正攻法では回避できないので、諦める or 原始的な解決。

原始的に解決する場合は、そもそもmoduleを書かずに、コンパイル前にmoduleの部分を結合、コンパイル、という方式。 どこぞのMakefileみたいで懐かしい、退化してる気分だ。

moduleはないけど、あると思って書かないとexportとかで死ぬので気をつけましょう。