Đặt các loại khi sử dụngState React Hook với TypeScript

Tôi đang di chuyển một dự án React với TypeScript để sử dụng các tính năng hooks (React v16.7.0-alpha), nhưng tôi không thể tìm ra cách đặt kiểu chữ cho các phần tử bị hủy.

Đây là một ví dụ:

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

Tôi muốn buộc userbiến có kiểu IUser. Bản dùng thử thành công duy nhất của tôi, được thực hiện theo hai giai đoạn: Nhập, sau đó khởi tạo:

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

Nhưng tôi chắc rằng có một cách tốt hơn. Ngoài ra, setUsernên được khởi tạo dưới dạng một hàm nhận IUserlàm đầu vào và không trả về kết quả nào.

Ngoài ra, cần lưu ý rằng sử dụng const [user, setUser] = useState({name: 'Jon'});mà không có bất kỳ khởi tạo nào cũng hoạt động tốt, nhưng tôi muốn tận dụng TypeScript để buộc kiểm tra kiểu trên init, đặc biệt nếu nó phụ thuộc vào một số đạo cụ.

Cảm ơn bạn đã giúp đỡ.

Dùng cái này

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

Xem loại tương ứng tại đây: https://github.com/DefinifinityTyped/DefinifinityTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

Đầu tiên useStatelấy một cái chung, cái này sẽ là IUser của bạn. Sau đó, nếu bạn muốn chuyển phần tử bị hủy thứ hai được trả về, useStatebạn sẽ cần phải nhập Công văn. Hãy xem xét phiên bản mở rộng này của ví dụ có trình xử lý nhấp chuột:

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>
    ) 
}

Xem câu trả lời này .

Bạn cũng có thể khai báo trạng thái ban đầu trước đó và sau đó có thể gọi nó bất kỳ lúc nào bạn muốn:

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

Tiền tố giao diện Giới thiệu về tôi: https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

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>
      </>
    }