【Nuxt.js】超初心者向けTypeScript〜環境構築編〜
🎈 WPでも公開中です
https://wp.me/pc9NHC-1pB
前置き
型チェックに便利な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
この記事が気に入ったらサポートをしてみませんか?