見出し画像

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

aLiz

🎈 WPでも公開中です
https://wp.me/pc9NHC-1pB

#vue #nuxt #プログラミング #エンジニア

前置き

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

<template>
 <div class="page">
   <button @click="click">click</button>
 </div>
</template>

<script>
export default {
 methods: {
   click() {
     let num1 = 3
     console.log(num1 + '6')
   },
 },
}
</script>

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だけでも
できなくはないのですが、
まぁ毎回やるのは面倒ですよね笑
開発規模が拡大してきたら尚更…

<template>
 <div class="page">
   <button @click="click">click</button>
 </div>
</template>

<script>
export default {
 methods: {
   click() {
     let num1 = 3
     let num2 = '5'
     if (typeof num1 === 'number' && typeof num2 === 'number') {
       console.log(num1 + num2)
     } else {
       console.log('check type')
     }
   },
 },
}
</script>


TypeScriptのインストール

##前提

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

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

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

// terminal
$ npm install

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

// terminal
$ npm install typescript --save-dev

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

// terminal
$ sudo npm install -g typescript

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

// terminal
$ tsc -v

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

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

// terminal
$ npm install --save-dev @nuxt/typescript-build @nuxt/types
// nuxt.config.js
export default {
 buildModules: ['@nuxt/typescript-build']
}
// tsconfig.json
{
 "compilerOptions": {
   "target": "ES2018",
   "module": "ESNext",
   "moduleResolution": "Node",
   "lib": [
     "ESNext",
     "ESNext.AsyncIterable",
     "DOM"
   ],
   "esModuleInterop": true,
   "allowJs": true,
   "sourceMap": true,
   "strict": true,
   "noEmit": true,
   "experimentalDecorators": true,
   "baseUrl": ".",
   "paths": {
     "@/*": [
       "./app/*"
     ],
     "~/*": [
       "./*"
     ]
   },
   "types": [
     "@types/node",
     "@nuxt/types",
     "@nuxtjs/firebase",
     "@nuxtjs/dayjs",
     "nuxt-i18n"
   ]
 },
 "exclude": [
   "node_modules",
   ".nuxt",
   "dist"
 ]
}
// terminal
$ npm run dev

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


動かしてみる

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

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

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

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

// app.ts
console.log('Hello!')


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

// terminal
$ tsc app.ts

⬇️表示を確認✨👀

// terminal
$ npm start

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

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


書き方

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

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

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

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

// terminal
const number = 5!
console.log(number)

##変数: 型

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

// terminal
const text: string = 'Hello!'
console.log(text)


まとめ

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1pB

この記事が気に入ったらサポートをしてみませんか？