Angular、TypeScript、Sublime Text 3 の連携：フロントエンド開発をパワーアップ

Sublime Text 3 で TypeScript サポートを取得する方法

手順

1. Package Control をインストール
   

   • Sublime Text 3 を開き、Ctrl+Shift+P または Cmd+Shift+P を押してコマンドパレットを開きます。
   • Package Control: Install Package と入力し、Enter キーを押します。

2. TypeScript パッケージをインストール
   

   • 検索バーに TypeScript と入力し、Enter キーを押します。
   • TypeScript パッケージを選択し、Install ボタンをクリックします。

3. Sublime Text 3 を再起動
   

   • Sublime Text 3 を再起動して、変更を適用します。

TypeScript サポートが有効になったことを確認するには

1. 新しい .ts ファイルを作成します。
2. ファイルを開き、TypeScript コードを入力します。
3. Sublime Text 3 は、コードの補完、構文チェック、デバッグなどの機能を提供します。

• TypeScript デバッガーを有効にするには、Preferences > Packages > TypeScript > Settings に移動し、enableDebugServer オプションを true に設定します。

• Sublime Text 3 は、Windows、Mac、Linux で利用できます。
• Sublime Text 3 は、無料でオープンソースのテキストエディタです。
• Sublime Text 3 には、TypeScript に加えて、JavaScript、HTML、CSS などの他の言語のサポートも含まれています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My App';

  constructor() {
    console.log('Hello from TypeScript!');
  }
}

<h1>{{ title }}</h1>

h1 {
  color: red;
}

このコードは、次のことを行います

1. AppComponent という名前のコンポーネントを定義します。
2. コンポーネントのテンプレートを app.component.html ファイルに設定します。
3. コンポーネントのタイトルを My App に設定します。
4. コンポーネントのコンストラクタで、Hello from TypeScript! というメッセージをコンソールに出力します。

このコードを実行するには

1. Sublime Text 3 で新しいプロジェクトを作成します。
2. 上記のコードを app.component.ts、app.component.html、app.component.css というファイルに保存します。
3. ng serve コマンドを実行して、Angular 開発サーバーを起動します。
4. ブラウザで http://localhost:4200 にアクセスすると、My App というタイトルが表示されます。

• Sublime Text には、Package Manager と呼ばれるビルトインのパッケージ管理ツールが付属しています。Package Manager を使用して、TypeScript パッケージを簡単にインストールできます。

手動でインストールする

• TypeScript パッケージを手動でダウンロードしてインストールすることもできます。

1. 最新の安定版リリースを見つけて、オペレーティングシステムに合ったインストーラーをダウンロードします。
2. ダウンロードしたインストーラーを実行して、TypeScript パッケージをインストールします。

Git リポジトリからクローンする

• TypeScript パッケージを Git リポジトリからクローンすることもできます。

1. ターミナルを開き、次のコマンドを実行します。

git clone https://github.com/microsoft/TypeScript.git

1. Sublime Text 3 で、TypeScript フォルダーを開きます。
2. Packages > Add Folder to Packages に移動し、TypeScript フォルダーを選択します。