首頁 >php框架 >Laravel >淺析Laravel怎麼用Typescript

淺析Laravel怎麼用Typescript

青灯夜游
青灯夜游轉載
2022-12-27 20:21:411332瀏覽

Laravel怎麼用Typescript?以下這篇文章為大家介紹一下Laravel使用Typescript的方法,希望對大家有幫助!

淺析Laravel怎麼用Typescript

越來越多的PHPer,更具體地說,Laravel 開發人員已經開始編寫更強類型的程式碼,而全端開發人員往往不會將相同的實踐應用於他們的前端程式碼。其中,TypeScript 被認為是編寫前端元件的一種「不同」方式。 【相關推薦:laravel影片教學

大多數對TypeScript 的誤解,就是認為它對後端開發人員來說太複雜了,而且只會膨脹程式碼規模,而沒有提供任何額外的價值。

實際上,TypeScript 並不會強迫你宣告類型。這是重要的部分:TypeScript 是一個 JavaScript 超集,可以讓你在上面添加東西,但任何有效的 JS 也是有效的 TS

這樣做的實際影響是,你可以將檔案從.js 重新命名為.ts,並逐漸新增類型或開始在新檔案中使用類型。你的程式碼庫不必達到 100% 的類型覆蓋率。你可以根據自己的選擇使用 TypeScript。

為什麼使用 TypeScript

TypeScript 提供了可選的靜態類型,它允許你在編譯階段建立和驗證你的程式碼。它還帶來了 IDE 自動完成和驗證支援以及程式碼導航功能。簡而言之,TypeScript 增強了程式碼的可讀性並改進了調試過程。

為你的 Laravel 專案添加 TypeScript 支援非常簡單,只需幾分鐘,但可以提升你的前端體驗。讓我們用 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 安裝帶有一個JavaScript 入口範例,需要轉換為TypeScript。您只需將 .js 重新命名為 .ts

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

然後,讓 Mix 知道它應該將 JavaScript 程式碼作為 TypeScript 處理。 Laravel Mix 隨附內建的 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>

你都準備好了吧!你可以繼續按照以前的方式編寫程式碼,並利用一些 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中文網其他相關文章!

陳述:
本文轉載於:learnku.com。如有侵權,請聯絡admin@php.cn刪除