【TypeScript】環境構築の紹介と詳細手順

TypeScriptとの出会い

TypeScript が何を行い、どのような問題を解決するかは既にわかっていますが、TypeScript とは何かを完全に理解する必要がありますか?

TypeScript を知る

GitHub と公式ウェブサイトで TypeScript 自体の定義を見てみましょう。

GitHub 说法: TypeScript は JavaScript のスーパーセットであり、コンパイルしてクリーンな JavaScript 出力を生成します。

TypeScript 官网: TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型指定されたスーパーセットです。

これら 2 つの場所は、翻訳すると同じことを意味します。TypeScript は、プレーンでクリーンな完全なJavaScript コードにコンパイルされるJavaScriptの型指定されたスーパーセットです。

上記の言葉をどのように理解しますか？

TypeScriptは JavaScript の拡張バージョンと考えることができます。

TypeScript は JavaScript のすべての機能をサポートし、ECMAScript 標準に準拠しているため、ES6、ES7、ES8 およびその他の新しい構文標準がサポートされています。

また、言語レベルでは、型の制約を追加するだけでなく、列挙型 (Enum)、タプル型 (Tuple) などの構文拡張も含まれます。

新しい機能を実装している間、TypeScript は常に ES 標準と歩調を合わせており、さらにはそれをリードしています。

TypeScript は最終的に JavaScript コードにコンパイルされるため、互換性について心配する必要はなく、コンパイル時に Babel などのツールに頼る必要もありません。

したがって、TypeScript はより強力な JavaScript であると理解できます。これは、JavaScript をより安全にするだけでなく、多くの便利で便利な機能をそれにもたらします。

TypeScript の機能

TypeScriptの公式の特徴の説明、とても良いと思います（一部の公式は理解していますが）、一緒に共有しましょう

JavaScript で始まり、JavaScript に属する

TypeScript は、今日の何百万人もの JavaScript 開発者になじみのある構文とセマンティクスから始まりました。一般的な JavaScript ライブラリを含む既存の JavaScript コードを使用し、JavaScript コードから TypeScript コードを呼び出します。

TypeScript は純粋で簡潔な JavaScript コードをコンパイルでき、任意のブラウザー、Node.js 環境、および ECMAScript 3 (またはそれ以降) をサポートする任意の JavaScript エンジンで実行できます。

TypeScript は大規模なプロジェクトを構築するための強力なツールです

型により、JavaScript 開発者は効率的な開発ツールと、JavaScript アプリケーションの開発時に静的チェックやコード リファクタリングなどの一般的な操作を使用できます。

型はオプションであり、型推論により、一部の型注釈がコードの静的検証に大きな違いをもたらすことができます。型を使用すると、ソフトウェア コンポーネント間のインターフェイスを定義し、既存の JavaScript ライブラリの動作を把握できます。

高度な JavaScript がある

TypeScript は、ECMAScript 2015 の機能や、非同期関数やデコレーターなどの将来の提案を含む最新の進化する JavaScript 機能を提供し、堅牢なコンポーネントの構築を支援します。

これらの機能は、信頼性の高いアプリケーションを開発するときに利用できますが、簡潔な ECMAScript3 (またはそれ以降) の JavaScript にコンパイルされます。

TypeScript が現在多くの場所で使用されているのは、これらの機能のためです。

Angular のソース コードは非常に早い段階で TypeScript を使用して書き直されており、Angular の開発には TypeScript の習得も必要です。

Vue3 のソース コードも TypeScript を使用して書き換えられています. ソース コードを読むと、多くの TypeScript 構文が表示されます。

最も人気のあるエディターである VSCode の組み込みも、TypeScript を使用して行われます。

React で使用されている ant-design UI ライブラリを含め、TypeScript で大量に記述されています。

現在、Vue3+TypeScript および React+TypeScript の開発モードは社内で非常に人気があります。

アプレットの開発を含め、TypeScript もサポートしています。

大きなフロントエンド開発トレンド

現在、フロントエンドで学ぶべきことがどんどん増えており、さまざまなフレームワークを学んでいて、今は TS を学ばなければなりません。

node の作者が 2018 年に新しいフレームワーク deno を開発していたとき、誰かが GitHub でそのような問題を提出したことがありました。

大きなフロントエンドは、最も多くのことを行うことができる、または行う必要がある開発者のグループです。

クライアント側の開発者: Android から iOS、または iOS から Android、RN まで、ますます多くのクライアント側の開発者がフロントエンド関連の知識 (Vue、React、Angular、アプレット) に触れるようになりました。

フロントエンド開発者: jQuery から AngularJS、さらに 3 つの並列フレームワーク (Vue、React、Angular、および小さなプログラム) まで、さらに一部のフロントエンド開発でもクライアント側開発 (RN、Flutter など) に連絡する必要があります。

現在、ES6、7、8 などの新機能の学習だけでなく、TypeScript の学習にも直面しています。

新しいフレームワークの出現に伴い、vue3.x、react18 などの新しいフレームワークの機能を学ぶ必要があります。

しかし、すべてのテクノロジーの出現は驚くべきものになるでしょう。なぜなら、それは以前のテクノロジーの問題点を解決する必要があり、TypeScript は JavaScript の多くの設計上の欠陥、特に型検出に関して実際に解決するからです。

また、開発者の長期的な視点から見ると、TypeScript を学ぶことは、フロントエンド プログラマーが型の考え方を養うのに役立ちます。これは、大規模なプロジェクトを完了するために特に重要です。

TypeScript 環境

---

TypeScript コンパイル環境

前述したように、TypeScript は最終的に JavaScript にコンパイルされて実行されるため、対応する環境を構築する必要があります。

TypeScript のコンパイラを介して JavaScript にコンパイルできるように、コンピュータに TypeScript をインストールする必要があります。

TypeScript コードはブラウザーで直接実行することはできません。ブラウザーで実行するには、JavaScript コードにコンパイルする必要があります。このコンパイル プロセスを完了する必要があるのは誰でしょうか?

変換に役立つツールが 2 つあります。

1. tsc: TypeScript コンパイラ
2. babel：babelにはプリセットプラグインがあります

現在、公式の tsc ツールを使用しています

まず、 npm を介してグローバルにインストールする必要があります:

インストール コマンド:npm install typescript -g

バージョンを表示:tsc --version

[デモ] tsc の使用、たとえば、いくつかの TS コードを記述します

ターミナルに次のコマンドを入力します。tsc 文件名

入力が完了すると、同名のjsコードが生成されます

次に、ブラウザーまたはノード環境で js コードを実行します。

TypeScript ランタイム環境

TypeScript コードの実行効果を確認するために、これらの 2 つの手順を毎回実行する必要があるとしたら、非常に面倒です。

ステップ 1: tsc を使用して TypeScript を JavaScript コードにコンパイルします。

ステップ 2: JavaScript コードをブラウザーまたはノード環境で実行します。

そのような手順を簡素化することは可能ですか?

例えば、TypeScript を書いた後、ブラウザ上で直接実行できますか?

例えばTypeScriptを書いた後、nodeのコマンドで直接実行？

上記の 2 つの方法は、次の 2 つのソリューションで実行できます。

方法 1: webpack を使用して、ローカルの TypeScript コンパイル環境を構成し、ブラウザーで直接実行できるローカル サービスを開始します。

方法 2: ts-node ライブラリを介して TypeScript を実行するための実行環境を提供します。ts-node は 2 つのことを行います。

---

方法 1: webpack 構成

このプロジェクトでは、Vue-cli が TS 環境の構成を自動的に支援してくれますが、特殊なケースでは、自分で構成する必要もあります。

注: ここでは、npm と webpack の簡単な理解が必要になる場合があります。それほど複雑ではありません (まったく理解できない場合は、私が示した手順に従って、自分で知識を追加してください)。

ステップ 1: npm を介して package.json ファイルを初期化します。npm init

入力が完了したら、Enter キーを押してすべて入力します。

ステップ 2: webpack と webpack-cli をローカルにインストールします。npm install webpack webpack-cli -D

package.json にスクリプトを追加する

• webpack.config.js ファイルを作成する

const path = require('path')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  }
}

ステップ 3: ts-loader と typescript をインストールします。npm install ts-loader typescript -D

ローカル インストールの理由:

• 次に、tsc ではなく webpack を介して TypeScript コードをコンパイルするためです。(tsc はグローバルにインストールされた TypeScript の依存関係を使用します)
• 次に、webpack はローカルで TypeScript の依存関係を探すため、ローカルで TypeScript に依存する必要があります。

• 次に、webpack.config.js ファイルで一致ルールを構成します。

const path = require('path')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  resolve: {
    
    
    extensions: [".ts"]
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}

ステップ 4: tsconfig.json ファイルを初期化します。tsc --init

tsconfig.json ファイルが自動的に生成され、この時点で ts ファイルを js ファイルにコンパイルできます。

ステップ 5: ローカル サーバーを構築します。npm install webpack-dev-server -D

インストール後、package.json でスクリプトを構成します

• テンプレートとして index.html も必要です

• npm install html-webpack-plugin -D構成テンプレートを webpack.config.js にインストールし、webpack.config.js の最終的な構成は次のようになります。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
  mode: "development",
  entry: "./src/main.ts",
  output: {
    
    
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    
    
  },
  resolve: {
    
    
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: "./index.html"
    })
  ]
}

この時点で、直接記述した main.ts ファイルがブラウザ上で直接実行されます。

---

方法 2: ts-node をインストールする

インストール コマンド:npm install ts - node -g

インストール コマンド:npm install ts - node -g

さらに、ts-node は tslib と @types/node の 2 つのパッケージに依存する必要があり、これらもインストールする必要があります。npm install tslib @types/node -g

これで、ts-node を介して TypeScript コードを直接実行できます。ts - node 文件名

TS の文法学習では 2 番目の方法を使用し、フォローアップ プロジェクトでは 1 番目の方法を使用します。