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 }