Type ScriptにReactフックを使用します.

7330 ワード

webフロントエンド

目次
例:typed useReducer()
これは簡単ですか?
カスタムフックをテスト
ReactとType Scriptはより安全で、より伸縮性のあるWebアプリケーションを構築する強力な組み合わせです.
残念なことに、JavaScript社区では採用されていないモデルはどれもType Scriptによく変換されています.例えば、新しい動的に関して作成されたコンポーネントが汎用論理を含むことにより、より高次のコンポーネントが実現され、コード再利用が可能となる.「いつでもどこでも作る」というのはJavaScript哲学で尊重されている(予期されていない場合)原則ですが、動的に作成されたインターフェースはコンパイル時には説明が難しいです.
入力フックは、代わりのType Script友好モードでコードの再使用に使用されます.彼らはあなたの他のタイプの安全なReactアプリケーションを挿入する準備ができています.コードの既存の制約を尊重します.reactを更新するだけで、react-dom>=16.8.0:


$ npm i --save \
  [email protected] \
  [email protected]

 
          typings。    latest   v16.7.0  ： 
   
$ npm i --save \
  @types/[email protected] \
  @types/[email protected]
  
            TypeScript  ，            。 
    ：typed useReducer () 
       React useReducer            。 reducer        （   ，       ），                    。 
   
// reducer.ts
type Action = 'INCREMENT' | 'DECREMENT';

type State = {
  count: number;
};

const reducer = (state: State, action: Action) => {
  switch (action) {
    case 'INCREMENT':
      return {count: state.count + 1};
    case 'DECREMENT':
      if (state.count === 0) {
        return state;
      }
      return {count: state.count - 1};
    default:
      return state;
  }
};

export default reducer;
  
    ，React useReducer()              ，      redux  。 
   
import * as React from 'react';
import reducer from './reducer';

const Counter: React.SFC = () => {
  const [state, dispatch] = React.useReducer(reducer, {count: 0});

  return (
    
      Count: {state.count}
      
        
        
      
    
  );
};
  
       ？useReducer             reducer   ，           。    count string-          ，TypeScript       state.count    number。 
        ？ 
    ，       （    ）                  。  ，       。 
   
             。Hook        ，          ，   ，          。             ？      。 
   Hooks   React     。           ，            ，            。 
   
          
     ，              。 
   
const useCapitalized =
  (s: string): ReturnType => {
    const [state, setState] = React.useState(s);
    return [state.toUpperCase(), setState];
  };
  
            useCapitalized——toUpperCase()    ，   ，        ——          MacGuffin。 
       ，              ： 
   
test('sets initial state', () => {
  const [actual] = useCapitalized('Hello, world');
  expect(actual).toEqual('HELLO, WORLD');
}
  
             。        ，                       。   ，             ： 
   
import * as React from 'react';
import * as TestRenderer from 'react-test-renderer';

// ...
const HelloWorld = () => {
  const [state] = useCapitalized('Hello, world');
  return {state};
};

test('.useCapitalized', () => {
  const testRenderer = TestRenderer.create();
  expect(testRenderer.toJSON()).toMatchSnapshot();
});
  
       ，             ，      ：            ，React      TypeScript           。 
    
      ：https://www.codeproject.com/Articles/1277165/Using-React-Hooks-with-TypeScript 
  

                            ・

javascriptの中の原始値と対象を議論します.