Analisis ringkas tentang cara menggunakan Typescript dalam Laravel

Bagaimana untuk menggunakan Typescript dalam Laravel? Artikel berikut akan memperkenalkan kepada anda cara menggunakan Typescript dalam Laravel Saya harap ia akan membantu anda!

Semakin banyak PHP dan lebih khusus lagi pembangun Laravel telah mula menulis kod yang ditaip dengan lebih kuat manakala pembangun tindanan penuh cenderung untuk tidak menaip Amalan yang sama digunakan pada kod bahagian hadapan mereka. Antaranya, TypeScript dianggap sebagai cara "berbeza" untuk menulis komponen bahagian hadapan. [Cadangan berkaitan: tutorial video laravel]

Kebanyakan salah faham tentang TypeScript ialah ia terlalu rumit untuk pembangun bahagian belakang dan hanya akan mengembangkan saiz kod tanpa Menyediakan sebarang nilai tambahan.

Sebenarnya, TypeScript tidak memaksa anda untuk mengisytiharkan jenis. Inilah bahagian penting: TypeScript ialah superset JavaScript yang membolehkan anda menambah bahan di atasnya, tetapi sebarang JS yang sah juga adalah TS yang sah.

Kesan praktikal ini ialah anda boleh menamakan semula fail daripada .js kepada .ts dan menambah jenis secara beransur-ansur atau mula menggunakan jenis dalam fail baharu. Pangkalan kod anda tidak perlu mempunyai liputan jenis 100%. Anda boleh menggunakan TypeScript mengikut pilihan anda.

Mengapa menggunakan TypeScript

TypeScript menyediakan penaipan statik pilihan, yang membolehkan anda membina dan mengesahkan kod anda semasa fasa penyusunan. Ia juga membawakan IDE auto-lengkap dan sokongan pengesahan dan keupayaan navigasi kod. Ringkasnya, TypeScript meningkatkan kebolehbacaan kod dan menambah baik proses penyahpepijatan.

Menambah sokongan TypeScript pada projek Laravel anda adalah mudah, hanya mengambil masa beberapa minit, tetapi boleh meningkatkan pengalaman bahagian hadapan anda. Mari semak proses dengan memasang semula Laravel Breeze dengan Vue 3.

1. Pasang kebergantungan

Mari mulakan dengan memasang pengkompil TypeScript dan pemuat Webpack yang sepadan.

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

2. Sediakan konfigurasi TypeScript

Pengkompil TypeScript memerlukan fail konfigurasi yang mengandungi pilihan yang diperlukan. Autolengkap IDE yang sesuai juga diingini.

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. Mengkonfigurasi Campuran Laravel

Pemasangan Laravel awal disertakan dengan entri JavaScript. contoh , yang perlu ditukar kepada TypeScript. Anda hanya perlu menamakan semula .js kepada .ts.

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

Kemudian, beritahu Mix bahawa ia harus mengendalikan kod JavaScript sebagai TypeScript. Laravel Mix dilengkapi dengan sokongan TypeScript terbina dalam.

webpack.mix.js

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

Anda juga perlu memberitahu pengkompil dan IDE bahawa kod komponen mesti dianggap sebagai TypeScript. Tambahkan bahagian lang="ts" pada bahagian skrip komponen.

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

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

Anda semua sudah bersedia! Anda boleh terus menulis kod seperti yang anda lakukan sebelum ini dan memanfaatkan beberapa ciri TypeScript dan meningkatkan pengalaman bahagian hadapan anda.

Contoh Penggunaan

TypeScript membolehkan anda menaip-pembawa pembolehubah dan kaedah menggunakan kedua-dua jenis ringkas dan binaan kompleks. Memandangkan kita tertumpu terutamanya pada berinteraksi dengan bahagian belakang, mari lihat contoh berinteraksi dengan model.

Mari buat fail yang mengandungi semua pengisytiharan jenis yang diperlukan - resources/js/types.d.ts.

Andaikan anda mempunyai pengguna model yang anda boleh berinteraksi dari bahagian hadapan. Ini ialah perwakilan TypeScript asas model pengguna lalai. Ia menerangkan sifat yang boleh dimiliki oleh objek dan jenis sifat tersebut sepatutnya.

resources/js/types.d.js

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

Kini anda boleh menggunakan antara muka ini apabila menetapkan pembolehubah atau mengembalikan nilai daripada kaedah.

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

function getUser(): User {
    ...
}

Jadi apabila anda mengakses pembolehubah user, IDE anda akan mencadangkan sifat objek yang sepadan. Ia juga memberitahu anda apabila ralat jenis berlaku sebelum anda menyusun kod anda.

Menulis antara muka untuk semua model dan memastikannya disegerakkan dengan kod hujung belakang memerlukan masa tambahan. Anda mungkin ingin mempertimbangkan untuk menggunakan sambungan laravel-typescript, yang membolehkan anda menukar model Laravel kepada pengisytiharan TypeScript dan memastikannya disegerakkan dengan migrasi anda.

Alamat asal: https://laravel-news.com/typescript-laravel

Alamat terjemahan: https://learnku.com/laravel/t/67586

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan Typescript dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!