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

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

青灯夜游

リリース： 2022-12-27 20:21:41

転載

1302 人が閲覧しました

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(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
+mix.ts(&#39;resources/js/app.ts&#39;, &#39;public/js&#39;)

ログイン後にコピー

コンポーネントのコードを 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 サイトの他の関連記事を参照してください。