# TypeScriptのコンパイル

`ts_practice`ディレクトリ内、`index.ts`ファイルを作成します。

TypeScriptはJavaScriptの拡張言語ですので、JavaScriptのコードをそのまま記載できます。

以下のように記述してみましょう。

{% code title="index.ts◎" %}

```typescript
console.log('こんにちは');
```

{% endcode %}

TypeScriptはこのままでは実行することができないので、JavaScriptにコンパイルしましょう。

コンパイルするには、`tsc`コマンドを使用して、コンパイルしたいファイル名を指定します。

Warpを開いて、以下コマンドを実行します。

```bash
tsc index.ts
```

`ts_practice`ディレクトリを確認すると`、index.js`ファイルが作成されており、このように記述されているかと思います。

{% code title="index.js" %}

```javascript
console.log('こんにちは');
```

{% endcode %}

これはtsファイルにて、JavaScriptの文法しか使用していないため、中身が全く同じjsファイルが作成されます。

次に`index.ts`を以下のように書き換えてみます。

{% code title="index.ts" %}

```typescript
let num: number = 10;
num = 'a';
```

{% endcode %}

変数の定義は上記のように、`let num`の後に`: 型`として、型を宣言し値を代入します。

もし以下のように`num`に別の型の値を入れようとすると、`num`の下に赤波線が引かれ、ホバーするとエラー分が表示されるかと思います。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FVJmMJFxbjej4OhvmJEM1%2Fts1.png?alt=media&#x26;token=e1d822a9-ab9a-4c31-bc2b-8386e9d2903d" alt=""><figcaption></figcaption></figure>

静的型付け言語はこのように、コーディング時点で型チェックを行い、エラーを検知してくれます。

では2行目を削除しましょう。

{% code title="index.ts" %}

```javascript
let num: number = 10;
```

{% endcode %}

この状態でコンパイルをしてみます。

```bash
tsc index.ts
```

index.jsに以下のように記述されているかと思います。

{% code title="index.js" %}

```javascript
var num = 10;
```

{% endcode %}

`var`はJavaScriptのチャプターで説明しなかったですが、昔の変数の定義に使用していたもので、現在は基本的に使用しないので、気にしなくて大丈夫です。要は`let num = 10;`と変換され、TypeScriptの構文がなくなります。