構建一個簡單的react-typescript項目

開始Typescript

前言

因爲看Antd源碼，都是使用的typescript編寫的，在有的時候看代碼確實看不懂，須要一步一步的去驗證求證一些東西，因此索性也就看了看怎麼樣開始一個typescript項目。

須要準備什麼？

1. Typescript基礎語法知識
2. create-react-app with typescript

開始

打開終端輸入如下命令（前提是你已經安裝好了create-react-app）

create-react-app my-app --scripts-version=react-scripts-ts && cd my-app複製代碼

這樣咱們就構建好一個react-typescript項目了，按照提示，在命令行輸入yarn start || npm start就可以運行項目了

編寫Hello Typescript組件

瞭解了typescript的基本語法以後，就可以編寫一個簡單的組件了

import * as React from 'react';
  import * as PropTypes from 'prop-types';
  import { MyDecorator } from './Decorator';

  // 這裏是定義傳入的參數類型
  export interface DemoProps {
    helloString?: string;
  }

  // 這裏寫一個類 對其傳入參數類型也是有定義的第一個參數是props，第二個是state
  // props就是用剛纔上面咱們定義的那樣，state若是不傳就寫一個any就行了
  export default class DecoratorTest extends React.Component<DemoProps, any> {
    static propTypes = {
      helloString: PropTypes.string,
    };

    constructor(props) {
      super(props);
    }

    // 這是一個裝飾器，下面會附上裝飾器代碼，裝飾的做用就是給callDecorator
    // 這個屬性添加一個cancel屬性
    // 若是不是很懂裝飾器的同窗能夠去typescript官網上查看詳細文檔
    @MyDecorator()
    callDecorator() {
      console.log('I am in callDecorator');
    }

    componentDidMount() {
      this.callDecorator();
      (this.callDecorator as any).cancel();
    }

    render() {
      return (
        <div> {this.props.helloString} </div>
      );
    }
  }

  // 裝飾器代碼
  // 在寫裝飾器代碼的時候須要在tsconfig.json文件中的compilerOptions屬性添加一下代碼
  // "experimentalDecorators": true 
  export default function decoratorTest(fn) {
    console.log('in definingProperty');
    const throttled = () => {
      fn();
    };

    (throttled as any).cancel = () => console.log('cancel');

    return throttled;
  }

  export function MyDecorator() {
    return function(target, key, descriptor) {
      let fn = descriptor.value;
      let definingProperty = false;
      console.log('before definingProperty');
      // 這個get函數會在類被實例化的時候就進行調用，因此就可以將這些屬性賦給外部的target
      // 也就是在this.callDecorator的時候
      // 順帶說一下set函數 會在 this.callDecorator = something 的時候調用
      return {
        configurable: true,
        // get: function()這樣的寫法也是能夠執行
        get() {
          if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
            return fn;
          }
          let boundFn = decoratorTest(fn.bind(this));
          definingProperty = true;
          Object.defineProperty(this, key, {
            value: boundFn,
            configurable: true,
            writable: true,
          });
          definingProperty = false;
          return boundFn;
        },
      };
    };
  }複製代碼

組件寫完以後就能夠在外部的App.tsx文件中引用了

import * as React from 'react';
  import Demo from './components/Demo';
  import './App.css';

  const logo = require('./logo.svg');

  class App extends React.Component {
    render() {
      return (
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <div className="App-intro">
            <Demo helloString="Hello, react with typescript" />
          </div>
        </div>
      );
    }
  }

  export default App;複製代碼

而後轉向瀏覽器 查看咱們寫的組件是否展現出來了,若是沒有展現出來，能夠去終端查看編譯錯誤。

hello