Laravel中如何使用Typescript

本篇內(nèi)容介紹了“Laravel中如何使用Typescript”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

為什么使用 TypeScript

TypeScript 提供了可選的靜態(tài)類型，它允許你在編譯階段構(gòu)建和驗(yàn)證你的代碼。它還帶來了 IDE 自動完成和驗(yàn)證支持以及代碼導(dǎo)航功能。簡而言之，TypeScript 增強(qiáng)了代碼的可讀性并改進(jìn)了調(diào)試過程。

為你的 Laravel 項(xiàng)目添加 TypeScript 支持非常簡單，只需幾分鐘，但可以提升你的前端體驗(yàn)。讓我們用 Vue 3 重新安裝 Laravel Breeze 來回顧一下這個過程。

1. 安裝依賴

讓我們從安裝 TypeScript 編譯器和相應(yīng)的 Webpack 加載器開始。

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

2. 設(shè)置 TypeScript 配置

TypeScript 編譯器需要一個包含所需選項(xiàng)的配置文件。適當(dāng)?shù)?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 安裝帶有一個 JavaScript 入口示例，需要將其轉(zhuǎn)換為 TypeScript。您只需將 .js 重命名為 .ts。

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

然后，讓 Mix 知道它應(yīng)該將 JavaScript 代碼作為 TypeScript 處理。 Laravel Mix 帶有內(nèi)置的 TypeScript 支持。

webpack.mix.js

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

你還需要告訴編譯器和 IDE，組件的代碼必須被視為 TypeScript。將 lang="ts" 部分附加到組件腳本部分。

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

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

你都準(zhǔn)備好了吧！你可以繼續(xù)按照以前的方式編寫代碼，并利用一些 TypeScript 功能并改善你的前端體驗(yàn)。

示例用法

TypeScript 允許你使用簡單類型和復(fù)雜結(jié)構(gòu)來類型提示變量和方法。由于我們主要關(guān)注與后端交互，讓我們看一下與模型交互的示例。

讓我們創(chuàng)建一個包含所有必要類型聲明的文件 —— resources/js/types.d.ts。

假設(shè)你有一個模型用戶，你可以從前端與之交互。這是默認(rèn)用戶模型的基本 TypeScript 表示。它描述了一個對象可以具有哪些屬性以及這些屬性應(yīng)該是什么類型。

resources/js/types.d.js

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

現(xiàn)在，你可以在分配變量或從方法返回值時使用此接口。

let user = <User>{ id: 1, name: 'Taylor Otwell' }

function getUser(): User {
    ...
}

因此，當(dāng)你訪問 user 變量時，你的 IDE 會建議相應(yīng)的對象屬性。它還會在你編譯代碼之前讓你知道何時出現(xiàn)類型錯誤。

為所有模型編寫接口并使其與后端代碼保持同步需要額外的時間。你可能需要考慮使用 laravel-typescript 擴(kuò)展，它可以讓你將 Laravel 模型轉(zhuǎn)換為 TypeScript 聲明，并使它們與你的遷移保持同步。

“Laravel中如何使用Typescript”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！