programming html

Loại HTMLElement trong TypeScript là gì?

ca sử dụng. bạn muốn tạo một 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
1 sử dụng tất cả các đạo cụ thông thường của 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
2 và thực hiện thêm nhiều nội dung khác

Chiến lược. mở rộng 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
3

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}

Xem điều này trong Sân chơi TS

Chuyển tiếp giới thiệu. Như chính các tài liệu React lưu ý, hầu hết các usecase sẽ không cần lấy ref cho phần tử bên trong. Nhưng đối với những người tạo thư viện thành phần có thể tái sử dụng, bạn sẽ cần phải 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
4 thành phần cơ bản, sau đó bạn có thể sử dụng 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
5 để lấy các đạo cụ cho thành phần bao bọc của mình. Kiểm tra tài liệu của chúng tôi về chuyển tiếp Giới thiệu để biết thêm

Trong tương lai, nhu cầu về 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
4 có thể không còn trong React 17+, nhưng hiện tại chúng ta vẫn phải giải quyết vấn đề này. 🙃

Tại sao không phải là 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7 hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
8 hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
9 hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
00 hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
01?

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7​

Bạn CÓ THỂ sử dụng 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7 thay cho 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
5, nhưng bạn có thể muốn rõ ràng hơn về việc liệu các giới thiệu của thành phần có được chuyển tiếp hay không, đây là điều chúng tôi đã chọn để chứng minh. Sự đánh đổi là thuật ngữ đáng sợ hơn một chút

Thêm thông tin. https. //reac-TypeScript-cheatsheet. netlify. ứng dụng/tài liệu/cơ bản/bắt đầu/forward_and_create_ref/

Có thể là 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
05 hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
9​

Có ít nhất 2 cách tương đương khác để làm điều này, nhưng chúng dài dòng hơn

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7

Nhìn vào nguồn của 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7 cho thấy đây là một trình bao bọc thông minh cho 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
05, trong khi phương pháp thứ hai dựa trên các giao diện chuyên biệt với cách đặt tên/viết hoa không quen thuộc

Ghi chú. Hiện có hơn 50 giao diện chuyên biệt này - hãy tìm 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
01 trong phần bình luận 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
10 của chúng tôi

Cuối cùng, chúng tôi đã chọn phương pháp 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
7 vì nó liên quan đến ít thuật ngữ cụ thể TS nhất và dễ sử dụng nhất. Nhưng bạn sẽ ổn với một trong hai phương pháp này nếu bạn thích

Chắc chắn không phải là 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
12 hay 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
13​

Đây là những gì xảy ra khi bạn sử dụng 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
12

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
6

Nó suy ra một loại 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
15 quá rộng cho 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
16, bởi vì nó sử dụng 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
17 dưới mui xe

Đây là điều xảy ra khi bạn sử dụng 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
13

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
1

Gói / Phản chiếu một thành phần​

LÀM. phần này cần làm việc để làm cho nó đơn giản

ca sử dụng. giống như trên, nhưng đối với Thành phần phản ứng, bạn không có quyền truy cập vào các đạo cụ cơ bản

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];

Chiến lược. trích xuất các props của một thành phần bằng cách suy luận chúng

Thí dụ

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
0

Cách sử dụng

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
1

cảm ơn dmisdm

🆕 Bạn cũng nên cân nhắc xem có nên chuyển tiếp giới thiệu một cách rõ ràng hay không

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
5

Liên kết Sân chơi TS

Các thành phần đa hình [e. g. với đạo cụ 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
19]​

"Các thành phần đa hình" = chuyển một thành phần sẽ được hiển thị, e. g. với đạo cụ 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
19

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
51 khá hữu ích để bao gồm hầu hết các loại có thể được chuyển tới createElement e. g

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
9

Bạn cũng có thể thấy điều này với React Router

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
0

Để biết thêm thông tin, bạn có thể tham khảo các tài nguyên này

  • https. //Blog. andrewbran. ch/đa hình-phản ứng-thành phần/
  • https. //github. com/kripod/reac-polymorphic-box
  • https. // stackoverflow. com/câu hỏi/58200824/generic-react-typescript-component-with-as-prop-able-to-render-any-valid-dom

Cảm ơn @eps1lon và @karol-majewski vì những suy nghĩ

Thành phần chung

Giống như bạn có thể tạo các hàm và lớp chung trong TypeScript, bạn cũng có thể tạo các thành phần chung để tận dụng hệ thống loại để đảm bảo an toàn cho loại có thể tái sử dụng. Cả Props và State đều có thể tận dụng các loại chung giống nhau, mặc dù Props có thể hợp lý hơn State. Sau đó, bạn có thể sử dụng loại chung để chú thích các loại của bất kỳ biến nào được xác định bên trong phạm vi hàm/lớp của bạn

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
70

Sau đó, bạn có thể sử dụng các thành phần chung và nhận được sự an toàn kiểu đẹp thông qua suy luận kiểu

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
71

Kể từ TS 2. 9, bạn cũng có thể cung cấp tham số loại trong JSX của mình để từ chối suy luận loại

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
72

Bạn cũng có thể sử dụng Generics bằng cách sử dụng kiểu chức năng mũi tên béo

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
73

Tương tự cho việc sử dụng các lớp. [Tín dụng. Ý chính của Karol Majewski]

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
74

Mặc dù bạn không thể sử dụng Tham số loại chung cho Thành viên tĩnh

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
75

Để khắc phục điều này, bạn cần chuyển đổi hàm tĩnh của mình thành hàm suy luận kiểu

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
76

trẻ em đánh máy

Một số thiết kế API yêu cầu một số hạn chế đối với 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
52 được chuyển đến thành phần chính. Thông thường muốn thực thi những điều này trong các loại, nhưng bạn nên biết những hạn chế đối với khả năng này

Bạn CÓ THỂ làm gì

Bạn có thể gõ cấu trúc của con bạn. chỉ một đứa trẻ, hoặc một bộ trẻ em

Sau đây là hợp lệ

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
77

Đừng quên rằng bạn cũng có thể sử dụng `prop-types` nếu TS thất bại

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
78

Những gì bạn KHÔNG THỂ làm

Điều bạn không thể làm là chỉ định thành phần con nào, e. g. Nếu bạn muốn thể hiện sự thật rằng "React Router 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
53 chỉ có thể có 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
54 khi còn nhỏ, không có gì khác được phép" trong TypeScript

Điều này là do khi bạn viết một biểu thức JSX [

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
55], loại kết quả được hộp đen thành một JSX chung. Loại nguyên tố. [cảm ơn @ferdaber]

Thu hẹp loại dựa trên Đạo cụ​

Bạn muốn gì

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
79

Làm thế nào để thực hiện. Sử dụng loại bảo vệ

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
60

Xem trong TypeScript Playground

Các thành phần và JSX nói chung tương tự như các hàm. Khi một thành phần có thể hiển thị khác nhau dựa trên các đạo cụ của chúng, nó tương tự như cách một chức năng có thể bị quá tải để có nhiều chữ ký cuộc gọi. Theo cách tương tự, bạn có thể quá tải chữ ký cuộc gọi của thành phần chức năng để liệt kê tất cả các "phiên bản" khác nhau của nó

Một trường hợp sử dụng rất phổ biến cho việc này là hiển thị thứ gì đó dưới dạng nút hoặc neo, dựa trên việc nó có nhận được thuộc tính 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
56 hay không

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
61

Chúng thậm chí không cần phải là những props hoàn toàn khác nhau, miễn là chúng có ít nhất một sự khác biệt về thuộc tính

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
62

Tiếp cận. Thành phần chung

Đây là một giải pháp ví dụ, xem phần thảo luận thêm về các giải pháp khác. cảm ơn @jpavon

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
63

Tiếp cận. Thành phần

Nếu bạn muốn kết xuất một thành phần có điều kiện, đôi khi tốt hơn là sử dụng mô hình thành phần của React để có các thành phần đơn giản hơn và hiểu rõ hơn về cách gõ

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
64

Bạn cũng có thể muốn sử dụng các Liên minh phân biệt đối xử, vui lòng xem API Thành phần phản ứng biểu cảm với các liên kết phân biệt đối xử

Đây là một trực giác ngắn gọn cho các loại liên minh phân biệt đối xử

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
65

Bảo trọng. TypeScript không thu hẹp loại Liên minh phân biệt đối xử trên cơ sở kiểm tra loại. Bộ bảo vệ loại phải nằm trên giá trị của khóa chứ không phải loại

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
66

Ví dụ trên không hoạt động vì chúng tôi không kiểm tra giá trị của 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
57 mà chỉ kiểm tra loại của nó. Đọc thêm về nó microsoft/TypeScript#30506 [bình luận]

Discriminated Unions trong TypeScript cũng có thể hoạt động với hook phụ thuộc trong React. Loại phù hợp được cập nhật tự động khi thành viên liên minh tương ứng dựa trên đó hook phụ thuộc, thay đổi. Mở rộng thêm để xem trường hợp sử dụng ví dụ. 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
67

Xem điều này trong Sân chơi TS

Trong ví dụ trên, dựa trên thành viên công đoàn 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
58, loại phụ thuộc hook 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
59 thay đổi

Để hợp lý hóa điều này, bạn cũng có thể kết hợp điều này với khái niệm Bảo vệ loại do người dùng xác định

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
68

Đọc thêm về Bộ bảo vệ Loại do Người dùng Xác định trong Sổ tay

Thu hẹp bằng cách sử dụng 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
90​

Xem hướng dẫn nhanh này. https. //twitter. com/mpocock1/status/1500813765973053440?s=20&t=ImUA-NnZc4iUuPDx-XiMTA

đạo cụ. Cái này hay cái kia nhưng không phải cả hai

Sử dụng từ khóa 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
91, nạp chồng hàm và các loại liên kết để tạo các thành phần lấy một hoặc một bộ đạo cụ khác, nhưng không phải cả hai

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
69

Xem trong TypeScript Playground

đọc thêm. cách cấm đi qua 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
92 nếu bạn có loại 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
93

đạo cụ. Phải vượt qua cả hai

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
10

Cảm ơn diegohaz

đạo cụ. Vượt qua một CHỈ NẾU cái kia được thông qua​

Giả sử bạn muốn một thành phần Văn bản bị cắt bớt nếu prop 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
94 được thông qua nhưng sẽ mở rộng để hiển thị toàn bộ văn bản khi prop 395 được thông qua [e. g. khi người dùng nhấp vào văn bản]

Bạn muốn cho phép 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
95 chỉ được thông qua nếu 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
94 cũng được thông qua, bởi vì không có ích gì đối với 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
95 nếu văn bản không bị cắt bớt

Ví dụ sử dụng

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
11

Bạn có thể thực hiện điều này bằng chức năng quá tải

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
12

đạo cụ. Bỏ qua prop từ một loại

Ghi chú. Bỏ qua đã được thêm vào dưới dạng tiện ích hạng nhất trong TS 3. 5. 🎉

Đôi khi khi các loại giao nhau, chúng tôi muốn xác định phiên bản chống đỡ của riêng mình. Ví dụ: tôi muốn thành phần của mình có 

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
99, nhưng loại mà tôi đang giao với cũng có giá trị 
// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
99. Đây là cách giải nén nó ra

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
13

Khi thành phần của bạn xác định nhiều đạo cụ, khả năng xảy ra các xung đột đó sẽ tăng lên. Tuy nhiên, bạn có thể tuyên bố rõ ràng rằng tất cả các trường của bạn sẽ bị xóa khỏi thành phần cơ bản bằng cách sử dụng toán tử 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
01

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
14

Như bạn có thể thấy từ ví dụ Bỏ qua ở trên, bạn cũng có thể viết logic quan trọng trong các loại của mình. type-zoo là bộ công cụ tuyệt vời gồm các toán tử mà bạn có thể muốn kiểm tra [bao gồm Bỏ qua], cũng như các loại tiện ích [đặc biệt đối với những người di chuyển từ Flow]

đạo cụ. Trích xuất các loại Prop của một thành phần​

Đôi khi bạn muốn các loại chống đỡ của một thành phần, nhưng nó không được xuất

Một giải pháp đơn giản là sử dụng 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
02

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
15

Có các trường hợp cạnh nâng cao nếu bạn muốn trích xuất các loại chống đỡ của một thành phần có tính đến các chống đỡ nội bộ, 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
03 và 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
04 - hãy kiểm tra vấn đề của chúng tôi tại đây để biết các tiện ích trợ giúp giải quyết các vấn đề này

đạo cụ. Đạo cụ kết xuất

Khuyên bảo. Nếu có thể, bạn nên cố gắng sử dụng Móc thay vì Đạo cụ kết xuất. Chúng tôi bao gồm điều này chỉ đơn thuần cho đầy đủ

Đôi khi bạn sẽ muốn viết một hàm có thể lấy một phần tử React hoặc một chuỗi hoặc thứ gì đó khác làm chỗ dựa. Loại tốt nhất để sử dụng cho tình huống như vậy là 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
05 phù hợp với bất kỳ nơi nào bình thường, tốt, React Node sẽ phù hợp

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
16

Nếu bạn đang sử dụng một công cụ kết xuất chức năng như một đứa trẻ

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
17

Một cái gì đó để thêm?

Xử lý ngoại lệ

Bạn có thể cung cấp thông tin tốt khi điều xấu xảy ra

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
18

Xem trong TypeScript Playground

Chỉ cần ném một ngoại lệ là được, tuy nhiên, sẽ rất tuyệt nếu TypeScript nhắc nhở người dùng về mã của bạn để xử lý ngoại lệ của bạn. Chúng ta có thể làm điều đó chỉ bằng cách quay lại thay vì ném

// usage
function App[] {
  // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.[2322]
  // return  sldkj 

  // no error
  return  text ;
}

// implementation
export interface ButtonProps extends React.ComponentPropsWithoutRef {
  specialProp?: string;
}
export function Button[props: ButtonProps] {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return ;
}
19

Bạn cũng có thể mô tả các trường hợp ngoại lệ với các loại dữ liệu có mục đích đặc biệt [đừng nói đơn nguyên. ] như kiểu dữ liệu 

import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
06, 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
07 [hoặc 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
08] và 
import { CSSProperties } from "react";

const Box = [props: CSSProperties] => ;

const Card = [
  { title, children, ...props }: { title: string } & $ElementProps // new utility, see below
] => [
  
    {title}: {children}
  
];
09

Làm cách nào để thêm phần tử HTML vào TypeScript?

Thêm các thành phần như hộp văn bản, nút, nút radio, v.v. đến một biểu mẫu web trong thời gian chạy bằng TypeScript rất đơn giản. Đối tượng tài liệu của TypeScript có một phương thức gọi là "createElement[]" có thể được sử dụng để tạo động các phần tử HTML .

Làm cách nào để xác định HTML trong TypeScript?

Cách tạo phần tử HTML trong TypeScript. .
sử dụng tài liệu. phương thức createElement[] để tạo phần tử
Đặt bất kỳ thuộc tính hoặc html bên trong nào trên phần tử đã tạo
Thêm phần tử vào trang bằng phương thức appendChild[]

Các loại trong TypeScript là gì?

Kiểu dữ liệu .
Boolean. Booleans trong TypeScript hoạt động giống như trong JavaScript. .
Chuỗi. Các chuỗi trong TypeScript hoạt động giống như trong JavaScript. .
Số. Các số trong TypeScript hoạt động giống như trong JavaScript. .
Mảng. .
bộ dữ liệu. .
Hàm số. .
liệt kê. .
Nhập Bí danh/Giao diện

HTMLElement trong JavaScript là gì?

HTMLElement. lang thang. Một chuỗi đại diện cho ngôn ngữ thuộc tính, văn bản và nội dung của phần tử .

HTMLElement có phải là nút không?

Cùng với các loại như tài liệu, nhận xét, văn bản, v.v. Nói một cách đơn giản, phần tử là nút được viết bằng cách sử dụng thẻ trong tài liệu HTML .

HTMLElement trong góc là gì?

Angular ElementRef là một trình bao bọc xung quanh đối tượng phần tử DOM gốc [phần tử HTML] . Nó chứa thuộc tính nativeElement chứa tham chiếu đến đối tượng DOM bên dưới. Chúng ta có thể sử dụng nó để thao tác DOM. Chúng tôi sử dụng ViewChild để lấy ElementRef của một phần tử HTML trong lớp thành phần.

Bài Viết Liên Quan

Làm cách nào để xóa tiêu đề hộp cảnh báo JavaScript?
Cú pháp trong lập trình HTML là gì?
Câu hỏi phỏng vấn Python Odoo
Cách lưu dữ liệu đầu vào trong html vào tệp văn bản
Lấy trăn
Thư rác có phải là một từ dành riêng trong Python không
Python đọc và ghi tràn ngăn xếp tập tin
Tại sao Python không được sử dụng trong doanh nghiệp?
Bộ bản sao Python
Trận đấu thư giãn MongoDB
Gọi hàm không xác định trong lớp php
Làm cách nào để nhận xét bằng mã php trong studio trực quan?
Bootstrap trong layman là gì?
Làm thế nào để laravel khớp với mật khẩu băm?
SimpleXML PHP
Bạn có thể chỉnh sửa html trong notepad không?
Chúng ta có thể sử dụng gấu trúc trong excel không?
Là câu lệnh trong Python
Bạn có thể nhập trang tính google vào biểu mẫu google không?
Thư viện sự kiện Python

Toplist mới

#1
Top 9 review kem chống nắng cho bà bầu 2023
6 tháng trước
#2
Top 5 tiếng anh lớp 2 unit 7 trang 46 2023
6 tháng trước
#3
Top 10 tải: mẫu the nhân viên trên excel 2023
6 tháng trước
#4
Top 7 tuyển dụng nhân viên chốt đơn tại nhà 2023
6 tháng trước
#5
Top 7 mẫu nhà 2 tầng chữ l 100m2 mái bằng 2023
6 tháng trước
#6
Top 4 truyện ngắn về quê hương lớp 2 2023
6 tháng trước
#7
Top 6 sơ đồ bộ máy nhà nước thời hồ 2023
6 tháng trước
#8
Top 8 trước việc nhật đảo chính pháp, đảng ta có chủ trương gì mới 2023
6 tháng trước
#9
Top 7 dân số đông đã đem đến cho nước ta 2023
6 tháng trước

Bài mới nhất

Căn hộ city land nguyễn văn lượng bàn giao chưa năm 2024
Kế toán trưởng và trưởng phòng kế toán năm 2024
Lỗi app cant your a pc dragon ball xenoverse 2 năm 2024
Sửa lỗi ảnh không mở được sau khi khôi phục năm 2024
Bộ nhận dạng thương hiệu tiếng anh là gì năm 2024
Kê khai thuế tncn của văn phòng đại diện năm 2024
Hội thánh phúc âm ngũ tuần là gì năm 2024
As a more complete picture nghĩa là gì năm 2024
Quá trình nào tạo ra nhiều năng lượng nhất năm 2024
24 11 là cung hoàng đạo gì năm 2024

Chủ Đề

Toplist programming Địa Điểm Hay Hỏi Đáp Là gì Mẹo Hay Nghĩa của từ Học Tốt Công Nghệ Khỏe Đẹp mẹo hay bao nhiêu Top List Bao nhiêu Sản phẩm tốt Bài Tập Xây Đựng Ngôn ngữ đánh giá Tiếng anh Bài tập So Sánh Ở đâu So sánh Hướng dẫn Dịch bao nhieu Tại sao Đại học hướng dẫn Máy tính Thế nào Vì sao Bao lâu Khoa Học Hà Nội