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

前置き

型チェックに便利な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>

<button @click="click">click</button>

</div>

</template>

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>

<button @click="click">click</button>

</div>

</template>

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を作成💡

$ 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

export default {
  buildModules: ['@nuxt/typescript-build']
}

export default {

buildModules: ['@nuxt/typescript-build']

}

{
  "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"
  ]
}

{

"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"

]

}

$ npm run dev

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

動かしてみる

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

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

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

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

書き方

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

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

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

!

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

const number = 5!
console.log(number)

1 2	const number = 5! console.log(number)

変数: 型

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

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

1 2	const text: string = 'Hello!' console.log(text)

まとめ

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

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