用途
新着
履歴
言語


TypeScript 編集とコンパイル

TypeScript 編集とコンパイル
TypeScript 編集とコンパイル
TypeScriptの基本的な編集とコンパイルのメモ書きです。

TypeScriptは、コンパイルして、JavaScriptを生成する言語です。

詳しくはウィキ参考サイトをご参照ください。

TypeScriptを編集するときの基本的な作業のメモ書きをまとめました。

以下Macのターミナルで実行することを前提としたコマンドの事例です。

まずはTypeScriptとtscのインストールが必要です。

TypeScriptのインストールする時

npm i -g typescript

グローバルのTypeScriptをアップデートする

npm update -g typescript

TypeScriptのバージョンを確認する(インストールしたら忘れた時)

npm -v typescript

TypeScriptをコンパイルするツール「tsc」をインストールする時

npm install -g tsc

tscのバージョンを確認するとき(インストールしたら忘れた時)

tsc -v

そして、TypeScriptのファイルを作成します。

用意するTypeScriptのファイル index.ts

function greeter(person: string) {
    return "がんばるぞ、" + person;
}

let user = "TypeScript初心者";

let hoge = document.getElementById('demo_id')

hoge.textContent = greeter(user);

このファイルを任意のディレクトリにおきます。

以下のコマンドを叩くと同ディレクトリにindex.jsが生成されます。

tsc index.ts 

違うディレクトリにコンパイルしたい場合は以下です。

tsc index.ts --outDir [ディレクトリ名]

さらに.tsファイルを保存した時に、連動してコンパイルすることも可能です。(便利)

tsc index.ts --outDir [ディレクトリ名] -w

例えば「js」というディレクトリ配下にコンパイルしたとします。

tsc index.ts --outDir js

そしたらそのJSを読み込むHTMLファイルを作成しましょう。

<!DOCTYPE html>
<html>
    <head>
        <title>TypeScriptのコンパイル練習</title>
        <meta charset="UTF-8" />
    </head>
    <body>
            <div id="demo_id">test</div>
            <script src="js/index.js"></script>
    </body>
</html>

これをindex.htmlとして、index.tsと同じディレクトリに置いて、ブラウザで参照してみます。

するとブラウザに「がんばるぞ、TypeScript初心者」という文字が表示されたら成功です。

公開 : 2019-08-12 16:12:02
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top