開始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;複製程式碼

然後轉向瀏覽器 檢視我們寫的元件是否展示出來了,如果沒有展示出來，可以去終端檢視編譯錯誤。