टाइपस्क्रिप्ट के साथ उपयोग करें टाइप करें हुक पर सेट करें

Question

मैं हुक सुविधाओं (रिएक्ट v16.7.0-अल्फा) का उपयोग करने के लिए टाइपस्क्रिप्ट प्रोजेक्ट के साथ एक प्रतिक्रिया को माइग्रेट कर रहा हूं, लेकिन मैं यह पता नहीं लगा सकता कि विध्वंसक तत्वों के टाइपिंग को कैसे सेट किया जाए।

यहाँ एक उदाहरण है:

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

मैं userवेरिएबल को टाइप का होना चाहता हूं IUser। मेरा एकमात्र सफल परीक्षण, इसे दो चरणों में कर रहा है: टाइप करना, फिर आरंभ करना:

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

लेकिन मुझे यकीन है कि एक बेहतर तरीका है। इसके अलावा, setUserएक फ़ंक्शन के रूप में आरंभ किया जाना चाहिए जो IUserइनपुट के रूप में लेता है , और कुछ भी नहीं देता है।

इसके अलावा, यह ध्यान देने योग्य है कि const [user, setUser] = useState({name: 'Jon'});बिना किसी आरंभीकरण के उपयोग से काम ठीक हो जाता है, लेकिन मैं टाइपस्क्रिप्ट को इनिट पर टाइप चेकिंग के लिए मजबूर करना चाहता हूं, खासकर अगर यह कुछ प्रॉपर पर निर्भर करता है।

आपकी सहायता के लिए धन्यवाद।

Answer 1

इसे इस्तेमाल करो

const [user, setUser] = useState<IUser>({name: 'Jon'});

संबंधित प्रकार यहां देखें: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a87676/types/react/index.d.ts#L844

Comments

ठीक वैसा ही मैं देख रहा था। धन्यवाद @ नर्बोल

— हेटिडर्ट

मैंने पिछले 6 महीनों में 6 बार के बारे में इस उत्तर का उल्लेख किया है

— अल्फोंसो पेरेज़

@ नहीं, आप वहां कुछ भी नहीं डाल सकते हैं, आप केवल उसी वस्तु को रख सकते हैं जो संगत हो IUser, यानी समान गुण हो। इसे डक टाइपिंग कहा जाता है।

— नर्बोल अल्पेयबायेव

@ JoãoMarcosGris type MyType = MyObj[]; तबuseState<MyType>

— Nurbol Alpysbayev

@JoeyBaruch नहीं, हम नहीं हैं :-) बस इसे आज़माएँ। फिर टाइप परिभाषा को देखें, और आप देखेंगे कि useStateएक अच्छी तरह से टाइप किए गए टपल को लौटाता है, जिसे सौंपा गया है [user, setUser]और टाइपस्क्रिप्ट के लिए यह समझना मुश्किल नहीं है कि वेरिएबल टपल घटकों के समान प्रकार के होने चाहिए। पता नहीं अगर मैंने चीजों को साफ किया या आपको और भ्रमित किया।

— नर्बोल अल्पीसैब

Answer 2

पहले useStateएक जेनेरिक लेता है, जो आपका IUser होगा। यदि आप तब दूसरे विनाशकारी तत्व के चारों ओर से गुजरना चाहते हैं जो useStateआपके द्वारा लौटाया गया है तो डिस्पैच आयात करना होगा। अपने उदाहरण के इस विस्तारित संस्करण पर विचार करें जिसमें एक क्लिक हैंडलर है:

import React, { useState, Dispatch } from 'react';

interface IUser {
  name: string;
}

export const yourComponent = (setUser: Dispatch<IUser>) => {

    const [user, setUser] = useState<IUser>({name: 'Jon'});

    const clickHander = (stateSetter: Dispatch<IUser>) => {
        stateSetter({name : 'Jane'});
    }

    return (
         <div>
            <button onClick={() => { clickHander(setUser) }}>Change Name</button>
        </div>
    ) 
}

इस जवाब को देखें ।

Answer 3

आप पहले भी प्रारंभिक स्थिति की घोषणा कर सकते हैं और फिर किसी भी समय इसे कॉल कर सकते हैं जो आप चाहते हैं:

type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);

I इंटरफ़ेस के बारे में उपसर्ग: https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

Answer 4

https://fettblog.eu/typescript-react/hooks/

// import useState next to FunctionComponent
    import React, { FunctionComponent, useState } from 'react';
    
    // our components props accept a number for the initial value
    const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
      // since we pass a number here, clicks is going to be a number.
      // setClicks is a function that accepts either a number or a function returning
      // a number
      const [clicks, setClicks] = useState(initial);
      return <>
        <p>Clicks: {clicks}</p>
        <button onClick={() => setClicks(clicks+1)}>+</button>
        <button onClick={() => setClicks(clicks-1)}>-</button>
      </>
    }