2019/07/29 kansai.ts #2

1. TypeScript の型定義を
PRする技術
ypresto / Yuya Tanaka
kansai.ts #2
Picture: Ron Clausen (CC-BY-SA 4.0)
with trimming & color filter applied by ypresto
注：ちゃんとTSのサイトと同じシアトルの画像です

2. @yuya_presto
@ypresto
codeTakt: 学校教育系エンジニア
フルリモート / 保育士資格
Yuya Tanaka
bit.ly/ypresto-d-ts

3. 業務連絡：ロクにナレッジシェアもせずすみませんでした・・
あ、でもこのQiita記事書いてた
（削除超過分はyarn.lock）
bit.ly/ypresto-d-ts

4. At least 12 PRs!
bit.ly/ypresto-d-ts

5. 型定義を書く
bit.ly/ypresto-d-ts

7. 控えめが過ぎる
oO（ライブラリのimportにだけ有効な noImplicitAny 誰か作ってください！！

8. 初級編

11. 中級編

12. ▼

16. 上級編

19. PRできる型を作り上げるまで
https://github.com/fnando/i18n-js
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/83e5c8c944d18bf5ea542428
a75dd79934be5333/types/i18n-js
（短縮→ http://bit.ly/ypresto-dt-i18n-js ）
↑作ってPRした

20. 型情報を収集する（人力）

21. 1. ドキュメントから
2. サンプルコードから
3. 本体のコードから

22. 1. ドキュメントから

23. 2. サンプルコードから

24. 2. サンプルコードから
ドキュメントから
切り出して型のテストに！

25. 3. 本体のコードから

26. 3. 本体のコードから
正確だけど
ぶっちゃけ大変
確認時にGood
あとドキュメントされてない
パラメータも見つかる？

27. 型定義ならではの
お作法

29. 1. export =
2. namespace
3. 型のexport

30. これじゃダメなん？
▶export defaultを並べて書くと壊れるライブラリが多い
この書き方はES Modulesのライブラリ専用

31. （esModuleInteropがオフのとき）
実行時にTypeError
「dayjs_1.default is undefined」
例：export =で書かれているdayjsの
型定義をexport defaultにしてみる
↑文言は適当

32. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo'
import Foo = require('foo') // TS
var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo

33. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo'
import Foo = require('foo') // TS
var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo
現代、多くはこっちのはず
（babelしてる場合とか）

34. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo'
import Foo = require('foo') // TS
var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo
NOTE: I18n.defaultLocale = 'ja' は
TS専用requireで書かないとできない
（ES Modulesはreadonly）

35. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo'
import Foo = require('foo') // TS
var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo
esModuleInteropは
使い手でONとは限らない

36. 1. export =
2. namespace
3. 型のexport

37. 2. namespace
var I18n = {} // POJOやfunctionを用意し
modules.exports = I18n // まるっとexport！
// プロパティ刺して

38. dayjs関数オブジェクトに .locale() も生えてる
そう、namespaceならね

39. 1. export =
2. namespace
3. 型のexport
お前は
誰だ？

40. 2.5. export as namespace
ブラウザ直loadでも使える
UMD形式の場合は書く！
例： window.$ とか
i18n-jsのコード

41. 1. namespace
2. export =
3. 型のexport

42. 3. 型のexport
ES Modulesでtop-level（かdeclare module直下）に型を書く場合、
複雑な引数や返り値など、必要な型にはexportを！
NOTE: exportしたnamespaceの中の型は勝手に見える模様

43. その他のヒント
● 本体にPRするときは package.json に "types": "index.d.ts" を追加
● DefinitelyTypedにPRするときはContribution guideを読む
● 複数ファイルのライブラリは foobar.js に対応して foobar.d.ts を追加
▶ import ... from 'hoge/foobar' したときに読んでくれる
● モチベを保つには：自分のプロジェクトの
declare moduleの中で書き始めて、後でPRにする

44. FAQ（？）

45. Q. 新しいライブラリに
型定義をつけて
配りたいのですが？

46. A. 令和時代のライブラリは
最初からTypeScriptで
書きますよね？？

48. まとめ
型定義を書くには
1. ドキュメントから型情報を
2. サンプルコードから型のテストを
3. 本体のコードで照合を
型定義のお作法
1. exportに必要ならnamespaceを使う
2. export = を書き分ける
2.5. UMDは export as namespace
3. 型もexportしてあげる
型とはドキュメントで、
型とはテストだ！！

49. 書いてないところは基本anyなので、他のoptionでエラーになりにくい（多分
実際はへタレだったので strictNullChecksとnoImplicitThisだけからでした・・
余談：strictしませんか？

50. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export Foo module.exports.Foo = ...
import { Foo } from 'foo' var Foo = require('foo').Foo
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo' var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo

51. 1. export =
TS / ES Modules CommonJS
export default Foo module.exports.default = ...
import Foo from 'foo' var Foo = require('foo').default
export Foo module.exports.Foo = ...
import { Foo } from 'foo' var Foo = require('foo').Foo
export = Foo // TS専用 module.exports = ...
import * as Foo from 'foo' var Foo = require('foo')
esModuleInteropがONの場合、よしなに対応
import Foo from 'foo' var foo = require('foo')
var Foo = fooがES Modules
? foo.default : foo
import * as React from 'react'
▼
import React from 'react'
import React, { useState } from 'react'

52. 1. export =
DefinitelyTypedより lodash/keyBy.d.ts
DefinitelyTypedより lodash-es/keyBy.d.ts