TypeScript and React

https://charles-bryant.gitbook.io/hello-react-and-typescript/typescriptandreact

TypeScript React Component

Với TypeScript, chúng ta mở rộng lớp React.Component để tạo các thành phần React. Bạn cũng xác định loại được sử dụng cho đạo cụ và trạng thái bằng cách chuyển các loại dự kiến là . Dưới đây chúng tôi có một ví dụ mà chúng tôi đang xuất một thành phần. Vì có thể có nhiều hơn một thành phần trong một không gian tên nên chúng tôi đánh dấu thành phần mặc định của mình bằng từ khóa mặc định. Ngay cả khi không có thành phần nào khác, việc đặt mặc định sẽ giúp nhập thành phần dễ dàng hơn mà không cần phải xác định mặc định trong câu lệnh nhập. Vì ví dụ này không sử dụng đạo cụ hoặc trạng thái và chúng tôi chưa tạo các loại cho chúng, chúng tôi chuyển vào bất kỳ loại nào để cho trình biên dịch IDE và TypeScript biết rằng bất kỳ loại nào cũng được chấp nhận cho đạo cụ và trạng thái. Nếu chúng tôi muốn sử dụng đạo cụ và trạng thái, chúng tôi sẽ tạo một giao diện để xác định loại chúng tôi mong đợi.

import React from 'react';
export default class MyComponent extends React.Component < {}, {} > {
  public render() {
    return (
      <div>
          Hello World!
      </div>
    );
  }
}

Đây chỉ là một hướng dẫn đơn giản, vì vậy bất kỳ phần nào sâu hơn đều nằm ngoài phạm vi. Nếu bạn muốn biết thêm thông tin về Thành phần React trong TypeScript, tôi khuyên bạn nên xem định nghĩa kiểu tại https://github.com/DefinifinityTyped/DefinifinityTyped/blob/master/react/react.d.ts. Trừ khi chữ ký đã thay đổi, bạn có thể thực hiện tìm kiếm kiểu ReactInstance = Component | Thành phần; để có cảm nhận về cách loại được xây dựng cũng như các thuộc tính và phương pháp có sẵn.

TypeScript React Component Props and State

Dưới đây, chúng tôi đang sử dụng các đạo cụ để đặt giá trị mặc định cho giá trị trạng thái và sau đó sử dụng giá trị trạng thái để hiển thị trong giao diện người dùng. Khi sử dụng TypeScript cho React, chúng tôi xác định giao diện cho các đạo cụ và đối tượng trạng thái. Bạn có thể thấy điều này trong ví dụ, IMyComponentProps và IMyComponentState là các giao diện xác định kiểu mà các đối tượng này phải chứa. Nếu IDE của bạn hỗ trợ TypeScript, nó có thể sử dụng các giao diện này để cung cấp cho bạn phản hồi trực quan khi bạn chọn sai loại. Trình biên dịch TypeScript cũng sẽ sử dụng các giao diện để kiểm tra kiểu. Bạn có thể nhận được hiệu ứng tương tự trong React bình thường bằng cách sử dụng propTypes, nhưng tôi thích cách TypeScript ánh xạ tới bộ nhớ C # OOP của tôi, nó làm cho thành phần sạch hơn và dễ đọc hơn theo ý kiến của tôi.

import React from 'react';
interface IMyComponentProps {
  someDefaultValue: string
}
interface IMyComponentState {
  someValue: string
}
export default class MyComponent extends React.Component < IMyComponentProps, IMyComponentState > {
  constructor(props: IMyComponentProps) {
    super(props);
    this.state = { 
      someValue: this.props.someDefaultValue 
    };
  }
  public render() {
    return (
      <div>
        Value set as {this.state.someValue}
      </div>
    );
  }
}

Ví dụ này giả định rằng someValue có thể bị thay đổi theo thời gian vì nó nằm trong một đối tượng trạng thái (chúng tôi không hiển thị mã sẽ thay đổi trạng thái để giữ cho mã đơn giản). Nếu chúng ta biết rằng someValue sẽ không thay đổi trong suốt thời gian tồn tại của các thành phần, chúng ta sẽ chỉ sử dụng các giá trị đạo cụ trực tiếp trong kết xuất (Giá trị đặt là {this.props.someDefaultValue}). Vì các đạo cụ là bất biến và không nên thay đổi, chúng tôi chỉ chuyển các đạo cụ đến trạng thái trong hàm tạo khi chúng tôi biết các giá trị sẽ thay đổi.