先に結論
ドキュメントちゃんと読みましょう
公式
あと個人的にはこちらの記事に救われました。
https://developer.hatenastaff.com/entry/2016/06/27/140931
以下ダラダラとポエムですゴメンなさい。
TypeScriptと私
言語変遷として、PHP → JavaScript/Node.js → Python と辿ってきました。
見ての通りのザ・スクリプト言語達です。
そんな私がはじめて本格的に手を出した静的型付けっぽい言語がTypeScriptでした。
とは言いつつ、実際に使っていたのはAngularだった為、特段TypeScriptっぽい部分をゴリゴリ使い倒していたわけではありません。
せいぜい Class や Interface が宣言できるのな、程度の感覚で使っていた風です。
そんな状態でもそこまで困ることなく扱えていたのは、偏にAngularさんがうまいことやっていてくれていたんだなと思います。
Google Maps JavaScript API の罠
順風満帆な?TypeScript生活に終止符を打ったのは、奇しくも同じGoogleさんのMaps Javascript APIでした。
おそらく、もっと早い段階でjQueryとかを使おうとしていたのであれば、ずっと早くに壁にぶち当たっていたと思います（むしろ当たっていた方が良かったのかも…）
今でこそ、TypeScriptフレンドリーになってる Maps Javascript API ですが、当時はTypeScript何処吹く風状態だった為、ライブラリからの歩み寄りはあまり期待できない状態でした。
scriptタグでwindowのglobalに生えるタイプのやつです
なんとかコンパイルを通そうと四苦八苦しました。
とりあえず動かすことが優先されていたため、理解することよりなんとかすることを優先したのもまずかったと思います。
検索すると対応させる方法はそれなりに見つかりました。先のjQueryの様に、当時はまだTypeScriptへ対応するライブラリも今ほど多くなく、わりかし同様のシチュエーションで困っていた人は多かったのかと。
Declaration space + Open-ended
このあたりの原則を知らずに使い倒そうとしたのがよくなかった。。。
スクリプト言語出身ということもあり、宣言型のscope認識がなく、別ファイルに記載した定義
Interface, namespace, module 等がマージするなどとは夢にも思わなかったです。
これのおかげで、見る記事によって（多くの記事は端的に同モジュール内でのサンプルが多い）
宣言の仕方が違ったりしたので、そこに振り回された感じだったのかなと思います。
Top level import
上部にimport/exportの記載があるファイルはmodule
と、上記Declaration Spaceとが合間って、混乱してしまった。
先の、TypeScript の型定義ファイルと仲良くなろう より
import $ from "jquery";
// interface をマージして window.originalFunction() を使えるようにしたい
interface Window {
originalFunction(string): void
}
window.originalFunction("test"); // => 使えない…
window: Window; // type annotationしてみる
window.originalFunction("test"); // => 使えるようになった！！
window.alert('hello,world'); // => 元から Window あった定義が使えなくなった……
がすごくいいサンプル
新しい言語 + フレームワークの同時習得はバカの山に気をつけて
ある程度さわれる様になってしまうので、できてる感を得るまでに短時間でいけますが、
その後に待ち受けるのは、フレームワークがお膳立てしてくれているスキームがあだとなった
言語特性理解への混乱。
スクラッチで狭いスコープから徐々に広げていけば、私が踏んだような轍も少しは回避できるのかなと。
おわりに
TypeScriptもバージョンアップでだいぶ進化してるので、そろそろ自分の理解にもアップデートをかけないとなと思います。