Download as PDF, PPTX
![で、実際に使ってみてどうだったのか？ ● 強力な型チェックによる完全な型セーフな世界！ ○ ただ、完全ではない。 ■ [as any] [null] を使うケースに必ず遭遇する。](https://image.slidesharecdn.com/reacttypescript-161128110652/75/React-TypeScript-11-2048.jpg)
![Componentの継承(親Component側) import * as React from "react"; export interface IBaseProps { userId: number; } export interface IBaseState { isRender: boolean; } export default class Base<P extends IBaseProps, S extends IBaseState> extends React.Component<P, S> { constructor(props: P) { super(props as P); } // 継承先でStateを初期化するための細工、getInitialStateではなくgetInitialState[s] // getInitialStateはReact.Componentでサポートしていないので警告が出る protected getInitialStates() { return { isRender: false } as IBaseState as S; } } ● 親Components内では子Componentの型<P, S>を利用する。](https://image.slidesharecdn.com/reacttypescript-161128110652/75/React-TypeScript-19-2048.jpg)
Uploaded byMitsuru Ogawa
React+TypeScriptもいいぞ
2016/11/28 dots. フロントエンドエンジニア部 創立ビアバッシュ<会！https://eventdots.jp/event/605542
React+TypeScriptもいいぞ
- 1.
- 2. 自己紹介 ● 小川 充（mitsuruog） ● 株式会社ギブリー リードフロントエンドエンジニア ●ng-japan ○ 普段はAngularな人 ○ ガルパンおじさん ● Blog: http://blog.mitsuruog.info/ ● Github: https://github.com/mitsuruog
- 3.
- 5.
- 6. CODEPREP リニューアル ● PHP ●Frontend: React+TypeScript(1.8)+Flux ● Backend: Scala
- 7. 周辺ツールなど ● Build -Webpack ● UnitTest - karma + jasmine + enzyme ○ https://github.com/airbnb/enzyme ● Lint - TSLint + tslint-react ○ https://palantir.github.io/tslint/ ○ https://github.com/palantir/tslint-react ● Deploy - CircleCI + Github hook で自動デプロイ ● Error Tracking - Rollbar ○ https://rollbar.com/
- 8.
- 9. で、実際に使ってみてどうだったのか？ ● 使う前に考えていたこと ○ ポジティブ ■強力な型チェックによる 完全な型セーフな世界 ！ ○ ネガティブ ■ 型定義が面倒ではないか？ ■ 既存のFrontendのツールチェーンと共存できるか？ ■ テストカバレッジがうまく取得できるか？
- 10.
- 11. で、実際に使ってみてどうだったのか？ ● 強力な型チェックによる完全な型セーフな世界！ ○ ただ、完全ではない。 ■[as any] [null] を使うケースに必ず遭遇する。
- 12. で、実際に使ってみてどうだったのか？ ● 型定義が面倒ではないか？ ○ 面倒なことは面倒だが、TypeScriptには型推論機能があるため少し軽減される。 ○ただ、サードパーティ製のライブラリと組み合わせる場合は、型を探すのが面倒。 ■ 型定義ファイルが使えない場合もある。
- 13. で、実際に使ってみてどうだったのか？ ● 既存のFrontendのツールチェーンと共存できるか？ ○ とりあえず、Webpackのエコシステムに乗る。 ○TypeStrong/ts-loader: TypeScript loader for webpack https://github.com/TypeStrong/ts-loader ● テストカバレッジがうまく取得できるか？ ○ うまく取得できていない。。。（調査中）
- 14. で、実際に使ってみてどうだったのか？ ● 使う前に考えていたこと ○ ポジティブ ■強力な型チェックによる 完全な型セーフな世界 ！ ○ ネガティブ ■ 型定義が面倒ではないか？ ■ 既存のFrontendのツールチェーンと共存できるか？ ■ テストカバレッジがうまく取得できるか？ TypeScript導入の効果は複利のようなもの
- 15. コードサンプル例 ● Component ● Componentの継承 ●Stateless functional component
- 16. Component ● 内部Stateを持つもの。 ● React.Component<P,S>を継承 する。 ○ PはProps、SはState ● Stateの初期化はコンストラクタ 内で行う。 import * as React from "react"; interface IHelloProps { userId: number; } interface IHelloState { name: string; } class Hello extends React.Component<IHelloProps, IHelloState> { constructor(props: IHelloProps) { super(props); this.state = { name: "mitsuruog", }; } } export default Hello;
- 17. Componentの継承 ● 共通機能を親クラスに分離す る。 ● PropsやStateも共通なものは分 離して継承する。画面A 画面B 画面C 画面共通
- 18. Componentの継承(子Component側) import * asReact from "react"; interface IHelloProp extends IBaseProp {} interface IHelloState extends IBaseState { name: string; } export default class Hello extends Base<IHelloProp, IHelloState> { constructor(props: IHelloProp) { super(props); // 親Componentで初期化したStateとmergeする this.state = Object.assign({}, this.getInitialStates(), { name: "", }); } } ● 親Componentを継承して、PropsとStateも継承する。
- 19. Componentの継承(親Component側) import * asReact from "react"; export interface IBaseProps { userId: number; } export interface IBaseState { isRender: boolean; } export default class Base<P extends IBaseProps, S extends IBaseState> extends React.Component<P, S> { constructor(props: P) { super(props as P); } // 継承先でStateを初期化するための細工、getInitialStateではなくgetInitialState[s] // getInitialStateはReact.Componentでサポートしていないので警告が出る protected getInitialStates() { return { isRender: false } as IBaseState as S; } } ● 親Components内では子Componentの型<P, S>を利用する。
- 20. Stateless functional component ●内部Stateを持たないもの。 ● Pureなfunctionを利用する。 ● argumentsにProps型を指定す る。 import * as React from "react"; export interface IGreetingProps { name: string; } export default function Greeting({ name }: IGreetingProps) { return ( <div>Hello {name}</div> ); }
- 21.
- 22.
- 23. Code自動生成 ● inquirer +mustacheを使って自作 ○ Angularと心中する - @Quramy https://quramy.github.io/spa-knowhow-note/#/23 ● 次のScaffoldを生成 ○ Component本体の.tsx ○ ComponentとついとなるBEMの.scss ○ UnitTest用の.spec ○ Component catalog用の定義ファイル.styleguide(後述)
- 24. Component catalog ● mustacheを使って自作 ○styleguide用の定義ファイルからCatalogを自動生成。 ○ TypeScriptのInterface型定義を取り出して再利用できると尚良い。（誰か教えて）
- 25.
- 26. まとめ ● TypeScript導入の効果は複利のようなもの ○ 大規模で期間が長いほど効果が高い。 ○完全ではないが、無い時代と比べると。。。ry) ● 環境構築の敷居は高め ○ とはいえ、これは昨今のFrontend全般で言えること。 ● Stateless functional componentが多くなるので工夫しよう ○ Code自動生成 ○ Component catalog 新規構築であればTypeScript導入を検討する価値は十分ある
- 27.
- 28. 参考 ● React +Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita ○ http://qiita.com/star__hoshi/items/34eb4ccafcfa100b5cad ● TypeScript1.6 + React 書いてみてハマったポイントとか - Qiita ○ http://qiita.com/Linda_pp/items/ff0feac7e34a65657b3c ● React JSX with TypeScript(1.6) - Qiita ○ http://qiita.com/Quramy/items/70f97e68d21859d91ed8 ● React & Webpack · TypeScript ○ https://www.typescriptlang.org/docs/handbook/react-&-webpack.html