Zenn
🦁

TypeScriptはじめてみた 〜環境構築〜

2021/10/20に公開
JavaScript
TypeScript
webpack
npm
環境構築
tech

TypeScriptとは？

ここは飛ばします．記事だけ載せておきます．

English Articles
日本語記事

環境構築のはじまり〜

PC環境

  • MacBook Pro (2020)
  • macOS Big Sur version 11.6
  • Editor: VSCode

コンパイラの導入

- Node.jsのインストール

Node.jsから推奨版をインストールします．（2021/10/19では，"14.18.1LTS" です．）

- TypeScriptのコンパイラのインストール

terminalを開き，$ npm install -g ts-nodeを実行後，以下のどちらかのコマンドを実行します．（OSに依存）

terminal
$ npm install -g ts-node

# 実行コマンド（OSによって選ぶ）
$ npm install -g typescript
$ sudo npm install -g typescript

# コマンドでインストール実行後に，以下を実行するとバージョンがわかる
$ tsc -v
>> Version 4.4.4

"Hello, World!"を表示してみる

簡単なプログラムの実行

terminalでファイルの任意の場所で，以下のコマンドを実行

terminal
$ mkdir helloworld
$ cd helloworld
$ touch helloworld.ts
$ code .

※code .コマンドが効かない場合は，【Qiita】code.コマンドがcommand not found となるを参照．
※teminalでのこの操作がわからない場合は，【Qiita】Macのターミナルコマンド一覧（基本編）を参照．

VSCodeの起動後，helloworld.tsに以下のコードを書く

helloworld.ts
const message:string = 'Hello, World!';
console.log(message);

VSCodeの設定

  • 拡張機能をインストール
    • code runner
    • typescript
      などなど

このまま，VSCode上か普通のterminalを開いて以下を実行する．

teminal
$ tsc hellowolrd.ts
$ node helloworld.js

簡単な環境構築の終了！

ガチの環境構築していく！

ここまで行ったことは，導入でまずはterminalに移すところまでで特にこれができても意味がない．
ということで，ガチの環境構築（≒本格的に実用的な環境構築を行なっていく〜〜〜）

新たにプロジェクトを立てる

先述のように，新たなプロジェクトを任意の場所に立てる．この時についでに必要なツールのインストールを行います．

terminal
$ mkdir env_build
$ cd env_build
$ npm init --y
$ npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev
$ npm install express mongoose passport jade connect-chain http-errors mocha 
$ npm install assert power-assert sinon superagent minimist keypress  --save-dev
$ npm install lodash underscore.string chalk async http-server nodemon fixpack --save-dev

ここで，ある程度の簡単な設定だけいじっていきます．
package.jsonの中に，npm build，npm startが使えるように，scriptsの中に書き込みます．++がついている2行を付け足してください．（※その前の行にコンマ忘れないでね！）

package.json
{
  "name": "env_build",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    
 ++ "build": "webpack --mode=development",
 ++ "start": "webpack serve --mode=development"
    
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
	省略
  },
  "dependencies": {
	省略
  }
}

次に，webpackの設定を行っていきます．
まずは，terminalを開いて，

terminal
env_build
├── node_modules
:
│   ├── @discoveryjs
└── tsconfig.json

# env_build/.
$ touch webpack.config.js

ここにwebpack.config.jsを作っていきます．

webpack.config.jsの中身は，以下の通りに記述してもらえば良いかと思います．

webpack.config.js
const path = require('path');

module.exports = {
    entry: {bundle: './src/app.ts'},
    output: {
        path: path.join(__dirname,'main'),
        filename: '[name].js'
    },
    resolve: {extensions: ['.ts','.js']},
    devServer: {
        static: {directory: path.join(__dirname, "main")}
    },
    module: {
        rules: [{test:/\.ts$/,loader:'ts-loader'}]
    }
}

最後の設定は，TypeScriptの設定です．terminalで以下を実行するとtsconfig.jsonができます．

terminal
tsc --init
tsconfig.json
{
    "compilerOptions": {
        /* Language and Environment */
        "target": "es5",  
        /* Modules */
        "module": "commonjs",  
        /* Interop Constraints */
        "esModuleInterop": true,
        /* Type Checking */
        "strict": true, 
        /* Completeness */
        "skipLibCheck": true
    }
}

ここまでが設定の中身です．

実際にプログラムしてみる

まずは，そのメインとなるプログラムの２つのフォルダを作る必要があります．

terminal
$ mkdir main
$ cd main
$ touch index.html
$ cd ..
$ mkdir src
$ cd src
$ touch app.ts
$ touch item.ts

とでもしておきましょう．別名でも大丈夫です．

さて，ここでindex.html, app.ts, item.tsの中身をいかにざっと書いておきます．

index.html
<!DOCTYPE html>
<html lang='ja'>
    <head>
        <meta charset="utf-8">
        <title>Hello typescript</title>
    </head>
    <body>
        <div id="output"></div>
        <script src="bundle.js"></script>
    </body>
</html>
app.ts
import {Item} from './item';
var elem = document.getElementById('output');
var profile = new Item('じん',1);
profile.say(elem);
item.ts
export class Item {
    constructor(private name:string, private num:number){}

    public say(elem : HTMLElement | null) : void {
        if(elem){ 
            elem.innerHTML = 'こんにちは！ ' + this.name + 'さん' + 'typescriptで簡単な実装ができましたね！' + 'これも' + this.num + 'つの成果物です！';
        }
    }
}

ここまで書いたら，

terminal
npm start

を押して，http://localhost:8080/にアクセスしてみてください！簡単が文章が出てきます！

ちなみに，tsの中身を少し変えて，保存（command + s）を押すと，自動的に変更されているので，数値を変えてみるなり，自分の名前にしてみるなりして，確認してください（webpackの機能です）

参考にさせていただいてる記事

Discussion