React中使用Typescript

453 阅读1分钟

初始化

$ mkdir react-ts-app
$ cd react-ts-app
$ npm init -y
$ npm install react react-dom

$ mkdir src
$ cd src
$ touch index.html
$ touch App.tsx

src/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>React + TypeScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="main"></div>
  <script src="./App.tsx"></script>
</body>
</html>

安装Parcel

$ npm i parcel-bundler -D
$ npm i typescript -D
$ npm i -D @types/react @types/react-dom

package.json

{
  "name": "react-ts-app",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

Counter.tsx

import * as React from 'react';

export default class Counter extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

src/App.tsx

import * as React from 'react';
import { render } from 'react-dom';

import Counter from './Counter';

render(<Counter />, document.getElementById('main'));

运行 (http://localhost:1234)

$ npm run dev

Count1.tsx (verseion1)

import * as React from 'react';

const Count1: React.FunctionComponent<{
  count: number;
}> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count1;

Count2.tsx (verseion2)

import * as React from 'react';

interface Props {
  count: number;
}

const Count2: React.FunctionComponent<Props> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count2;

Count3.tsx (verseion3: Default Props)

import * as React from 'react';

interface Props {
  count?: number;
}

export default class Count extends React.Component<Props> {
  static defaultProps: Props = {
    count: 10
  };

  render () {
    return <h1>{this.props.count}</h1>;
  }
}

Counter.tsx

import * as React from 'react';

import Count1 from './Count1';
import Count2 from './Count2';
import Count3 from './Count3';

interface Props {}

interface State {
  count: number;
};

export default class Counter extends React.Component<Props, State> {
  state: State = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <Count1 count={this.state.count} />
        <Count2 count={this.state.count} />
        <Count3 />
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

Source

www.digitalocean.com/community/t…