Khả năng tương thích của Thành phần React cho các cơ sở mã JS và TS

https://blog.logrocket.com/how-to-build-react-components-for-codebases-that-use-javascript-and-typescript/

C:\Users\Administrator\Desktop\react-ts-component-demo\src\index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

C:\Users\Administrator\Desktop\react-ts-component-demo\src\App.tsx

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import  { DisplayWithoutTS } from './pages/WithoutTS';
import { DisplayWithTS } from './pages/WithTS';
function App() {
  return (
    <div className="App">
      <div>
        <a href="/">With JS</a>
        <br/>
        <a href="/withts">With TS</a>
      </div>
      <br/><br/>
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={DisplayWithoutTS}/>
          <Route exact path='/withts' component={DisplayWithTS}/>
          <Route exact path='*' >
            <div>404 Page Not Found</div>
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}
export default App;

C:\Users\Administrator\Desktop\react-ts-component-demo\src\DisplayData\index.ts

export * from './DisplayData';
interface DisplayDataProps {
  data : {
    name: String,
    alias: String[],
    powers: String[],
    rating: Number,
  }
}
declare module '.'{
  export const DisplayData: React.FC<DisplayDataProps>
}

C:\Users\Administrator\Desktop\react-ts-component-demo\src\pages\WithoutTS.jsx

import React from 'react';
import { DisplayData } from './../DisplayData';
const DisplayWithoutTS = () => {
  const info = {
    name: 'Sheev Palpatine',
    alias: ['Chancellor Palpatine', 'Emperor Palpatine', 'Darth Sidious'],
    powers: ['Force Push', 'Force Pull', 'Force Vision'],
    rating: 10
  }
  return <DisplayData data={info}/>
}
export { DisplayWithoutTS }

C:\Users\Administrator\Desktop\react-ts-component-demo\src\pages\WithTS.tsx

import React from 'react';
import { DisplayData } from './../DisplayData';
const DisplayWithTS = () => {
  const info = {
    name: 'Sheev Palpatine',
    alias: ['Chancellor Palpatine', 'Emperor Palpatine', 'Darth Sidious'],
    powers: ['Force Push', 'Force Pull', 'Force Vision'],
    rating: 10
  }
  return <DisplayData data={info}/>
}
export { DisplayWithTS }

C:\Users\Administrator\Desktop\react-ts-component-demo\src\DisplayData\DisplayData.jsx

import React from 'react';
import { shape, string, number, arrayOf } from 'prop-types';
const DisplayData = ({ data }) => {
  return (
    <div>
      <div>Name: {data.name}</div>
      <div>Alias: {data.alias.join(', ')}</div>
      <div>Powers: {data.powers.join(', ')}</div>
      <div>Rating: {data.rating}</div>
    </div>
  )
}
DisplayData.propTypes = {
  data: shape({
    name: string,
    alias: arrayOf(string),
    powers: arrayOf(string),
    rating: number,
  })
}
DisplayData.defaultProps = {
  data: {
    name: '',
    alias: [],
    powers: [],
    rating: null,
  }
}
export { DisplayData }

Last updated

Was this helpful?