[js]typescript (3)

さて、夏休みのTypeScript勉強の3回目だ。

 

---

プロジェクトの環境設定

プロジェクトの環境設定
https://typescript-jp.gitbook.io/deep-dive/project

宣言空間

TypeScriptには型宣言空間(type declaration space)と変数宣言空間(variable declaration space)がある、と。

「型アノテーションとして使用できるものが含まれている」と書いてあるのだが、そもそも型アノテーションがわからん。
調べた感じからすると、変数宣言で型指定するあれのことをそう呼んでいるようである。TypeScriptだと変数宣言の後ろにコロンと型名を書くやつだ。
あってもなくても動作するからアノテーションなのかな？

 

型はまあいいとして、変数の方がよくわからん。
変数の宣言は、まあいい。型宣言したものも全部ではないが変数として扱えるらしい。たぶん右辺値だけだとは思うが。。。どうだろう。。。

varだけ書いてあるが、letやconstも変数宣言空間にいるんだろうか？
いてほしいな。

 

モジュール

オリジナルだと”Modules”で、項目も”Global Module”と”File Module”だった。後からオリジナルが更新されたのかもしれん。

ともかく、ファイルの中に普通に宣言するとグローバル扱いになって、別ファイルだろうと名前が衝突する可能性がある。importとかしなくてもいいのか？

ともかく、極力ファイルモジュールにしましょう、ということだった。
external moduleとも呼ぶそうだ。

そのファイルモジュールだが、TypeScriptファイルにimportかexportがあるだけでローカルスコープになると書いてある。
本当か？

 

いろいろ疑わしくなったので試そう。

まず、mod1.tsにfooを、mod2.tsにfooを代入するbarを用意し、tscしてnodeでmod2.tsを実行。
・・・うん、bar is not definedでエラーになるね。

そういえば、そもそもグローバルにいるとかいっていても、mod1.tsとmod2.tsをコンパイルしてリンクするわけでもないので、何かしらプロジェクトみたいな概念があるはずだ。

先にそっちを整えないとTypeScriptの勉強にならんな。
3回目にしてようやくそういう課題が見つかるとは。。。

---

Node.js & TypeScriptのプロジェクト作成

Node.js & TypeScriptのプロジェクト作成 - TypeScript Deep Dive 日本語版
https://typescript-jp.gitbook.io/deep-dive/nodejs

npmを使うようだ。どこかでnpmは略語じゃないと書いてあったが、ここには関係ない話だ。

tscはプロジェクトでインストールするようだ。まあ、これは-gでもよかろうが、バージョンで挙動が変わるかもしれんので安全に行くならローカルか。
そのうち、nvmみたいにバージョン管理されるようになるんだろうか。

@types/nodeというのもインストールする。これは知らなかった。
node.d.tsらしいが、importして使うのだろうか？

そしてtsconfig.jsonももちろんいる。
パラメータを見ると、srcとlibになっている。ここら辺はNodeのお作法なのかな。

package.json の”scripts”にコマンドを書いておくと、 npm runでコマンドが実行できるようだ。
npm のお作法なんだろうけど、そういうのを私は知らんのだ。
取りあえず”build”に”tsc –p .”を書いておくと、npm run buildでビルドできる。

---

モジュール再び

さて、これでビルドはできるようになったが、今は他のモジュールも使っていないので手動でコンパイルするのとほとんど変わらん。

Node.jsには globalというオブジェクトもあるらしい。

https://nodejs.org/docs/latest-v12.x/api/globals.html#globals_global

Node.jsではそのモジュール内でのローカルになると書いてあるので、他のファイルにあってもグローバルだから見える、というのはブラウザでの話だろうか？

global.fooなどとしても globalは見つからないと言われるから、うん、そういうものだと思い込もう。

 

コンパイルしてリンクする言語じゃないから、1ファイル内で完結しないといかんのかな。
1ファイルといっても、そこからimportしていくだけだろうけど。

 

ファイルモジュールの詳細

ファイルモジュールの詳細 - TypeScript Deep Dive 日本語版
https://typescript-jp.gitbook.io/deep-dive/project/modules/external-modules

公開する方は、 exportを付けておけばよい。
その付け方がいくつかあるので混乱してしまうのだが、どれか1種類だけ覚えておいて、自分が使うときはそれを、他の人が違うのを使っていたらツールに任せる、くらいでいいか。

問題はimportだ。
なんかいろいろ書き方があるのだが、これからやるんだったらES module syntaxというやつだけにしましょう、ということか。

ES module syntaxは、exportされたものをimportするときに fromを使うやつだと思っている。
そうじゃないやつはCommonJS syntaxとかいう呼び方で、exportされたものをimportするときにrequire()を使う。
require()の方が良く使われていたし、使い方もシンプルだったのでそうしていたのだが、どうも時代はfromを使うタイプのようだ。

試しにNode.jsでfromを使ってみたらエラーになって、そういえば拡張子を.mjsにしないと動かないんだった、というのを思い出した。

---

 

力尽きました・・・。

さすがに3回でたどり着くのは無理でした。
まあ、環境の作り方が分かったのと、前提となるJavaScriptの知識が足りてないのがわかったから、じわじわやりますかね。