TypeScript Playgroundの使い方

TypeScript Playgroundとは

公式が提供している Web で TypeScript を手軽に試すことができる実行環境です。

TypeScript Playgroundの使い方

TypeScript Playground にアクセスすれば、すぐに使い始めることができます。

プログラムの実行結果を確認する

Playground にアクセスできたら、早速コードを実行してみましょう。
次のサンプルコードを Playground のエディターに入力します。
1
function add(a:number, b:number) {
2
return a + b;
3
}
4
5
console.log(add(1, 2));
Copied!
入力が終わったらエディターの上部にあるRUN をクリックして、コードを実行できます。
実行後は右側の Logs のタブで実行結果が確認できます。

JavaScriptのコンパイル結果を確認する

TypeScript を書いていると実際に生成される JavaScript のコードを確認したい時があると思います。そんな時は、右側の .JS タブを開くことで生成される JavaScript のコードを確認することができます。
試しに TypeScript 固有の機能である enum のコンパイル結果を確認してみます。
エディターに次のコードを入力して .JS タブを開いてみてください。
1
enum Color {
2
RED = 'red',
3
BLUE = 'blue',
4
GREEN = 'green'
5
}
6
7
console.log(Color.RED);
Copied!
TypeScript が enum を どのように JavaScript へコンパイルしているか簡単に確認することができます。

コンパイルエラーの確認方法

次のサンプルコードをエディター上で入力してみてください。エディター上に表示される赤の波線にマウスオーバーをすることでリアルタイムにコンパイルエラーを確認することができます。
1
let value = '1';
2
value = 1;
3
value = true;
Copied!
また、エディターでマウスオーバーをする以外にも右側の Errors タブを表示して、すべてのエラーを一覧で確認することができます。

型定義の確認方法

.D.TS タブを開くことでエディターのコードから生成される型定義を確認することができます。
1
// コード
2
function add(a:number, b:number) {
3
return a + b;
4
}
5
6
// .D.TSの出力
7
declare function add(a: number, b: number): number;
Copied!

書いたコードを共有する

↓のURLを開いてみてください。エディターにコードが入力された状態で TypeScript Playgournd が表示されます。
TypeScript Playground はページのURLを共有するだけで書いたコードを他の人に共有することができます。
これは
    1.
    エディターのコードを文字列圧縮ライブラリで圧縮して文字列をURLに設定する
    2.
    URLを共有する
    3.
    共有されたURLが開かれる時に圧縮された文字列をデコードしてエディターに展開する
という仕組みでコードが共有されています。
新規で Playground を開き上記のリンク先と同じコードをエディターに入力すると、同じURLが生成されるのを確認できます。

色々な形式でコードを共有する

上部のExport タブから色々な形式でコードを共有するためのテキストを出力することができます。
例えば Copy as Markdown Link with Preview を選択した場合は次のような形式のテキストを出力することができます。
1
```
2
function add(a:number, b:number) {
3
return a + b;
4
}
5
```
6
7
[Playground Link](https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABAQwCaoBTIFxhAWwCMBTAJwBpFDcCTSBKRAbwFgAoRTxU4qEUpMkQBqKgG52AX3bsICAM5wANsQB0SuAHMs6DAEZKAJnr0xQA)
Copied!

TypeScript Playgroundの設定方法

TypeScript のバージョンの設定

左上のバージョンが記載されたタブをクリックすることで、実行する Type Script のバージョンを変更することができます。
デフォルトでは TypeScript のバージョンは 4.1 以上なので、次のサンプルコードはコンパイルエラーが発生しません。
バージョンを 4.1 未満に変更してみてください。TypeScript のバージョンが変更されたことで Template Literal Types が非対応となりコンパイルエラーが発生するのが確認できます。
1
type LocaleLang = 'en' | 'ja' | 'fr';
2
type LocaleId = `locale_${LocaleLang}`;
Copied!

TS Config の設定

画面上部の TS Config のタブをクリックすることで TS Config の設定をすることができます。
次のサンプルコードをエディターに入力して、出力される JavaScript のコードを.JSで確認をするとデフォルトでは `
1
export function add(a:number, b:number) {
2
return a + b;
3
}
Copied!
Playground の初期設定では module: 'esnext'が選択されているので、次の出力結果になります。
1
export function add(a, b) {
2
return a + b;
3
}
Copied!
TS Config タブを開き Module の設定を CommonJS に変更をしてみます。TS Config の設定が変更されて CommonJS 形式で出力される JavaScript のコードを確認することができます。
1
"use strict";
2
Object.defineProperty(exports, "__esModule", { value: true });
3
exports.add = void 0;
4
function add(a, b) {
5
return a + b;
6
}
7
exports.add = add;
Copied!
最終更新 7d ago