備忘録 Web：Typescript①
※調べた内容を後日見返せるように本記事を作成しています。
Typescriptに関する備忘録を残す。
今回は以下の項目で説明を行う。
- Typescriptとは
- TypescriptとJavascriptの違い
- 環境開発の流れ
Typescriptとは
Javascriptを拡張して開発されたプログラム言語
2012年10月にMicrosoftが公開
Javascriptと互換性が高く、大規模開発でもエラーを防ぐように設計されている
Javascriptの機能のほかに、省略も可能な静的型付け(※1)とクラスベースオブジェクト指向(※2)を加えた言語となっている。
※1 値やオブジェクトの型安全性を、コンパイル時に検証するという方法
※2 クラスを定義し、それを元にインスタンスを生成するスタイルのオブジェクト指向
オブジェクト指向とは、モノとモノとの関係性を定義することでシステムを作る考え方
TypescriptとJavascriptの違い
Javascriptは実行するまでエラーを確認できないが、Typescriptでは、あらかじめ変数の型を定義する静的型付けを行うことで、未然にエラーを発見できる。
ただし、開発時はJavascriptのフレームワークを使用することが多いため、完全に無視できるわけではない。
環境開発の流れ
-
PC環境を整える
公式サイトからNode.jsをインストールする。
[https://nodejs.org/en/download] -
Typescriptをインストール
コマンドプロンプトやターミナルなどを開き、以下2つを実行する。
$ npm install -g ts-node
$ npm install -g typescript
インストール確認として以下コマンドを実行する。
tsc -v
成功時は「Version x.x.x」と出力される。
- Typescriptを実行
Typescriptを使用して、「Hello World!」を出力する。
下記ソースコードをhelloworld.tsというファイルに記述する。
helloworld.ts
const hello:string = 'Hello World!';
console.log(hello);
下記コマンドを実行し、コンパイルを実行する。
tsc helloworld.ts
「helloworld.js」というファイルが作成されていれば成功
jsファイルの実行コマンドを実行する。
node helloworld.js
下記内容が出力されていれば成功
Hello World!
-
プロジェクトフォルダ作成
TypeScriptで開発を行うためにすることが開発環境の構築が必要なため、フォルダを作成する。
ここでは「test1」というフォルダを作成する。
コマンドプロンプトやターミナルなどで以下を実行してフォルダを作成する。
$ mkdir test1
$ cd test1
$ npm init -y -
ツール類のインストール
開発で必要なWebpackなどのツールをインストールする。
$ npm install --save-dev typescript
$ npm install --save-dev ts-node-dev
$ npm install -D typescript @types/node -
設定ファイルの準備
以下2つのファイルを設定する。
・package.json
・tsconfig.json
package.json
「npm start」コマンドが使えるようにするための設定を記述する。
書き込む前の内容は以下の通り
{
"devDependencies": {
"@types/node": "^20.12.2",
"ts-node-dev": "^2.0.0",
"typescript": "^5.4.3"
},
"name": "y",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"acorn": "^8.11.3",
"acorn-walk": "^8.3.2",
"anymatch": "^3.1.3",
"arg": "^4.1.3",
"balanced-match": "^1.0.2",
"binary-extensions": "^2.3.0",
"brace-expansion": "^1.1.11",
"braces": "^3.0.2",
"buffer-from": "^1.1.2",
"chokidar": "^3.6.0",
"concat-map": "^0.0.1",
"create-require": "^1.1.1",
"diff": "^4.0.2",
"dynamic-dedupe": "^0.3.0",
"fill-range": "^7.0.1",
"fs.realpath": "^1.0.0",
"function-bind": "^1.1.2",
"glob": "^7.2.3",
"glob-parent": "^5.1.2",
"hasown": "^2.0.2",
"inflight": "^1.0.6",
"inherits": "^2.0.4",
"is-binary-path": "^2.1.0",
"is-core-module": "^2.13.1",
"is-extglob": "^2.1.1",
"is-glob": "^4.0.3",
"is-number": "^7.0.0",
"make-error": "^1.3.6",
"minimatch": "^3.1.2",
"minimist": "^1.2.8",
"mkdirp": "^1.0.4",
"normalize-path": "^3.0.0",
"once": "^1.4.0",
"path-is-absolute": "^1.0.1",
"path-parse": "^1.0.7",
"picomatch": "^2.3.1",
"readdirp": "^3.6.0",
"resolve": "^1.22.8",
"rimraf": "^2.7.1",
"source-map": "^0.6.1",
"source-map-support": "^0.5.21",
"strip-bom": "^3.0.0",
"strip-json-comments": "^2.0.1",
"supports-preserve-symlinks-flag": "^1.0.0",
"to-regex-range": "^5.0.1",
"tree-kill": "^1.2.2",
"ts-node": "^10.9.2",
"tsconfig": "^7.0.0",
"undici-types": "^5.26.5",
"v8-compile-cache-lib": "^3.0.1",
"wrappy": "^1.0.2",
"xtend": "^4.0.2",
"yn": "^3.1.1"
},
"description": ""
}
「scripts」を以下内容に設定する。
"scripts": {
"test" : "echo \"Error: no test specified\" && exit 1",
"start": "ts-node-dev --respawn --transpile-only src/index.ts"
},
tsconfig.json
tsconfig.jsonファイルはないため、以下コマンドにて作成する。
npx tsc --init
以下コードがコメントアウトされていないかのみ確認する。
{
"compilerOptions": {
"target": "es2018", // コンパイルする ECMAScript のバージョン
"module": "commonjs", // モジュールシステム
"rootDir": "./src", // ソースファイルが置かれているディレクトリ
"outDir": "./dist", // トランスパイルされたファイルを出力するディレクトリ
"esModuleInterop": true, // default exportを使用するための設定
"strict": true // 厳格な型チェックオプション
},
"include": ["src/**/*"], // コンパイルするファイルのパターン
"exclude": ["node_modules"] // コンパイルから除外するファイル
}
- Typescriptを作成する
設定が完了したため、簡単なプログラムを作成する。
まず、「test1」フォルダ直下に作っていきます。ここでは「src」を作成する。
次に「src」フォルダ直下に「index.ts」を作成し、以下コードを記述する。
import {Item} from './item';
var dog = new Item('ハチ公',8);
dog.say();
次に「src」フォルダ直下に「Item」クラスを記述する、「item.ts」を作成し、以下コードを記述する。
export class Item {
constructor(private name:string, private age:number){}
public say() : void {
console.log('家で飼っている犬の名前は' + this.name + 'です。年齢は' + this.age + '才になりました。');
}
}
- 実行確認
以下コマンドを実行し、実行結果を確認する。
$ npm start
標準出力に以下内容が出力されることを確認する。
家で飼っている犬の名前はハチ公です。年齢は8才になりました。
以上が、Typescriptに関する内容と環境構築手順となる。