TypeScript インストール HelloWorld 表示

今回は、TypeScriptをインストールして、HelloWorldを表示させるメモとなります。

 

環境

・OS:mac OS Catalina 10.15.6

インストール

公式ページのGetStartedに、インストール方法が記載されています。

こちらの説明通りに実行を行います。

npm install -g typescript

https://www.typescriptlang.org/ja/#installation

npmのインストールについては、以下を参考に頂ければと思います。

mac Node.js 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を実装する際には、重宝した経験がありますので、

こまめにメモしていきたいと思います。

 

 


都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 139

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る