TypeScript：プロジェクトの作成手順

TypeScript プロジェクトの作成手順

いつもわからなくなるTypeScript開発環境の準備手順をまとめます。
参考：TypeScriptハンズオン

1. プロジェクト用フォルダの作成

以下、プロジェクト用フォルダに移動して実行

2. package.jsonファイルの作成

npm init -y

※ "-y"を付けるとデフォルト値でpackage.jsonを作ってくれます。

2. TypeScriptとTypeScript用の型定義(@/types/node)のインストール

npm install typescript @types/node --save-dev

※ "--save-dev"は開発用依存とするパラメータで本番環境には含めない、の意味です。

3. TypeScript設定ファイルの作成

tsc --init

これでtsconfig.jsonファイルが作成されとりあえずの環境作成は完了。

4. Webpackのインストール

npm install webpack ts-loader @webpack-cli/generators

5. Webpackの初期化

npx webpack-cli init

選択肢が表示されるので "Typescript"を選択する以外は既定のまま先に進みます。
最後にpackage.jsonとtsconfig.jsonへの上書き確認 "Overwrite ・・・"と表示されるので「y」を入力します。

---

TypeScript, Node.js, Webpack

TypeScript：準備

TypeScript開発環境の準備

いつもわからなくなるTypeScript開発環境の準備手順をまとめます。

1. node.jsインストール

node.jsをインストールします。
手順は Node.js：#1 インストールする

2. Visual Studio Codeインストール

Visual Studio Code(VSCode)をインストールします。
手順は VSCode #1：インストール

3. TypeScriptインストール

TypeScriptをインストールします。
"npm install typescript -g"
手順は TypeScript：#1 はじめてのTypeScript

4. トランスコンパイルと実行

プロジェクトを作らずに１つのTypeScriptソース(tsファイル)をJavaScriptにトランスコンパイルするには tscコマンドを使います。

tsc (ファイル名).ts

これで (ファイル名).js ファイルが作成されます。

jsファイルを実行するには node コマンドを使います。

node (ファイル名).js

5. プロジェクトの作成

以下記事にまとめます。
プロジェクトの作成手順

---

TypeScript, Node.js, Webpack

TypeScript：

オブジェクト.constructor.name の実行でクラス名が出力されるはずですが、なぜか「o」と出力されます。(オブジェクトは「Person」クラスのなので「Person」と表示するはず） バンドルやトランスパイルの過程でクラス名が短縮（ミニファイ）されてしまっていることが主な原因 らしいです。 とりあえずは開発ビルド「npm run build:dev」で回避できました。 ほかには webpack.config.jsを修正し // webpack.config.js module.exports = { mode: 'production', optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { keep_classnames: true, // ← クラス名を保持する

学習：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (6)

学習：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (7)

06. 関数を学ぼう

01. 関数定義

例)

function mixer(fruits) {
  return fruits + "ジュース";
}
const juice: string = mixer("リンゴ");
console.log(juice);
    

02. 関数の型注釈

引数と戻り値にデータ型を指定

function mixer(fruits: string): string {
  ...
}
    

戻り値を返さないことを明確にする場合は void型

      function hello(): void {
        ...
      }
    

任意のデータ型を指定する場合は any型 (基本的には使わない)

      function mixer(fruits: any): any {
        ...
      }
    

03. 引数の省略

引数の型注釈の右側に「=デフォルト値」を記述すると引数省略可能(デフォルト引数)となる

      function mixer(fruits: string = "りんご"): string {
        ・・・
      }
    

デフォルト引数は、省略できない引数よりも右側に置かなければならない
が、無理やりできないこともない

      function mixer(a: string = "りんご", b: string): string {
        ・・・
      }
      mixer(undefined, "ばなな");
  

04. 引数の分割代入

仮引数を[]で囲むと、実引数で渡した配列の要素が前から順番に代入される

      function mixer([a, b]: string[]): string {
        ・・・
      }
      mixer(["りんご", "ばなな" ,"みかん"]); // "みかん"は無視される
    

不要な要素の数だけカンマを記述すると、その部分に対応する実引数は破棄される

      function mixer([a, , b]: string[]): string {
        ・・・
      }
      mixer(["りんご", "ばなな" ,"みかん"]); // "ばなな"は無視される
    

分割代入にもデフォルト引数を指定可能

      function mixer([a, b, c = "ばなな"]: string[]): string {
        ・・・
      }
      mixer(["りんご", "みかｎ"]); // cには"ばなな"がはいる
    

引数全体を省略可能とするには、型注釈の右側に配列形式でデフォルト型を指定

      function mixer([a, b, c = "ばなな"]: string[] = ["あ", "い", "う"]): string {
    

05. 可変長引数

個数が決まっていない引数のこと

      function mixer(a: string, ...b: string[]) {
        let mix: string = a;
        for (const x of b) {
          mix += x;
        }
        return mix;
      }
      console.log(mixer("a","b","c","d")); // "abcd"
      console.log(mixer("a")); // "a"
    

※残余引数に値を指定しないと undefinedではなく空の配列となる

06. 関数式

関数を実行する方法は２つ
1. 関数の定義を宣言してから呼び出す方法

        function hello() {
          ...
        }
        hello();
      

2. 関数の定義を変数に代入してから呼び出す方法

        const hello = funtion() { // ← 関数式
          ...
        }
        hello(); // ← 関数オブジェクト
  

07. アロー関数

関数式をシンプルな書式で記述
ES6で拡張されたJavaScript構文

      // 従来の関数定義
      function hello(message) {
        console.log(message);
      }
      
      // 従来の関数式
      const hello = function(message) {
        console.log(message);
      }

      // アロー関数
      const hello = message => console.log(message)
    

1. キーワードfuntionの省略

        const hello = (message) {
          console.log(message);
        }
      

2. アロー演算子の追加

        const hello = (message) >= {
          console.log(message);
        }
      

3. ()の省略

        const hello = message >= {
          console.log(message);
        }
      

4. {}の省略

関数の処理が１行だけで済む場合は {} を省略可

        const hello = message >= console.log(message);
      

読みずらい場合は => の後ろで改行できる。(=>の前の改行は不可)

5. returnの省略

{}を省略した場合は式の値をreturnしたことになる

        // 従来の関数式
        const message = function() {
          return "hello";
        }
        
        // アロー関数
        const message = () => "hello"; // = return "hello";

        // {}を省略した場合はreturnが必須
        const hello = () => {return "hello";} //

        const hello = () => {"hello";} // エラーにはならなかった undefinedが返る
      

アロー関数の型注釈

      const mixer = (fruits: string): string => {
        ...
      }
    

引数の()を省略した場合は、引数も戻り値を型注釈が使えない

08. スコープ

・ローカルスコープ

・ブロックスコープ

・if文やfor文などの制御が及ぶ範囲

・関数スコープ

・関数の処理内容を記述する場所

・ローカル変数

・ローカルスコープで宣言した変数

・グローバルスコープ

・ローカルスコープに含まれない場所で宣言した変数

・一度宣言した変数を同じスコープ内で再度宣言することはできない

09. 型ガード

・変数の型を調べるには "typeof" を使う

・typeof x === "string"
・typeof x === "number" など

・型ガード関数

・戻り値の型注釈を「仮引数 is データ型」とする

function isString(x: string | number): x is string {
  return typeof x === "string";
}
function isNumber(x: string | number): x is number {
  return typeof x === "number";
}

---

学習, JavaScript, TypeScript

メモ：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (5)

05. 配列を学ぼう

01. 配列リテラル

[a, b, c, …, z]

new Array(x);

配列の型注釈：

let 変数名: データ型[];

let 変数名: Array<データ型>;

配列の型注釈＋ユニオン型：

let x: (number|string)[];

列挙型：

enum DayOfWeek{"Sun","Mon","Tue","Wed","Thu","Fri","Sat"}

02. 配列要素のアクセス

変数名[要素番号]

※要素番号は0～

03. 配列のアクセス制限

読み取り専用：

変数名] readonly データ型[];

04. 配列の分割代入

２つの変数値の交換：

let a:number=1;
let b:number=2;
[a,b] = [b,a];
    

途中の要素の取り出し：

const x:number[] = [1,2,3,4,5];
let[,,c,,e,f] = x;
console.log(c); // 3
console.log(e); // 5
console.log(f); // undefined
    

残りの要素(残余引数(Rest Parameters))

const x:number[] = [1,2,3,4,5];
let[a, ...b] = x;
console.log(a); // 1
console.log(b); // [2,3,4,5]
    

05. 配列のコピー

"..." = スプレッド構文
配列のコピー：

const x: number[] = [1,2,3];
const y:number[] = [...x];
const z:number[] = [...x, ...y];
console.log(y); // [1,2,3]
console.log(z); // [1,2,3,1,2,3]
    

※ "const y:number[] = x" だと値コピーではなく参照コピー

06. 配列要素の繰り返し

配列の長さ：

配列名.length

for or文：

for(let 変数名 of 配列名)

※for or文では型注釈が使えない

forEachメソッド：

配列名.forEach(関数(要素){ })

繰り返し中止：

break;

※forEachでは使用不可

07. 配列を操作するメソッド

push 末尾に要素を追加

配列名.push(要素, 要素, …);

pop 末尾の要素を削除しその要素を返す

値 = 配列名.pop();

shift 先頭から要素を削除しその要素を返す

値 = 配列名.shift();

unshift 先頭に要素を追加し追加後の要素数を返す

要素数 = 配列名.unshift(要素, 要素, …);

slice 指定した範囲の新しい配列を返す

配列(コピー) = 配列名.slice(開始位置, 終了位置);

join 指定した文字で配列要素を連結した文字列を返す

文字列 = 配列名.join(区切り文字);

reverse 配列要素の並び順を逆転

配列(破壊) = 配列名.reverse();

fill したいした範囲を指定した値に置換

配列名.fill(値, 開始位置, 終了位置);

includes 指定した要素が配列に含まれているか

boolean = 配列名.includes(検索値, 検索開始位置);

some 指定した条件を満たす要素が存在するか

boolean = 配列名.some(関数(要素, 要素番号, 元の配列));

forEach 配列の各要素に対して関数を実行

find 関数で指定した最初の要素を返す

値(無ければundefined) = 配列名.find(関数(要素, 要素番号, 元の配列));

findIndex 関数で指定した最初の要素位置を返す

位置 = 配列名.find(関数(要素, 要素番号, 元の配列));

filter 条件を満たす要素を集めた新しい要素を返す

配列(コピー) = 配列名.filter(関数(要素, 要素番号, 元の配列));

sort 要素の位置を並び替え

配列名.soft(比較関数(比較対象a, 比較対象b));

map 新しい配列を作成

配列(コピー) = 配列名.map(関数(要素,　要素番号, 元の配列));

indexOf 指定した要素と一致する最初の要素の位置を返す

位置 = 配列名.indexOf(検索値, 検索開始位置);

---

TypeScript

メモ：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (4)

04. 制御構文を学ぼう

01. 条件分岐(if文)

if(条件式) { } else { }

三項演算子：

条件式？真時の処理：偽時の処理

02. 条件分岐(switch文)

switch(式) {
　case 値1:
　　break;
　case 値2:
　　break;
　　：
　default:
　　break;
}

03. 反復(for文)

for(初期化式; 条件式; 加算式) { }

04.連外処理(try catch)

try {
　throw new Error(メッセージ)
} catch(e) {
　console.log(e.message);
}

---

TypeScript

メモ：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (3)

03. 変数とデータ型を学ぼう

01. ES6とは？

ES6 = ES2015
2015年以前のES5からの大幅な仕様変更 = 必須のスキル
2022年6月時点の最新はES13

02. 変数宣言

変数：

let 変数名 = 初期値;

let 変数名;
変数名 = 初期値;

何度でも値の代入可

let total = 2;
total = total + 3;

定数：

const 定数名 = 初期値;

値の再代入は不可

03. データ型

- オブジェクト型
- プリミティブ型

- 文字列型 (string)

ダブルクォートまたはシングルクォートで文字列を囲む
文字列中に同じ引用符が含まれる場合はバックスラッシュをつけてエスケープ
バッククォートで囲むと"テンプレートリテラル"となり改行、${式} の形で式や変数・定数を挿入可

- 数値型 (number)

・小数点可、"999_999_999"のように見やすく記述可
・NaN = 数値でない値 = 文字列から数値への変換ミス時に発生

- 長整数型 (bigint)

・numberの最大値を超えて任意の精度で表現できる
・数値の末尾に "n" を付ける ("2n**53n" = 2の53乗 など)
・少数は使えない
・bigintとnumberは一緒に計算不可

- シンボル型 (symbol)

・Symbol()関数を実行するとm内科医異なる値を生成

- 論理型 (boolean)

・"true"または"false"
・"Boolean型"はオブジェクト型

- undefined

・未定義を表す値

- null

・値が存在しないことを表す値
・プログラマが意図的に使わない限り発生しない

04. 型注釈

変数に代入できるデータ型を指定すること

let 変数名: データ型;

05. 列挙型

enum 列挙型名 {
メンバー1 = 値1,
メンバー2 = 値2,
：
}

値は省略可能。省略時は0から始まる連番が割り当てられる

使う場合は

列挙型名.メンバー1;
列挙型名.メンバー2;

06. ユニオン型

パイプ記号 "|" で区切ったデータのうち何れかを表す方注釈

let 変数名: データ型1 | データ型2;

let anyNumber: number;
anyNumber = 3.14; // (OK)
anyNumber = 3n; // (NG)

let anyNumber: number | bigint
anyNumber = 3.14; // (OK)
anyNumber = 3n; // (OK)
anyNumber = "3"; // (NG)

列挙型をユニオン型に変換する
例)

enum DayOfWeek {
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
}

type Week = keyof typeof DayOfWeek;
const oneDay: Week ="Fri";  // (OK)
// const oneDay: week = "X";  // (NG) 

07. リテラル型

特定の値だけを代入可能にする

let hello: "おはよう" = "おはよう"; // (OK)
// let hello: "おはよう" = "こんばんは"; // (NG)

ユニオン型と併用

let hello: "おはよう"|"こんにちは"|"こんばんは";
hello = "おはよう"; // (OK)
hello = "こんにちは"; // (OK)
hello = "こんばんは"; // (OK)
hello = "いただきます"; // (NG)
    

リテラル型とプリミティブ型と併用

let yes: "Yes"|true;
let no: "No": false;
let num: number|bigint|null;
let text: string|undefined;
    

08. 型エイリアス

変数名の前に "type" をつけると、プリミティブ型やリテラル型、ユニオン型などに別名をつけることができる

type 型名 = データ型;

type Bool = "True" | "False";

---

TypeScript

メモ：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (1)

01. TypeScriptとは

01. TypeScriptとは？
02. TypeScriptを学ぶメリット

02. 開発環境を設定しよう

01. 開発環境に何が必要？

・Node.js
・TypeScript
・VSCode

02. Node.jsのインストール
03. ターミナルを起動しよう
04. TypeScriptのインストール

インストール

npm install -g typescript

動作確認(バージョン確認)

tsc --version

TypeScriptのコンパイルオプション

--targetオプション (コンパイラのバージョン指定)

tsc ファイル名 --taret ES2022

--outFileオプション (ファイルの連結)
複数のtsファイルを単一のjsファイルにまとめる

tsc ファイル1 ファイル2 … --outFile jsファイル名

--watchオプション (更新を監視して自動コンパイル)
監視を終了するには[CTRL]+[C]

tsc ファイル名 --watch

05. 開発用エディターのインストール

VSCodeをインストールする
拡張機能をインストールする

・Prettier (コード整形機能)

インストールしたら [ファイル]-[ユーザー設定]-[設定]
"テキストエディター" -

"Default Formatter" = "Prettier -Code formatter"

"書式設定" -

"Format On …" = 好きなタイミングにチェックを付ける

・indent-rainbow (インデントの協調)
・zenkaku (全角スペース英数字の強調)
・Code Spell Checker (コードのスペルチェック機能)
・Auto Rename Tag (HTMLタグの入力補助機能)

正誤表

●130 ページ 「Point」内
【誤】 center の中身を書き換えても元の配列 list の内容は変わりません。
【正】 children の中身を書き換えても元の配列 family の内容は変わりません。
●135 ページ findIndex メソッドの「書式」
【誤】 Array.find(関数(要素, 要素番号, 元の配列))
【正】 Array.findIndex(関数(要素, 要素番号, 元の配列))
●137 ページ 「Point」内
【誤】 x の中身を書き換えても list の内容は変わりません。
【正】 x の中身を書き換えても score の内容は変わりません。

---

TypeScript

TypeScript：Node.jsプロジェクトの作成手順

TypeScript + Webpackを使ったプロジェクトの作成方法をメモ。

環境

仮想上のWindows11 Pro 22H2 (22621.1702)
Node.js 18.16.0
TypeScript 5.0.4

Node.jsプロジェクトの作成

プロジェクト名を "test02" とし、
C:\projects\typescript\test02 フォルダを作成する。
作成したtest02フォルダ上で [SHIFT]+[F10] → "Codeで開く" を実行。

「CTRL]+[@]でターミナルを起動しCommand Promptへ変更、以下コマンドを実行する。

npm init -y

実行結果：

    C:\projects\typescript\test02>npm init -y
    Wrote to C:\projects\typescript\test02\package.json:
    
    {
      "name": "test02",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
    
    
    C:\projects\typescript\test02>
  

package.jsonファイルが生成される。

TypeScriptの設定

次にTypeScript(@types/nodeというパッケージ)をプロジェクトに組み込む。

npm install typescript @types/node --save-dev

実行結果：

    C:\projects\typescript\test02>npm install typescript @types/node --save-dev

    added 2 packages, and audited 3 packages in 2s
    
    found 0 vulnerabilities
    
    C:\projects\typescript\test02>
  

TypeScript設定ファイルの作成

以下のコマンドを実行する。

tsc --init

実行結果：

    C:\projects\typescript\test02>tsc --init

    Created a new tsconfig.json with:                                                                                             
                                                                                                                         TS       
      target: es2016
      module: commonjs
      strict: true
      esModuleInterop: true
      skipLibCheck: true
      forceConsistentCasingInFileNames: true
    
    
    You can learn more at https://aka.ms/tsconfig
    
    C:\projects\typescript\test02>    
  

tsconfig.jsonというファイルが生成される。

Webpack設定ファイルの作成

必要なファイルをまとめて公開するアプリをパッケージするためのWebpackというソフトウェアをインストールする。

npm install webpack ts-loader @webpack-cli/generators

実行結果：

    C:\projects\typescript\test02>npm install webpack ts-loader @webpack-cli/generators
    npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
    npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
    
    added 614 packages, and audited 617 packages in 36s
    
    74 packages are looking for funding
      run `npm fund` for details
    
    found 0 vulnerabilities
    
    C:\projects\typescript\test02>    
  

Webpackの初期化

Webpackの初期化を行う。

npx webpack-cli init

質問が表示されるので順次入力していく。
・Which of the following JS solutions do you want to use?

→ TypeScript

・Do you want to use webpack-dev-server?
　(Webpackの開発サーバーを追加するか？)

→ Enter (Yes)

・Do you want to simplify the creation of HTML files for your bundle?
　(簡略化したHTMLファイルを生成するか？)

→ Enter (Yes)

・Do you want to add PWA support?
　(PWAをサポートするか？)

→ Enter (Yes)

・Which of the following CSS solutions do you want to use?
　(CSS関連ソリューションの選択)

→ 今回は "none" (使わない)

・Do you like to install prettier to format generated configuration?
　(設定ファイルを見やすくする？)

→ Enter (Yes)

・Pick a package manager:
　(使用するパッケージマネージャは？)

→ 今回は "npm"

・Overwrite package.json?
　(Package.jsonを上書き保存する？)

→ "y" を入力 (保存する)
→ "Overwrite" を選択

これで以下のフォルダ・ファイルが作成される。
・Srcフォルダ
・index.html
・README.md
・webpack.config.js
作成するTypeScriptのファイルはSrcフォルダに作成してく。
→ 「webpack：webpack.config.jsファイルの説明」

---

学習 TypeScript

TypeScript：#1 はじめてのTypeScript

Visual BasicプログラマーがTypeScriptを使ってみる。
※ 参考：書籍：TypeScriptハンズオン

環境

仮想上のWindows 11 Pro 22H2 (22621.1702)
Visual Studio Code 1.78.2
Node.js 18.16.0 LTS

※ (2024.04.13) 現在の環境 [2版]
Windows 11 23H2 22631.3447
Visual Studio Code 1.88.0
Node.js v20.12.2 LTS

Node.jsインストール

Node.jsをインストールしておく。
※ 手順：Node.js：インストールする

環境構築の準備

TypeScript開発環境(ソースなど)を置くディレクトリを C:\projects\typescript とした。(どこでも良い)
さらに、今回作成するTypeScriptプログラムを格納するサブフォルダ "test01" とし上記フォルダ配下に作成。
※ つまり "C:\projects\typescript\test01"

エクスプローラーで C:\projects\typescript フォルダを開き、test01フォルダ上で [SHIFT]+[F10] を押し、表示されたポップアップメニューより "codeで開く" を選択する。
※ test01フォルダ上で [SHIFT] 押しながら右クリック で "codeで開く" の方が早いかも [2版]
これで test01 フォルダでVSCodeが開く。

VSCodeで [CTRL]+[@] を押す。これでターミナルが開く。
既定だとPowerShellで起動するので Command Prompt へ切り替える。
※ PowerShellだとセキュリティのチェックにより実行できないコマンドがあるため。

TypeScriptインストール

VSCode上のターミナル(コマンドプロンプト)で以下コマンドを実行。

npm install typescript -g

実行結果：

    C:\projects\typescript\test01>npm install typescript -g

    added 1 package in 1s
    
    C:\projects\typescript\test01>
  

※ (2024.04.13) コマンド実行したところ以下のメッセージが表示された。[2版]

added 1 package in 935ms
npm notice
npm notice New patch version of npm available! 10.5.0 -> 10.5.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
npm notice Run npm install -g npm@10.5.2 to update!
npm notice
  

メッセージの通り "npm install -g npm@10.5.2" のコマンドを実行

D:\study\typescript\test01>npm install -g npm@10.5.2

added 1 package in 3s

25 packages are looking for funding
  run `npm fund` for details

そして TypeScriptのインストールでうまくいった。

D:\study\typescript\test01>npm install typescript -g

changed 1 package in 905ms
  

TypeScriptのバージョン(トランスコンパイラ)のバージョンを確認

tsc --v

実行結果：

    C:\projects\typescript\test01>tsc --v
    Version 5.0.4
    
    C:\projects\typescript\test01>    
  

※ (2024.04.13) 実行結果： [2版]

    D:\study\typescript\test01>tsc --v
    Version 5.4.5
  

簡単はTypeScriptを書いてみる

C:\projects\typescript\test01\test01.ts ファイルを作成し以下のコードを書く。

    console.log("welcome to typescript")
  

トランスコンパイルするには以下コマンドを実行。

tsc test01.ts

そうすると test01.js ファイルが作成される。
作成したjsファイルの実行は以下コマンドにて行う。

node test01.js

実行結果：

    C:\projects\typescript\test01>node test01.js
    welcome to typescript
    
    C:\projects\typescript\test01>    
  

---

学習 TypeScript
[2版] 2024.04.13 06:28

Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #2

※ 前回記事：Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #1

p002-ts-basicサンプルの実行手順

1. TypeScript環境構築

p002-ts-basicのサンプルフォルダをコマンドプロンプト(PowerShell)で開き
"npm install --savedev typescript" でインストールする
手順は以下blogにまとめた
※ TypeScript：環境構築手順

2. コンパイルと実行

初回は "npm run tsinit" でtsconfig.json ファイルを作成
次に "npm run build" でコンパイル(jsファイルの作成)を行い
"npm run serve" で実行する

---

学習, Vue.js, TypeScript

TypeScript：環境構築手順

(2023.05.26)
もう一度はじめからやってみたので以下記事を参照
→ TypeScript：はじめてのTypeScript

以下サイトの学習中
※ 「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう：CodeZine（コードジン）
この記事中で出てくるTypeScriptの環境構築手順を忘れないようにメモ

環境

Windows 10 21H1 (19043.1348)
Node.js 14.17.0
npm 6.14.13

PS C:\work\VueSample\p002-ts-basic> node -v
v14.17.0
PS C:\work\VueSample\p002-ts-basic> npm -v
6.14.13
  

環境準備

コマンドプロンプトでプロジェクトのフォルダを開き "npm install --save-dev typescript"
※ "--save-dev" は開発時に利用するパッケージとしてインストールすることを表す

PS C:\work\VueSample\p002-ts-basic> npm install --savedev typescript
npm WARN p002-ts-basic@1.0.0 No description
npm WARN p002-ts-basic@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ typescript@4.4.4
added 195 packages from 253 contributors and audited 196 packages in 31.211s

6 packages are looking for funding
  run `npm fund` for details

found 9 vulnerabilities (8 moderate, 1 high)

    ╭───────────────────────────────────────────────────────────────╮
    │                                                               │
    │     New major version of npm available! 6.14.13 -> 8.1.3      │
    │   Changelog: https://github.com/npm/cli/releases/tag/v8.1.3   │
    │               Run npm install -g npm to update!               │
    │                                                               │
    ╰───────────────────────────────────────────────────────────────╯ 
  

コンパイル

package.jsonの "script"キーに以下3つの文字列キーを追加

"scripts": {
  "tsinit": "tsc --init",
  "build": "tsc",
  "serve": "lite-server"
},
  

これによりnpm runで tsinit、build、serveのコマンドが使えるようになる。

1. npm run tsinit

tsconfig.jsonファイルを作成する
このファイルが存在しない場合(初めの一回目)に実行する

2. npm run build

プロジェクトに含まれるTypeScriptファイル(拡張子がts)のファイルをjsファイルに変換する

3. npm run serve

lite-serverを起動してWebページを表示する

---

TypeScript

Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #1

以下記事をやってみようとしたが、サンプルの実行方法がパッと浮かばなかったのでメモ
※ 「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう：CodeZine（コードジン）

環境

Windows 10 21H1 (19043.1288)
この記事でインストールするライブラリ
・Node.js 14.17.0

サンプル実行手順

1. Node.jsインストール

以下の過去blogを参考に Nodist を使ってNode.jsをインストールする。
※ Node.js：Nodistインストール

1. Nodistインストール
2. コマンドプロンプトでNode.js 14.17.0をインストール

nodist + 14.17.0
nodist 14.17.0

実行例：

C:\Users\user>nodist + 14.17.0
14.17.0

C:\Users\user>nodist 14.17.0
14.17.0
14.17.0 (global)

2. サンプルプログラム配置

ダウンロードした VueSample.zip を解凍しC:\Work へ配置

3. ライブラリインストール

コマンドプロンプトを起動、サンプルプログラムのパスに移動したのち
記事の通り "npm install" コマンドでライブラリをインストールする

C:\work\VueSample\p001-vue-basic>npm install
npm WARN npm npm does not support Node.js v14.17.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-11-10T03_31_51_551Z-debug.log
      

エラーとなってしまった。

npmバージョン不一致が原因らしい。
※ Node.js：cb.apply is not a function

"nodist npm match" コマンドでnpmをインストール

C:\work\VueSample\p001-vue-basic>nodist npm match
npm match
https://codeload.github.com/npm/cli/tar.gz/v6.14.13 [===============] 5655/5834 KiB 96% 0.0s
      

あらためて "npm install" コマンドを実行

C:\work\VueSample\p001-vue-basic>npm install
npm WARN p001-vue-basic@1.0.0 No description
npm WARN p001-vue-basic@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 194 packages from 252 contributors and audited 195 packages in 23.776s

6 packages are looking for funding
  run `npm fund` for details

found 9 vulnerabilities (8 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
      

4. サンプル実行

"npm run serve" コマンドで実行
ブラウザが勝手に開いてサンプルが実行される。

動作問題なし

※ 次回記事：Vue.js：「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう #2

---

学習, Vue.js, TypeScript

完：Link：TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

※ 前回記事：MongoDB Realmでモバイルアプリ開発を試してみよう!
※ 記事一覧
※ Vue.js 記事一覧

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

既読日	No	記事日付	内容
2021.11.16	3	2021.10.07	話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
2021.11.15	2	2021.10.01	コマンドラインツール「Vue CLI」で本格的なVue.jsプロジェクトを作成しよう
2021.11.14	1	2021.07.09	「Vue.js」入門 JavaScriptフレームワークをTypeScriptで学ぼう

※ 次回記事：Elasticsearch＋Hadoopベースの大規模検索基盤大解剖

---

学習リンク, JavaScript, TypeScript, Vue.js