TypeScript

【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

前置き

型チェックに便利なTS💫
何が良いのか❓
まずはこれを見てください👀

methodsで単純に数字を足します。
num1 + 6にし、9を出したいのですが、
間違って6を文字列にし、
連結させているので
36が出ます。

エラーは出ませんが、
やりたいこととは違います💥

TSなら型を指定して
型ちがうよ❗️
というエラーにできます💫☝️

ということで、
なるべく簡単にTSを理解し、
スモールステップで始めます❗️

まずは環境がないと
どうにもならないので、
環境構築に絞った記事です❣️

私がTS初めてなので
デコレーターとかクラスとか
なにそれおいしいの❓
(ちょっと古い💥)
状態のひよこです💫🐥

そんな私でも
とりあえず環境構築はできたので
TS❓初めて聞いたよ❗️
という方向けに書きました✍️

参考:
TypeScriptとTSLintをなるべく基本から
そのNuxt、TypeScriptで。
NuxtJSのTypescript環境構築!Typescriptによる堅牢なフロントエンド開発環境構築を解説します😎


TypeScriptとは

言語&ツール

ブラウザで直接うごく物ではないので
JavaScriptにコンパイラします。
JavaScriptの上位互換のような言語でもあり、
ツールでもある、といった感じです💡
なのでベースはJavaScriptです。

フレームワークを使用しない
HTML, CSS, JSのファイルでも使えます💡
TSファイルが
コンパイラでJSになるため
HTMLでJSファイルを読み込めば
きちんと動きます💫☝️
JSをTSで上書きする…
ようなイメージです🧸💭
なのでJSとTSファイルで
違うコードを書いていても
TSが優先されます❗️

ただNode.jsを使用して
TSのインストールが必要だし、
$ npm init
でpackage.jsonの生成をしたり
パッケージ管理する…
とか諸々考えると
結局はフレームワークを
使用することが多そう⭕️


メリット

前置きで書いたように、
型チェックが便利💖

typeof
これを使用すればJSだけでも
できなくはないのですが、
まぁ毎回やるのは面倒ですよね笑
開発規模が拡大してきたら尚更…


TypeScriptのインストール

前提

Node.jsが必要です。
ターミナルコマンド
$ npm
こちらを使用して
TSをインストールするためです🍀


フレームワークなしの場合

⬇️TSインストールの前に
 node_modulesを作成💡

$ npm install

⬇️ローカルでインストールする場合
 Download

$ npm install typescript --save-dev

⬇️グローバルでインストールする場合
 ローカルだとtscコマンドが
 使用できなかったため、
 こちらをお勧めします。

$ sudo npm install -g typescript

⬇️TSのインストール後
 tscのバージョンをチェック

$ tsc -v


フレームワークあり(Nuxt.js)の場合

Nuxt TypeScriptを使用します💫
セットアップ通りにやるだけで準備OK⭕️
基本的なドキュメントは
大元のTypeScriptを確認していきます。

$ npm install --save-dev @nuxt/typescript-build @nuxt/types

$ npm run dev

ここまでやって
動かしてエラーがなければ
TSを使う準備が整っています💫


動かしてみる

フレームワークなしの場合

まずはTSファイル等を
作成しましょう。
🌟は$npm install
作成されたものです。

directory

🌟node_modules/
index.html
app.js
app.ts
🌟package-lock.json
🌟package.json

TSの文法など気にせず
とりあえずconsoleだけでもOK⭕️

⬇️tscコマンドでコンパイラ
 これでapp.jsを上書き

$ tsc app.ts

⬇️表示を確認✨👀

$ npm start


フレームワークあり(Nuxt.js)の場合

こちらはまだ不明点が多いため、
TSの書き方を学んでから
学習を進めます📚
また別記事にします。


書き方

今回は環境構築編なので
詳しくはやりませんが、
簡単なものを紹介🍀

サンプルコードは
実用的ではないです。
書き方さえ分かればOK⭕️🙆‍♀️

理解が進んできたら
この一覧が役立ちそう👀
TypeScriptの型入門

!

変数の後ろにつけると、
この変数はnull, undefined
にならないという意味


変数: 型

変数がtext
: stringで型を文字列に指定


まとめ

初のTS🙌✨
まずはハードルを下げて
ざっっっくりとした全体像を
掴めた気がします😀❤️

Nuxt TypeScriptは
通常とどこが違うのか、
こちらも徐々に進めていきます!

-TypeScript
-,

© 2021 aLiz Nuxt