ReactJs component sử dụng TypeScript

ReactJs component sử dụng TypeScript

Rate this post

Trên thực tế, bạn có thể sử dụng các components của ReactJS trong Typescript như trong ví dụ của facebook. Chỉ cần thay thế phần mở rộng của tệp ‘jsx’ thành ‘tsx’:

//helloMessage.tsx: 
var HelloMessage = React.createClass({ 
 render: function() { 
 return <div>Hello {this.props.name}</div>; 
 } 
}); 
ReactDOM.render(<HelloMessage name="John" />, mountNode);

Nhưng để sử dụng đầy đủ tính năng chính của Typescript (kiểm tra kiểu tĩnh) nên thực hiện một số điều sau

Các bài viết liên quan:

  1. Chuyển đổi ví dụ React.createClass thành ES6 Class:
//helloMessage.tsx: 
class HelloMessage extends React.Component { 
 render() { 
 return <div>Hello {this.props.name}</div>; 
 } 
} 
ReactDOM.render(<HelloMessage name="User" />, mountNode);
  1. Tiếp theo, thêm props vào state interfaces:
interface IHelloMessageProps { 
 name:string; 
} 
interface IHelloMessageState { 
 //empty in our case 
} 
class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {  constructor(){ 
 super(); 
 }  
 render() { 
 return <div>Hello {this.props.name}</div>; 
 } 
} 
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

Lúc này, Typescript sẽ hiển thị lỗi nếu lập trình viên quên chuyển props. Hoặc nếu họ đã thêm các props không được xác định trong giao diện.

  1. Cài đặt và thiết lập

Để sử dụng typescript, bạn phải có 1 thư mục dự án được khởi tạo bằng npm. Khởi tạo thư mục với npm init

  • Cài đặt qua npm hoặc yarn

Bạn có thể cài đặt React bằng npm bằng cách làm như sau:

  • npm install –save react react-dom

Facebook đã phát hành trình quản lý gói của riêng mình có tên Yarn , cũng có thể được sử dụng để cài đặt React. Sau khi cài đặt Yarn, bạn chỉ cần chạy lệnh này:

  • yarn add react react-dom

Sau đó, bạn có thể sử dụng React trong dự án của mình theo cách giống hệt như khi bạn đã cài đặt React qua npm. 

  1. Cài đặt định nghĩa react type trong typescript 2.0+

Để biên dịch đoạn mã của bạn bằng bằng cách sử dụng typescript, phải thêm/cài đặt các tệp định nghĩa bằng npm hoặc yarn

  • npm install –save-dev @types/react @types/react-dom
  • hoặc sử dụng yarn
  • yarn add –dev @types/react @types/react-dom
  • Cài đặt các định nghĩa react type trong các phiên bản cũ hơn của typescript
  • Bạn phải sử dụng 1 package có tên là tsd
  • tsd install react react-dom –save
  1. Thêm hoặc thay đổi cấu hình typescript

Để sử dụng JSX, ngôn ngữ pha trộn giữa javascript với html/xml, bạn có thể thay đổi cấu hình trình duyệt typescript. Trong tệp cấu hình typescript của dự án(thường có tên tsconfig.Json), bạn sẽ cần thêm tùy chọn JSX như:

"compilerOptions": { "jsx": "react" },

Tùy chọn trình biên dịch đó về cơ bản cho trình biên dịch typescript dịch các thẻ JSX trong mã sang các lệnh gọi hàm javascript.

Để tránh trình biên dịch typescript chuyển đổi JSX thành các lệnh gọi hàm javascript thuần túy, hãy sử dụng

"compilerOptions" : {
 "jsx" : "bảo tồn"
},
  1. Stateless React Components in TypeScript

React components là các function thuần túy của các props và không yêu cầu bất kỳ trạng thái bên trong nào có thể được viết dưới dạng các hàm JavaScript thay vì sử dụng cú pháp lớp chuẩn, như:

import React from 'react' 
const HelloWorld = (props) => (
 <h1>Hello, {props.name}!</h1> 
); 

Điều tương tự cũng có thể đạt được trong Typescript bằng React.SFC  class:

import * as React from 'react'; 
class GreeterProps { 
 name: string 
} 
const Greeter : React.SFC<GreeterProps> = props => 
 <h1>Hello, {props.name}!</h1>; 

Lưu ý rằng, tên React.SFC là một bí danh cho React.StatelessComponent, vì thế, 1 trong 2 có thể được sử dụng

  1. Stateless and property-less Components

Các thành phần react đơn giản không có trạng thái và không có thuộc tính, có thể được viết:

import * as React from 'react'; 
const Greeter = () => <span>Hello, World!</span> 

Tuy nhiên, components đó không thể truy cập vào this.props vì chỉ định kiểu không biết nó có phải là 1 component hay không. Để truy cập các props của nó, hãy sử dụng:

import * as React from 'react'; 
const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

Ngay cả khi các component không có các thuộc tính được xác định rõ ràng, bây giờ nó có thể truy cập vào các  props.children vì tất cả các component đều có children

Một cách sử dụng hiệu quả tương tự khác của stateless và property-less là trong tạo mẫu trang đơn giản. Sau đây là một Page component  đơn giản của exampline , giả sử đã có các components Container , NavTop và NavBottom giả định đã có trong dự án:

import * as React from 'react'; 
const Page: React.SFC<{}> = props => () => 
 <Container> 
 <NavTop /> 
 {props.children} 
 <NavBottom /> 
 </Container> 
const LoginPage: React.SFC<{}> = props => () => 
 <Page> 
 Login Pass: <input type="password" /> 
 </Page> 

Trong ví dụ này, Page components sau đó có thể sử dụng bởi bất kỳ trang thực tế nào khác làm mẫu

Leave a Reply