Laravel で Typescript を使用する方法の簡単な分析

Laravel で Typescript を使用するにはどうすればよいですか? LaravelでのTypescriptの使い方については以下の記事で紹介していますので、お役に立てれば幸いです。

PHP 開発者、特に Laravel 開発者は、より厳密に型指定されたコードを書き始めていますが、フルスタック開発者は、フロントエンド コードに適用されているプラ​​クティスと同じものを入力しない傾向があります。 。その中でも、TypeScript はフロントエンド コンポーネントを記述する「異なる」方法であると考えられています。 [関連する推奨事項: laravel ビデオ チュートリアル ]

TypeScript に関する最も多くの誤解は、バックエンド開発者にとって複雑すぎるため、追加の値を提供せずにコード サイズが拡大するだけであるということです。

実際には、TypeScript は型の宣言を強制しません。ここが重要な部分です。TypeScript は JavaScript のスーパーセットであり、その上に何かを追加できますが、任意の有効な JS は有効な TS でもあります。

これによる実際的な影響は、ファイル名を .js から .ts に変更し、徐々に型を追加したり、新しいファイルで型の使用を開始したりできることです。コードベースの型カバレッジが 100% である必要はありません。好みに応じて TypeScript を使用できます。

TypeScript を使用する理由

TypeScript にはオプションの静的型付けが用意されており、コンパイル段階でコードを構築して検証できるようになります。また、IDE の自動補完と検証のサポート、およびコード ナビゲーション機能も提供します。つまり、TypeScript はコードの可読性を高め、デバッグ プロセスを改善します。

TypeScript サポートを Laravel プロジェクトに追加するのは簡単で、数分しかかかりませんが、フロントエンドのエクスペリエンスを向上させることができます。 Vue 3 で Laravel Breeze を再インストールして、プロセスを確認してみましょう。

1. 依存関係のインストール

まず、TypeScript コンパイラーと対応する Webpack ローダーをインストールします。

npm install ts-loader typescript --save-dev
# 或者
yarn add ts-loader typescript -D

2. TypeScript 構成のセットアップ

TypeScript コンパイラーには、必要なオプションを含む構成ファイルが必要です。適切な IDE オートコンプリートも望ましいです。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,                 // Enable strict type-checking options
    "skipLibCheck": true,           // Skip type checking of declaration files
    "noImplicitAny": false          // Bypass raising errors on `any` type
  },
  "include": ["resources/js/**/*"]  // 前端路径模式
}

3. Laravel Mix の構成

Laravel の初期インストールが行われます。 TypeScript に変換する必要がある JavaScript エントリの例を示します。 .js の名前を .ts に変更するだけです。

-resources/js/app.js
+resources/js/app.ts

次に、JavaScript コードを TypeScript として処理する必要があることを Mix に知らせます。 Laravel Mix には TypeScript サポートが組み込まれています。

webpack.mix.js

-mix.js('resources/js/app.js', 'public/js')
+mix.ts('resources/js/app.ts', 'public/js')

コンポーネントのコードを TypeScript として扱う必要があることをコンパイラと IDE に伝える必要もあります。 lang="ts" セクションをコンポーネント スクリプト セクションに追加します。

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    ...
});
</script>

準備はできていますか?以前と同じ方法でコードを書き続け、TypeScript の機能を利用してフロントエンド エクスペリエンスを向上させることができます。

使用例

TypeScript を使用すると、単純な型と複雑な構造を使用して変数とメソッドをタイプヒントできます。ここでは主にバックエンドとの対話に焦点を当てているため、モデルとの対話の例を見てみましょう。

必要な型宣言をすべて含むファイル (resources/js/types.d.ts) を作成しましょう。

フロントエンドから対話できるモデル ユーザーがいるとします。これは、デフォルトのユーザー モデルの基本的な TypeScript 表現です。オブジェクトが持つことができるプロパティと、それらのプロパティがどのような型であるべきかを説明します。

resources/js/types.d.js

declare interface User {
    id: number;
    name: string;
    email: string;
}

変数を割り当てるとき、またはメソッドから値を返すときに、このインターフェイスを使用できるようになりました。 。

let user = <User>{ id: 1, name: &#39;Taylor Otwell&#39; }

function getUser(): User {
    ...
}

したがって、user 変数にアクセスすると、IDE は対応するオブジェクト プロパティを提案します。また、コードをコンパイルする前に型エラーが発生したことを知ることができます。

すべてのモデルのインターフェイスを作成し、バックエンド コードとの同期を維持するには、さらに時間がかかります。 laravel-typescript 拡張機能の使用を検討するとよいでしょう。これにより、Laravel モデルを TypeScript 宣言に変換し、移行との同期を保つことができます。

元のアドレス: https://laravel-news.com/typescript-laravel

翻訳アドレス: https://learnku.com/laravel/t/67586

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がLaravel で Typescript を使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。