Summarize this content to 400 words in Persian Lang
هنگام کار با TypeScript برای برقراری تماس های HTTP، به راحتی در دام های خاصی افتاد که می تواند منجر به رفتارهای غیرمنتظره و اشکالات شود. در این پست وبلاگ، سه خطای رایج و نحوه جلوگیری از آنها را مورد بحث قرار خواهیم داد.
در پاسخ HTTP عبارت Mismatch را تایپ کنید
موضوع: تایپ پاسخ تماس HTTP در TypeScript تضمین نمی کند که بدنه پاسخ واقعی با نوع شما مطابقت داشته باشد.
توضیح: سیستم نوع TypeScript فقط در زمان کامپایل کار می کند. این به شما کمک می کند تا خطاهای نوع را هنگام نوشتن کد پیدا کنید، اما درستی نوع را در زمان اجرا اعمال نمی کند. این بدان معنی است که حتی اگر یک نوع برای پاسخ HTTP خود تعریف کنید، هیچ تضمینی وجود ندارد که سرور داده ها را در قالب مورد انتظار برگرداند.
TypeScript فقط مربوط به کدهایی است که شما می نویسید!
مثال:
interface User {
id: number;
firstName: string;
email: string;
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data: User = await response.json();
return data;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در مثال بالا، اگر سرور پاسخی را در جایی که firstName فیلد وجود ندارد یا از قالب دیگری استفاده می کند first_name، TypeScript به شما هشدار نمی دهد. عدم تطابق فقط در زمان اجرا آشکار می شود.
راه حل: از اعتبارسنجی زمان اجرا برای اطمینان از مطابقت پاسخ با نوع مورد انتظار استفاده کنید. کتابخانه ها مانند valibot یا zod می تواند در این مورد کمک کند.به جای ایجاد یک رابط، از یک نوع استنتاج شده از یک طرح واره استفاده کنید و داده های پاسخ را با طرحواره تجزیه کنید.
مثال با zod:
import { z } from “zod”;
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string(),
});
type userSchema = z.infertypeof UserSchema>;
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return UserSchema.parse(data); // Runtime validation
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
داده های تودرتو در پاسخ
موضوع: برخی از APIها داده های واقعی را در یک پوشش پاسخ، اغلب تحت a قرار می دهند data ویژگی. اگر ساختار پاسخ را بررسی نکنید، ممکن است با مدیریت نادرست داده ها مواجه شوید.این اغلب با داده های صفحه بندی شده اتفاق می افتد که در آن شی سطح بالا حاوی ابرداده هایی مانند است total، page، perPage، و غیره.
علاوه بر الزام برای صفحه بندی، ممکن است به دلیل دستورالعمل های طراحی API شرکت خود با مشکل مواجه شوید. برخی افراد استفاده می کنند data در حالی که دیگران استفاده می کنند result یا response.
مثال:
{
“data”: {
“id”: 1,
“name”: “Alice”,
“email”: “alice@mail.com”
},
“total”: 1,
“page”: 1
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در این مثال، انتظار می رود که پاسخ سرور دارای یک باشد data ویژگی که شامل شی کاربر واقعی است. اگر ساختار تغییر کند، توسط TypeScript به شما اطلاع داده نمی شود.
راه حل: همیشه ساختار پاسخ را بررسی و تایید کنید. یک بار دیگر با استفاده از کتابخانه ای مانند zod می تواند در این مورد کمک کند.
مثال:
import { z } from “zod”;
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string(),
});
const ResponseSchema = z.object({
data: UserSchema,
});
type User = z.infertypeof UserSchema>;
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
const parsedData = ResponseSchema.parse(data);
return parsedData.data;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
نمونه های کلاس از پاسخ های HTTP
موضوع: استفاده از یک کلاس برای تایپ پاسخ HTTP شما به طور خودکار نمونه هایی از آن کلاس را ایجاد نمی کند. داده های پاسخ فقط اشیاء ساده خواهند بود.
مثال:
class User {
constructor(
public id: number,
public firstName: string,
public lastName: string
) {
}
getFullName(): string {
return `${this.firstName} ${this.lastName}>`;
}
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return data as User;
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در مثال بالا، با استفاده از getFullName در بازگشت User شی منجر به خطای زمان اجرا می شود زیرا data نمونه ای از User کلاس
راه حل: کلاس را با داده های پاسخ به صورت دستی نمونه سازی کنید.
مثال:
class User {
constructor(
public id: number,
public firstName: string,
public lastName: string
) {
}
getFullName(): string {
return `${this.firstName} ${this.lastName}>`;
}
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return new User(data.id, data.name, data.email);
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در حال حاضر User نمونه خواهد داشت getDisplayName روش موجود
نتیجه
TypeScript یک ابزار قدرتمند برای تشخیص خطاهای نوع در زمان کامپایل است، اما ایمنی نوع را در زمان اجرا اعمال نمی کند. هنگامی که با پاسخ های HTTP سر و کار دارید، همیشه ساختار پاسخ را اعتبارسنجی کنید و کلاس ها را به صورت دستی معرفی کنید تا از مشکلات رایج جلوگیری کنید. استفاده از کتابخانه هایی مانند zod اعتبار سنجی زمان اجرا می تواند تا حد زیادی قابلیت اطمینان برنامه های TypeScript شما را افزایش دهد.
هنگام کار با TypeScript برای برقراری تماس های HTTP، به راحتی در دام های خاصی افتاد که می تواند منجر به رفتارهای غیرمنتظره و اشکالات شود. در این پست وبلاگ، سه خطای رایج و نحوه جلوگیری از آنها را مورد بحث قرار خواهیم داد.
در پاسخ HTTP عبارت Mismatch را تایپ کنید
موضوع: تایپ پاسخ تماس HTTP در TypeScript تضمین نمی کند که بدنه پاسخ واقعی با نوع شما مطابقت داشته باشد.
توضیح: سیستم نوع TypeScript فقط در زمان کامپایل کار می کند. این به شما کمک می کند تا خطاهای نوع را هنگام نوشتن کد پیدا کنید، اما درستی نوع را در زمان اجرا اعمال نمی کند. این بدان معنی است که حتی اگر یک نوع برای پاسخ HTTP خود تعریف کنید، هیچ تضمینی وجود ندارد که سرور داده ها را در قالب مورد انتظار برگرداند.
TypeScript فقط مربوط به کدهایی است که شما می نویسید!
مثال:
interface User {
id: number;
firstName: string;
email: string;
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data: User = await response.json();
return data;
}
در مثال بالا، اگر سرور پاسخی را در جایی که firstName فیلد وجود ندارد یا از قالب دیگری استفاده می کند first_name، TypeScript به شما هشدار نمی دهد. عدم تطابق فقط در زمان اجرا آشکار می شود.
راه حل: از اعتبارسنجی زمان اجرا برای اطمینان از مطابقت پاسخ با نوع مورد انتظار استفاده کنید. کتابخانه ها مانند valibot یا zod می تواند در این مورد کمک کند.
به جای ایجاد یک رابط، از یک نوع استنتاج شده از یک طرح واره استفاده کنید و داده های پاسخ را با طرحواره تجزیه کنید.
مثال با zod:
import { z } from "zod";
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string(),
});
type userSchema = z.infertypeof UserSchema>;
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return UserSchema.parse(data); // Runtime validation
}
داده های تودرتو در پاسخ
موضوع: برخی از APIها داده های واقعی را در یک پوشش پاسخ، اغلب تحت a قرار می دهند data ویژگی. اگر ساختار پاسخ را بررسی نکنید، ممکن است با مدیریت نادرست داده ها مواجه شوید.
این اغلب با داده های صفحه بندی شده اتفاق می افتد که در آن شی سطح بالا حاوی ابرداده هایی مانند است total، page، perPage، و غیره.
علاوه بر الزام برای صفحه بندی، ممکن است به دلیل دستورالعمل های طراحی API شرکت خود با مشکل مواجه شوید. برخی افراد استفاده می کنند data در حالی که دیگران استفاده می کنند result یا response.
مثال:
{
"data": {
"id": 1,
"name": "Alice",
"email": "alice@mail.com"
},
"total": 1,
"page": 1
}
در این مثال، انتظار می رود که پاسخ سرور دارای یک باشد data ویژگی که شامل شی کاربر واقعی است. اگر ساختار تغییر کند، توسط TypeScript به شما اطلاع داده نمی شود.
راه حل: همیشه ساختار پاسخ را بررسی و تایید کنید. یک بار دیگر با استفاده از کتابخانه ای مانند zod می تواند در این مورد کمک کند.
مثال:
import { z } from "zod";
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string(),
});
const ResponseSchema = z.object({
data: UserSchema,
});
type User = z.infertypeof UserSchema>;
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
const parsedData = ResponseSchema.parse(data);
return parsedData.data;
}
نمونه های کلاس از پاسخ های HTTP
موضوع: استفاده از یک کلاس برای تایپ پاسخ HTTP شما به طور خودکار نمونه هایی از آن کلاس را ایجاد نمی کند. داده های پاسخ فقط اشیاء ساده خواهند بود.
مثال:
class User {
constructor(
public id: number,
public firstName: string,
public lastName: string
) {
}
getFullName(): string {
return `${this.firstName} ${this.lastName}>`;
}
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return data as User;
}
در مثال بالا، با استفاده از getFullName در بازگشت User شی منجر به خطای زمان اجرا می شود زیرا data نمونه ای از User کلاس
راه حل: کلاس را با داده های پاسخ به صورت دستی نمونه سازی کنید.
مثال:
class User {
constructor(
public id: number,
public firstName: string,
public lastName: string
) {
}
getFullName(): string {
return `${this.firstName} ${this.lastName}>`;
}
}
async function fetchUser(userId: number): PromiseUser> {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return new User(data.id, data.name, data.email);
}
در حال حاضر User نمونه خواهد داشت getDisplayName روش موجود
نتیجه
TypeScript یک ابزار قدرتمند برای تشخیص خطاهای نوع در زمان کامپایل است، اما ایمنی نوع را در زمان اجرا اعمال نمی کند. هنگامی که با پاسخ های HTTP سر و کار دارید، همیشه ساختار پاسخ را اعتبارسنجی کنید و کلاس ها را به صورت دستی معرفی کنید تا از مشکلات رایج جلوگیری کنید. استفاده از کتابخانه هایی مانند zod اعتبار سنجی زمان اجرا می تواند تا حد زیادی قابلیت اطمینان برنامه های TypeScript شما را افزایش دهد.
