Laravel에서 Typescript를 사용하는 방법에 대한 간략한 분석

Laravel에서 Typescript를 어떻게 사용하나요? 다음 글에서는 Laravel에서 Typescript를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

점점 더 많은 PHP, 특히 Laravel 개발자는 더욱 강력한 형식의 코드를 작성하기 시작한 반면, 풀 스택 개발자는 프런트엔드 코드에 동일한 방식을 적용하지 않는 경향이 있습니다. 그중 TypeScript는 프런트 엔드 구성 요소를 작성하는 "다른" 방법으로 간주됩니다. [관련 권장 사항: laravel 비디오 튜토리얼]

TypeScript에 대한 대부분의 오해는 TypeScript가 백엔드 개발자에게 너무 복잡하고 추가 가치를 제공하지 않고 코드 크기만 확장한다는 것입니다.

사실 TypeScript는 유형 선언을 강요하지 않습니다. 중요한 부분은 다음과 같습니다. TypeScript는 그 위에 항목을 추가할 수 있는 JavaScript의 상위 집합이지만 유효한 JS도 유효한 TS입니다.

이의 실질적인 영향은 파일 이름을 .js에서 .ts로 바꾸고 점차적으로 유형을 추가하거나 새 파일에서 유형을 사용할 수 있다는 것입니다. 코드베이스가 100% 유형 범위를 가질 필요는 없습니다. 원하는 대로 TypeScript를 사용할 수 있습니다. .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

TypeScript를 사용하는 이유

TypeScript는 선택적 정적 타이핑을 제공하므로 컴파일 단계에서 코드를 빌드하고 확인할 수 있습니다. 또한 IDE 자동 완성 및 유효성 검사 지원과 코드 탐색 기능도 제공합니다. 즉, TypeScript는 코드 가독성을 높이고 디버깅 프로세스를 향상시킵니다.

Laravel 프로젝트에 TypeScript 지원을 추가하는 것은 쉽고 몇 분 밖에 걸리지 않지만 프런트엔드 경험을 향상시킬 수 있습니다. Vue 3와 함께 Laravel Breeze를 다시 설치하여 프로세스를 검토해 보겠습니다.

1. 종속성 설치

TypeScript 컴파일러와 해당 Webpack 로더를 설치해 보겠습니다.

rrreee

2. TypeScript 구성 설정

TypeScript 컴파일러에는 필수 옵션이 포함된 구성 파일이 필요합니다. 적절한 IDE 자동 완성도 바람직합니다.

🎜tsconfig.json🎜🎜rrreee

🎜3. Laravel Mix 구성🎜

🎜 초기 Laravel 설치에는 TypeScript로 변환해야 하는 JavaScript 항목 예제가 함께 제공됩니다. .js의 이름을 .ts로 바꾸기만 하면 됩니다. 🎜rrreee🎜그런 다음 Mix에게 JavaScript 코드를 TypeScript로 처리해야 한다고 알려주세요. Laravel Mix에는 TypeScript 지원이 내장되어 있습니다. 🎜🎜🎜webpack.mix.js🎜🎜rrreee🎜또한 구성 요소의 코드가 TypeScript로 처리되어야 함을 컴파일러와 IDE에 알려야 합니다. 구성 요소 스크립트 섹션에 lang="ts" 섹션을 추가합니다. 🎜rrreee🎜준비가 다 됐어요! 이전과 같은 방식으로 계속 코딩하고 일부 TypeScript 기능을 활용하고 프런트엔드 경험을 향상시킬 수 있습니다. 🎜

🎜사용 예🎜

🎜TypeScript를 사용하면 간단한 유형과 복잡한 구성을 사용하여 변수와 메소드를 유형 힌트할 수 있습니다. 우리는 주로 백엔드와의 상호작용에 중점을 두었으므로 모델과 상호작용하는 예를 살펴보겠습니다. 🎜🎜필요한 모든 유형 선언이 포함된 파일(resources/js/types.d.ts)을 만들어 보겠습니다. 🎜🎜프런트엔드에서 상호작용할 수 있는 모델 사용자가 있다고 가정해 보세요. 이는 기본 사용자 모델의 기본 TypeScript 표현입니다. 객체가 가질 수 있는 속성과 이러한 속성의 유형이 무엇인지 설명합니다. 🎜🎜🎜resources/js/types.d.js🎜🎜rrreee🎜이제 변수를 할당하거나 메서드에서 값을 반환할 때 이 인터페이스를 사용할 수 있습니다. 🎜rrreee🎜따라서 user 변수에 액세스하면 IDE가 해당 개체 속성을 제안합니다. 또한 코드를 컴파일하기 전에 유형 오류가 발생한 시기를 알려줍니다. 🎜🎜모든 모델에 대한 인터페이스를 작성하고 이를 백엔드 코드와 동기화 상태로 유지하려면 추가 시간이 필요합니다. Laravel 모델을 TypeScript 선언으로 변환하고 마이그레이션과 동기화를 유지할 수 있는 🎜laravel-typescript🎜 확장 사용을 고려해 보세요. 🎜🎜🎜원본 주소: https://laravel-news.com/typescript-laravel🎜🎜번역 주소: https://learnku.com/laravel/t/67586🎜🎜🎜프로그래밍 관련 지식을 더 보려면 다음 사이트를 방문하세요. 🎜프로그래밍 영상🎜! ! 🎜

위 내용은 Laravel에서 Typescript를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!