টাইপস্ক্রিপ্ট ব্যবহার করে উপাদানতে প্রতিক্রিয়াটির ডিফল্ট সম্পত্তি মান

Question

আমি টাইপসক্রিপ্ট ব্যবহার করে আমার উপাদানগুলির জন্য কীভাবে ডিফল্ট সম্পত্তি মান সেট করতে পারি তা বুঝতে পারি না।

এটি উত্স কোড:

class PageState
{
}

export class PageProps
{
    foo: string = "bar";
}

export class PageComponent extends React.Component<PageProps, PageState>
{
    public render(): JSX.Element
    {
        return (
            <span>Hello, world</span>
        );
    }
}

এবং যখন আমি উপাদানটি এভাবে ব্যবহার করার চেষ্টা করি:

ReactDOM.render(<PageComponent />, document.getElementById("page"));

সম্পত্তিটি fooঅনুপস্থিত বলে আমি একটি ত্রুটি পেয়েছি । আমি ডিফল্ট মানটি ব্যবহার করতে চাই। আমি static defaultProps = ...উপাদানটির ভিতরেও ব্যবহার করার চেষ্টা করেছি , তবে আমার সন্দেহ হওয়ার সাথে এর কোনও প্রভাব পড়েনি।

src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'.

আমি কীভাবে ডিফল্ট সম্পত্তি মান ব্যবহার করতে পারি? আমার সংস্থা ব্যবহার করে এমন অনেক জেএস উপাদান তাদের উপর নির্ভর করে এবং সেগুলি ব্যবহার না করা পছন্দ নয়।

Comments

static defaultPropsসঠিক. আপনি কি এই কোড পোস্ট করতে পারেন?

— অ্যারন বেল

Answer 1

শ্রেণীর উপাদান সহ ডিফল্ট প্রপস

ব্যবহার static defaultPropsসঠিক। আপনার প্রপস এবং রাজ্যের জন্য ক্লাস নয়, ইন্টারফেস ব্যবহার করা উচিত।

2018/12/1 আপডেট করুন : টাইপস্ক্রিপ্ট সময়ের সাথে সম্পর্কিত টাইপ-চেকিংয়ের উন্নতি করেছে defaultProps। পুরানো ব্যবহার এবং ইস্যুগুলির সর্বশেষতম এবং সর্বাধিক ব্যবহারের জন্য পড়ুন।

টাইপস্ক্রিপ্ট 3.0.০ এবং এর জন্য

আপনি কীভাবে আশা করবেন টাইপ-চেকিংয়ের কাজটি করার জন্য টাইপস্ক্রিপ্ট সুনির্দিষ্টভাবে সমর্থন যুক্ত করেছেdefaultProps । উদাহরণ:

interface PageProps {
  foo: string;
  bar: string;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps = {
        foo: "default"
    };

    public render(): JSX.Element {
        return (
            <span>Hello, { this.props.foo.toUpperCase() }</span>
        );
    }
}

যা কোনও fooগুণাবলী পাস না করে রেন্ডার এবং সংকলন করা যেতে পারে :

<PageComponent bar={ "hello" } />

মনে রাখবেন যে:

• fooহয় না ঐচ্ছিক হিসাবে চিহ্নিত (অর্থাত foo?: string) যদিও এটি একটি JSX অ্যাট্রিবিউট হিসাবে প্রয়োজনীয় না। Alচ্ছিক হিসাবে চিহ্নিত করার অর্থ হ'ল এটি হতে পারে undefinedতবে বাস্তবে এটি কখনও হবে না undefinedকারণ defaultPropsএকটি ডিফল্ট মান সরবরাহ করে। এটি কীভাবে আপনি কোনও ফাংশন প্যারামিটারটিকে alচ্ছিক বা ডিফল্ট মান সহ চিহ্নিত করতে পারেন তার অনুরূপ চিন্তা করুন , তবে উভয়ই নয়, তবুও উভয়েরই অর্থ কলটির কোনও মান নির্দিষ্ট করার দরকার নেই । টাইপসক্রিপ্ট 3.0+ defaultPropsএকইভাবে আচরণ করে , যা প্রতিক্রিয়া ব্যবহারকারীদের জন্য সত্যিই দুর্দান্ত!
• defaultPropsকোন স্পষ্ট টাইপ টীকা হয়েছে। কোনটি জেএসএক্স বৈশিষ্ট্য প্রয়োজন তা নির্ধারণ করতে এর ধরণটি সংকলক দ্বারা অনুমান করা হয় এবং ব্যবহৃত হয়। আপনি মেলে একটি সাব-সেট defaultProps: Pick<PageProps, "foo">নিশ্চিত করতে ব্যবহার করতে পারেন । এই সতর্কতার বিষয়ে আরও এখানে ব্যাখ্যা করা হয়েছে ।defaultPropsPageProps
• সঠিকভাবে কাজ করার জন্য এটির @types/reactসংস্করণ প্রয়োজন 16.4.11।

টাইপস্ক্রিপ্ট ২.১ এর জন্য 3.0 পর্যন্ত until

টাইপ করা বিষয় 3.0 বাস্তবায়িত কম্পাইলার সমর্থন করার আগে জন্য defaultPropsআপনি এখনও এটা ব্যবহার করতে পারে, এবং এটা রানটাইম এ প্রতিক্রিয়া 100% কাজ করেন, কিন্তু টাইপ করা বিষয় থেকে শুধুমাত্র যখন চেক JSX বৈশিষ্ট্যাবলী আপনি চিহ্ন সাজসরঞ্জাম আছে সঙ্গে ঐচ্ছিক হিসাবে ডিফল্টে আছে চাই জন্য সাজসরঞ্জাম বিবেচিত ?। উদাহরণ:

interface PageProps {
    foo?: string;
    bar: number;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps: Partial<PageProps> = {
        foo: "default"
    };

    public render(): JSX.Element {
        return (
            <span>Hello, world</span>
        );
    }
}

মনে রাখবেন যে:

• টিকা রচনা করা করার জন্য একটি ভাল ধারণা defaultPropsসঙ্গে Partial<>যাতে এটি আপনার সাজসরঞ্জাম বিরুদ্ধে টাইপ-চেক, কিন্তু আপনি একটি ডিফল্ট মান, যা কোন জ্ঞান করে তোলে যেহেতু প্রয়োজনীয় বৈশিষ্ট্য একটি ডিফল্ট প্রয়োজন হয়না এমন প্রতিটি প্রয়োজনীয় সম্পত্তি সরবরাহ হবে না।
• ব্যবহার করার সময় strictNullChecksমান this.props.fooহতে হবে possibly undefinedএবং একটি অ-নাল কথন (অর্থাত প্রয়োজন this.props.foo!) অথবা টাইপ-পাহারা (অর্থাত if (this.props.foo) ...মুছে ফেলার জন্য) undefined। এটি বিরক্তিকর কারণ ডিফল্ট প্রোপ মান মানে এটি আসলে কখনই সংজ্ঞায়িত হবে না তবে টিএস এই প্রবাহটি বুঝতে পারেনি। টিএস 3.0 এর জন্য সুস্পষ্ট সমর্থন যুক্ত করার অন্যতম প্রধান কারণ defaultProps।

টাইপস্ক্রিপ্টের আগে ২.১

এটি একইরকম কাজ করে তবে আপনার Partialধরণ নেই, সুতরাং Partial<>সমস্ত প্রয়োজনীয় প্রপসের জন্য কেবল ডিফল্ট মান সরবরাহ করুন বা সরবরাহ করুন (যদিও সেই ডিফল্টগুলি কখনই ব্যবহার করা হবে না) বা স্পষ্টত প্রকারের টীকা সম্পূর্ণরূপে বাদ দেওয়া উচিত।

কার্যকরী উপাদানগুলির সাথে ডিফল্ট প্রপস

আপনি ব্যবহার করতে পারেন defaultPropsহিসাবে ভাল ফাংশন উপাদান, কিন্তু আপনি আপনার ফাংশন টাইপ করতে হবে FunctionComponent( StatelessComponentমধ্যে @types/reactসংস্করণ সামনে 16.7.2) ইন্টারফেস যাতে টাইপ করা বিষয় জানে defaultPropsফাংশন করুন:

interface PageProps {
  foo?: string;
  bar: number;
}

const PageComponent: FunctionComponent<PageProps> = (props) => {
  return (
    <span>Hello, {props.foo}, {props.bar}</span>
  );
};

PageComponent.defaultProps = {
  foo: "default"
};

মনে রাখবেন যে আপনাকে Partial<PageProps>কোথাও ব্যবহার করতে হবে না কারণ FunctionComponent.defaultPropsইতিমধ্যে টিএস ২.১++ এ আংশিক হিসাবে নির্দিষ্ট করা আছে।

আর একটি দুর্দান্ত বিকল্প (এটিই আমি ব্যবহার করি) হ'ল আপনার propsপ্যারামিটারগুলি তৈরি করা এবং সরাসরি ডিফল্ট মান নির্ধারণ করা:

const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => {
  return (
    <span>Hello, {foo}, {bar}</span>
  );
};

তাহলে আপনার একেবারেই দরকার নেই defaultProps! সচেতন যে যদি আপনি হতে না প্রদান defaultProps, একটি ফাংশন উপাদান তে এটি ডিফল্ট পরামিতির মান বেশি প্রাধান্য নিতে হবে কারণ প্রতিক্রিয়া সবসময় স্পষ্টভাবে পাস হবে defaultProps(তাই পরামিতি undefined না হয়, এইভাবে ডিফল্ট প্যারামিটার আর কখনও ব্যবহৃত হয়।) সুতরাং আপনি ব্যবহার করতে চাই মান একটি বা অন্য, উভয় নয়।

Comments

ত্রুটিটি মনে হচ্ছে আপনি প্রপটি <PageComponent>পাস না করে কোথাও ব্যবহার করছেন foo। আপনি foo?: stringআপনার ইন্টারফেস ব্যবহার করে এটি alচ্ছিক করতে পারেন ।

— অ্যারন বেল

@ অ্যারন তবে টিএসএস তখন সংকলন ত্রুটি নিক্ষেপ করবে, কারণ ডিফল্টপ্রপেজ পেজপ্রপস ইন্টারফেস প্রয়োগ করে না। আপনি হয় সমস্ত ইন্টারফেস বৈশিষ্ট্য alচ্ছিক (খারাপ) করতে হবে বা সমস্ত প্রয়োজনীয় ক্ষেত্রের জন্য অপ্রয়োজনীয় বয়লারপ্লেট বা ডিফল্টপ্রপসে নির্দিষ্টকরণের ধরন এড়াতে হবে।

— পামেলাস

@ অ্যাড্রিয়ানমোইস আপনার মানে ডিফল্ট প্রপস? হ্যাঁ এটি কাজ করে তবে বাক্য গঠনটি ভিন্ন ... আমি যখন আমার কম্পিউটারে ফিরে আসি তখন আমি আমার উত্তরে একটি উদাহরণ যুক্ত করব ...

— অ্যারন বেল

@ অ্যাড্রিয়ানমাইসা এর ফাংশন উপাদান উদাহরণ সহ আপডেট হয়েছে

— অ্যারন

@ জ্যারেড হ্যাঁ, এটি সঠিকভাবে কাজ করার জন্য (সংকলক এবং প্রতিক্রিয়া রানটাইম) এর জন্য ( public static defaultPropsবা ডিফল্ট) হওয়া দরকার। এটা দিয়ে রানটাইম এ কাজ করতে পারে শুধুমাত্র কারণ এবং রানটাইম অস্তিত্ব না, কিন্তু কম্পাইলার সঠিকভাবে কাজ না। static defaultPropspublicprivate static defaultPropsprivatepublic

— অ্যারন বেল

Answer 2

টাইপস্ক্রিপ্ট ২.১+ সহ, আপনার ইন্টারফেসের বৈশিষ্ট্যগুলি alচ্ছিক না করে আংশিক <টি> ব্যবহার করুন।

export interface Props {
    obj: Model,
    a: boolean
    b: boolean
}

public static defaultProps: Partial<Props> = {
    a: true
};

Answer 3

টাইপসক্রিপ্ট 3.0 এর সাথে এই সমস্যাটির একটি নতুন সমাধান রয়েছে :

export interface Props {
    name: string;
}

export class Greet extends React.Component<Props> {
    render() {
        const { name } = this.props;
        return <div>Hello ${name.toUpperCase()}!</div>;
    }
    static defaultProps = { name: "world"};
}

// Type-checks! No type assertions needed!
let el = <Greet />

নোট করুন যে এটি কাজ করার জন্য আপনার @types/reactতুলনায় আরও নতুন সংস্করণ প্রয়োজন 16.4.6। এটি সঙ্গে কাজ করে 16.4.11।

Comments

দুর্দান্ত উত্তর! কিভাবে এক হ্যান্ডেল পারে: export interface Props { name?: string;}যেখানে নাম একটি হল ঐচ্ছিক ঠেকনা? আমি পেতে থাকিTS2532 Object is possibly 'undefined'

— ফাইডো

@ ফাইডো আমার একটি propচ্ছিক প্রাপের জন্য একটি ডিফল্ট মান থাকার দরকার নেই, যেহেতু undefinedএই প্রসগুলির জন্য এক ধরণের স্বয়ংক্রিয় ডিফল্ট মান। আপনি undefinedকখনও কখনও সুস্পষ্ট মান হিসাবে পাস করতে সক্ষম হতে চান , কিন্তু অন্য একটি ডিফল্ট মান আছে? আপনি কি export interface Props {name: string | undefined;}পরিবর্তে চেষ্টা করেছেন ? এটি চেষ্টা করেননি, কেবল একটি ধারণা।

— CorayThan

যোগ ?করা যুক্ত হিসাবে একই |undefined। আমি optionচ্ছিকভাবে প্রপ মধ্যে পাস করতে চান, এবং defaultPropsকেস পরিচালনা করতে দিন । দেখে মনে হচ্ছে এটি টিএস 3 তে এখনও সম্ভব নয়। আমি কেবল ভয়ঙ্কর name!সিনট্যাক্সটি ব্যবহার করব যেহেতু আমি জানি undefinedকখন defaultPropsসেট হয় না। যাইহোক, ধন্যবাদ!

— ফাইডো

উত্সাহিত কারণ এটি এখন সঠিক উত্তর! এই নতুন বৈশিষ্ট্যটির সাথে আমার গ্রহণযোগ্য উত্তর (যা ইতিহাসের বইতে পরিণত হতে শুরু করে) এবং আরও কিছুটা ব্যাখ্যা আপডেট করেছে। :)

— অ্যারন বেল

Answer 4

Defaultচ্ছিক প্রপসগুলির জন্য তাদের ডিফল্ট মান দরকার। এখানে ক্রেডিট :)

interface Props {
  firstName: string;
  lastName?: string;
}

interface DefaultProps {
  lastName: string;
}

type PropsWithDefaults = Props & DefaultProps;

export class User extends React.Component<Props> {
  public static defaultProps: DefaultProps = {
    lastName: 'None',
  }

  public render () {
    const { firstName, lastName } = this.props as PropsWithDefaults;

    return (
      <div>{firstName} {lastName}</div>
    )
  }
}

Answer 5

গৃহীত উত্তরের উপর @ পামেলাসের একটি মন্তব্য থেকে:

আপনি হয় সমস্ত ইন্টারফেস বৈশিষ্ট্য alচ্ছিক (খারাপ) করতে হবে বা সমস্ত প্রয়োজনীয় ক্ষেত্রের জন্য অপ্রয়োজনীয় বয়লারপ্লেট বা ডিফল্টপ্রপসে নির্দিষ্টকরণের ধরন এড়াতে হবে।

আসলে আপনি টাইপস্ক্রিপ্টের ইন্টারফেস উত্তরাধিকার ব্যবহার করতে পারেন । ফলস্বরূপ কোডটি কিছুটা বেশি ভার্বোস।

interface OptionalGoogleAdsProps {
    format?: string;
    className?: string;
    style?: any;
    scriptSrc?: string
}

interface GoogleAdsProps extends OptionalGoogleAdsProps {
    client: string;
    slot: string;
}


/**
 * Inspired by https://github.com/wonism/react-google-ads/blob/master/src/google-ads.js
 */
export default class GoogleAds extends React.Component<GoogleAdsProps, void> {
    public static defaultProps: OptionalGoogleAdsProps = {
        format: "auto",
        style: { display: 'block' },
        scriptSrc: "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
    };

Answer 6

কার্যকরী উপাদানগুলির জন্য, আমি বরং propsযুক্তিটি রাখব, সুতরাং আমার সমাধানটি এখানে:

interface Props {
  foo: string;
  bar?: number; 
}

// IMPORTANT!, defaultProps is of type {bar: number} rather than Partial<Props>!
const defaultProps = {
  bar: 1
}


// externalProps is of type Props
const FooComponent = exposedProps => {
  // props works like type Required<Props> now!
  const props = Object.assign(defaultProps, exposedProps);

  return ...
}

FooComponent.defaultProps = defaultProps;

Answer 7

কার্যকরী উপাদান

আসলে, কার্যকরী উপাদানগুলির জন্য সেরা অনুশীলনটি নীচের মতো, আমি একটি নমুনা স্পিনার উপাদান তৈরি করি:

import React from 'react';
import { ActivityIndicator } from 'react-native';
import { colors } from 'helpers/theme';
import type { FC } from 'types';

interface SpinnerProps {
  color?: string;
  size?: 'small' | 'large' | 1 | 0;
  animating?: boolean;
  hidesWhenStopped?: boolean;
}

const Spinner: FC<SpinnerProps> = ({
  color,
  size,
  animating,
  hidesWhenStopped,
}) => (
  <ActivityIndicator
    color={color}
    size={size}
    animating={animating}
    hidesWhenStopped={hidesWhenStopped}
  />
);

Spinner.defaultProps = {
  animating: true,
  color: colors.primary,
  hidesWhenStopped: true,
  size: 'small',
};

export default Spinner;