TypeScript

【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

前置き

前回の続きです❣️
型指定, 型宣言をすることで
実行前のコンパイル時に
エラーを発見できるTS💕

こんな感じで教えてくれます。
数字で定義したのに
文字列が入っているよ❗️
という内容ですね。

app.ts:8:21 - error TS2322: Type 'number' is not assignable to type 'string'.

今回は自動コンパイルの設定です✨
それから前回できていない、
複数のtsファイルの使用について。
そして最後に少し書き方についても。

前回コンパイラと書いていましたが、
コンパイルが正しい所があります🙇‍♀️💦
申し訳ございません。
基本的に上書き的な作業…
動詞はコンパイルですね。
コンパイラは名詞。

コンパイルとは、プログラミング言語で書かれた文字列(ソースコード)を、コンピュータ上で実行可能な形式(オブジェクトコード)に変換することです。
コンパイルを行うソフトウェアをコンパイラといい、変換されるプログラミング言語をコンパイラ型言語と呼びます。

コンパイルって何?

自動コンパイル

tsファイルを書き換えたら
いちいちtscコマンドで
jsファイルを上書きし、
npm startするのか…❓🙄
結構面倒ですよね😂笑

ということで、
自動の設定をしましょう✨

前提として、
フレームワークなしの
HTML, JSファイルを想定しています。
Nuxt TypeScriptも今後やります。

こちらの記事の通りにやればOK⭕️
TypeScriptを簡単に動かす環境構築

⬇️TS使用可能にするコマンド

$ npm install // note_modulesの作成
$ sudo npm install -g typescript // TSのインストール
$ tsc -v // tscコマンドが使えるか、バージョン確認

これでTSが使用可能に。
あとは参考記事の通り、
自動コンパイルに
最低限必要なものを
書き足したり
コメントアウトを外したり…
(★が該当箇所です)

そしてtscコマンドで
tsconfig.jsonを作成します。

$ tsc --init

作成時には大体が
コメントアウトになっています。
ourDirはデフォルトの"./"だと
エラーが出て"** /*"の指示が。
人によってファイルパスが変わるので、
その辺りはエラー文を見ながら
書き換えましょう✍️
rootDirは必須ですが、
rootDirsは違うのでお間違えなく。

これで準備完了。
あとはこちらを実行している間は
自動でコンパイルされます🙌✨
停止はcontrol + Cです。

$ npm run watch

これをやった後に知ったのですが、
上記の手順を踏まずとも
このコマンドで
watchモードにできるかも。
まだ検証できていないので、
一応最後に書いておきました。

$ tsc app.ts -w

全てのtsファイルで
やりたい場合はファイル指定なし

$ tsc -w


複数のtsファイルを使用する場合

tscコマンドで
tsconfig.jsonを作成、
自動コンパイルの場合は
🔼を参考にしてください🍀

$ tsc --init

あとは単一の時と同じで、
HTMLファイルにjsを読み込んで
tsファイルをコンパイラすればOK⭕️
この場合だと
app.js/app.ts
basic.js/basic.ts
これらが存在しています。


書き方

変数: 型
定番の型はこちら。
string, number, boolean, object, array
これ以外にもtupleなどがあります。
enumは確信が持てない限り使用しない方が良い、
と公式でも名言されているので、
unionを使用する方が良さそうです。
TypeScript のオブジェクト型リテラルいろいろ
TypeScriptの型について
Everyday Types
さようなら、TypeScript enum


object

このオブジェクトに
person.nameで通常は
アクセスできます。

しかし型定義をするとエラーになります。
これはそういう仕様です。

person.nameを出力するには
こんな感じで書きます🌱


array

string[]
文字列の配列に。
number[]
数値の配列に。

['art', 0, true]のように
型をmixさせたい時は
このように指定します。
(string | number | boolean)[]

要素の順番が明確なら
tupleを使用します。
[]を使うので配列っぽいですが、
tupleです。
順番通りに型を指定します。
TypeScriptの型: タプルを定義する (Tuple types)


void

書き方はアロー関数に似ています。
関数の戻り値がない場合に使用。
この場合はprintResult内で
戻り値が必要ありません。


まとめ

自動コンパイルで
効率よくチェックできて良いです🙌✨
本当はがっつり実践的なことを
やりたかったのですが、
最初にできるだけ
ストレスを軽減するのは良いことです🍀

-TypeScript
-,

© 2021 aLiz Nuxt