15
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

先に結論

ドキュメントちゃんと読みましょう
公式

あと個人的にはこちらの記事に救われました。
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もバージョンアップでだいぶ進化してるので、そろそろ自分の理解にもアップデートをかけないとなと思います。

15
4
2

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
15
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?