今回は、TypeScriptをインストールして、HelloWorldを表示させるメモとなります。
目次
環境
・OS：mac OS Catalina 10.15.6
インストール
公式ページのGetStartedに、インストール方法が記載されています。
こちらの説明通りに実行を行います。
npm install -g typescript
https://www.typescriptlang.org/ja/#installation
npmのインストールについては、以下を参考に頂ければと思います。
npm install 実行エラー
早速、手順通りに実行するとエラーが発生してしまいました。。。
エラー内容を確認すると、ディレクトリの権限周りでエラーになっているようです。
実行ユーザーの権限と、エラーになっているnode_modulesディレクトリ周りを確認したところ、
書込み権限がありませんでした。
chmodコマンドでディレクトリの権限を調整して、
sudo chmod 777 /usr/local/lib/node_modules/
管理者権限で実行したところ、無事インストールする事ができました。
HelloWorld プログラム作成
拡張子が.tsとなるファイルを作成して、以下の内容で保存します。
console.log("HelloWorld! TypeScript.");
HelloWorld プログラム コンパイル 実行
以下のコマンドで、作成したプログラムをコンパイルして、jsファイルを生成します。
tsc HelloWorld.ts
・NodeJsで実行
NodeJsで実行する場合は、以下の要領で実行します。
node HelloWorld.js
・HTMLファイルに読み込ませて、ブラウザで実行
htmlファイルに読み込ませて確認する場合、
以下のように、一般的なJavaScriptファイルと同じ要領で読み込みを行います。
<html>
<head>
<title>HelloWorld.html</title>
<script type="text/javascript" src="HelloWorld.js"></script>
</head>
<body>
<h1>HelloWorld.html</h1>
<h1>include HelloWorld.js</h1>
</body>
</html>
作成したHtmlファイルをブラウザで表示させます。
そして、右クリックメニューの検証をクリックします。
開発者ツールのConsole部分を確認して、HelloWorldが表示されていれば、正常に動作しています。
今回のメモは以上となります。
最近は、JavaScriptの代わりにTypeScriptを採用する案件も増えてきました。
特に大規模のJavaScriptを実装する際には、重宝した経験がありますので、
こまめにメモしていきたいと思います。
