From 9f228334bfaf37b95aa06f7a379905b07cd1b26d Mon Sep 17 00:00:00 2001
From: akameco <akameco.t@gmail.com>
Date: Tue, 12 Mar 2019 02:53:24 +0900
Subject: [PATCH] refactor(typescript): containers

---
 app/components/A/tests/index.test.tsx         |  1 +
 app/components/AutoLockScroll/index.tsx       |  7 +-
 app/components/Chip/index.tsx                 | 11 ++-
 app/components/ColumnHeaderBookmark/index.tsx | 10 ++-
 .../{AddColumnModal.js => AddColumnModal.tsx} | 38 ++++-----
 .../AddColumnModal/{Card.js => Card.tsx}      |  7 +-
 .../{LinkButton.js => LinkButton.tsx}         |  7 +-
 .../AddColumnModal/{index.js => index.tsx}    | 19 +++--
 .../{Button.js => Button.tsx}                 | 10 ++-
 .../{index.js => index.tsx}                   | 13 ++-
 app/containers/App/{index.js => index.tsx}    |  1 -
 .../{BookmarkButton.js => BookmarkButton.tsx} | 11 +--
 .../BookmarkButton/{index.js => index.tsx}    | 14 ++-
 .../BookmarkButton/{types.js => types.tsx}    |  1 -
 .../BoxContainer/{index.js => index.tsx}      | 56 ++++++------
 .../ColumnBookmark/{index.js => index.tsx}    | 35 ++++----
 .../ColumnFollow/{index.js => index.tsx}      | 35 ++++----
 .../ColumnHistory/{index.js => index.tsx}     | 26 +++---
 .../ColumnManager/{index.js => index.tsx}     | 46 +++++-----
 .../ColumnRanking/{index.js => index.tsx}     | 34 ++++----
 .../ColumnRankingR18/{index.js => index.tsx}  | 38 ++++-----
 .../ColumnRecommended/{index.js => index.tsx} | 33 ++++---
 .../FilterUsersIn/{index.js => index.tsx}     | 10 +--
 .../ColumnSearch/{index.js => index.tsx}      | 42 ++++-----
 .../ColumnUserIllust/{index.js => index.tsx}  | 33 +++----
 .../DrawerManager/{index.js => index.tsx}     | 13 ++-
 .../{FollowButton.js => FollowButton.tsx}     | 41 +++++----
 .../FollowButton/{index.js => index.tsx}      | 14 +--
 .../HeaderContainer/{index.js => index.tsx}   | 15 ++--
 .../{IllustPreview.js => IllustPreview.tsx}   | 21 ++---
 .../IllustPreview/{LazyImg.js => LazyImg.tsx} | 85 ++++++++++++-------
 .../IllustPreview/{index.js => index.tsx}     | 22 ++---
 .../Language/{index.js => index.tsx}          | 17 ++--
 .../{selectors.test.js => selectors.test.tsx} |  6 +-
 .../LoginModal/{index.js => index.tsx}        | 10 +--
 .../{selectors.test.js => selectors.test.tsx} | 20 ++---
 .../{MultiPreview.js => MultiPreview.tsx}     | 18 ++--
 .../MangaPreview/{index.js => index.tsx}      | 16 ++--
 .../{ModalWrapper.js => ModalWrapper.tsx}     | 22 ++---
 .../ModalManeger/{index.js => index.tsx}      | 18 ++--
 .../ModalManeger/{sytles.js => sytles.tsx}    |  3 -
 app/containers/Notify/saga.ts                 |  2 +-
 .../{Preview.js => Preview.tsx}               |  5 +-
 .../PreviewFactory/{index.js => index.tsx}    |  9 +-
 app/containers/Root/{index.js => index.tsx}   |  9 +-
 .../SearchField/{Popover.js => Popover.tsx}   | 17 ++--
 .../{PopoverAuto.js => PopoverAuto.tsx}       |  8 +-
 .../{SearchFiled.js => SearchFiled.tsx}       | 50 ++++++-----
 .../{UsersOver.js => UsersOver.tsx}           |  6 +-
 .../SearchField/{index.js => index.tsx}       | 12 +--
 .../SettingModal/{Card.js => Card.tsx}        |  4 +-
 .../{LimitSetting.js => LimitSetting.tsx}     |  2 -
 .../{SettingModal.js => SettingModal.tsx}     | 48 +++++------
 .../SettingModal/{index.js => index.tsx}      | 11 ++-
 app/containers/Table/{Table.js => Table.tsx}  | 27 +++---
 app/containers/Table/{index.js => index.tsx}  | 10 +--
 .../{index.js => index.tsx}                   | 12 +--
 .../{index.js => index.tsx}                   | 23 +++--
 package.json                                  |  3 +-
 tsconfig.json                                 | 10 +--
 yarn.lock                                     | 18 +++-
 61 files changed, 583 insertions(+), 582 deletions(-)
 rename app/containers/AddColumnModal/{AddColumnModal.js => AddColumnModal.tsx} (82%)
 rename app/containers/AddColumnModal/{Card.js => Card.tsx} (92%)
 rename app/containers/AddColumnModal/{LinkButton.js => LinkButton.tsx} (90%)
 rename app/containers/AddColumnModal/{index.js => index.tsx} (82%)
 rename app/containers/AddNewColumnButton/{Button.js => Button.tsx} (77%)
 rename app/containers/AddNewColumnButton/{index.js => index.tsx} (58%)
 rename app/containers/App/{index.js => index.tsx} (98%)
 rename app/containers/BookmarkButton/{BookmarkButton.js => BookmarkButton.tsx} (88%)
 rename app/containers/BookmarkButton/{index.js => index.tsx} (76%)
 rename app/containers/BookmarkButton/{types.js => types.tsx} (83%)
 rename app/containers/BoxContainer/{index.js => index.tsx} (78%)
 rename app/containers/ColumnBookmark/{index.js => index.tsx} (76%)
 rename app/containers/ColumnFollow/{index.js => index.tsx} (76%)
 rename app/containers/ColumnHistory/{index.js => index.tsx} (78%)
 rename app/containers/ColumnManager/{index.js => index.tsx} (77%)
 rename app/containers/ColumnRanking/{index.js => index.tsx} (73%)
 rename app/containers/ColumnRankingR18/{index.js => index.tsx} (71%)
 rename app/containers/ColumnRecommended/{index.js => index.tsx} (78%)
 rename app/containers/ColumnSearch/FilterUsersIn/{index.js => index.tsx} (92%)
 rename app/containers/ColumnSearch/{index.js => index.tsx} (81%)
 rename app/containers/ColumnUserIllust/{index.js => index.tsx} (79%)
 rename app/containers/DrawerManager/{index.js => index.tsx} (79%)
 rename app/containers/FollowButton/{FollowButton.js => FollowButton.tsx} (76%)
 rename app/containers/FollowButton/{index.js => index.tsx} (59%)
 rename app/containers/HeaderContainer/{index.js => index.tsx} (83%)
 rename app/containers/IllustPreview/{IllustPreview.js => IllustPreview.tsx} (87%)
 rename app/containers/IllustPreview/{LazyImg.js => LazyImg.tsx} (76%)
 rename app/containers/IllustPreview/{index.js => index.tsx} (81%)
 rename app/containers/Language/{index.js => index.tsx} (89%)
 rename app/containers/Language/tests/{selectors.test.js => selectors.test.tsx} (69%)
 rename app/containers/LoginModal/{index.js => index.tsx} (73%)
 rename app/containers/LoginModal/tests/{selectors.test.js => selectors.test.tsx} (80%)
 rename app/containers/MangaPreview/{MultiPreview.js => MultiPreview.tsx} (65%)
 rename app/containers/MangaPreview/{index.js => index.tsx} (72%)
 rename app/containers/ModalManeger/{ModalWrapper.js => ModalWrapper.tsx} (82%)
 rename app/containers/ModalManeger/{index.js => index.tsx} (80%)
 rename app/containers/ModalManeger/{sytles.js => sytles.tsx} (98%)
 rename app/containers/PreviewFactory/{Preview.js => Preview.tsx} (86%)
 rename app/containers/PreviewFactory/{index.js => index.tsx} (65%)
 rename app/containers/Root/{index.js => index.tsx} (89%)
 rename app/containers/SearchField/{Popover.js => Popover.tsx} (86%)
 rename app/containers/SearchField/{PopoverAuto.js => PopoverAuto.tsx} (88%)
 rename app/containers/SearchField/{SearchFiled.js => SearchFiled.tsx} (80%)
 rename app/containers/SearchField/{UsersOver.js => UsersOver.tsx} (89%)
 rename app/containers/SearchField/{index.js => index.tsx} (78%)
 rename app/containers/SettingModal/{Card.js => Card.tsx} (88%)
 rename app/containers/SettingModal/{LimitSetting.js => LimitSetting.tsx} (98%)
 rename app/containers/SettingModal/{SettingModal.js => SettingModal.tsx} (85%)
 rename app/containers/SettingModal/{index.js => index.tsx} (85%)
 rename app/containers/Table/{Table.js => Table.tsx} (64%)
 rename app/containers/Table/{index.js => index.tsx} (68%)
 rename app/containers/UserDrawerContainer/{index.js => index.tsx} (80%)
 rename app/containers/UserPopoverContainer/{index.js => index.tsx} (69%)

diff --git a/app/components/A/tests/index.test.tsx b/app/components/A/tests/index.test.tsx
index a86b93be..ae770513 100644
--- a/app/components/A/tests/index.test.tsx
+++ b/app/components/A/tests/index.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { mount } from 'enzyme' // eslint-disable-next-line import/no-unassigned-import
 
+// eslint-disable-next-line import/no-unassigned-import
 import 'jest-styled-components'
 import A from '..'
 
diff --git a/app/components/AutoLockScroll/index.tsx b/app/components/AutoLockScroll/index.tsx
index 91e89133..8b6219e2 100644
--- a/app/components/AutoLockScroll/index.tsx
+++ b/app/components/AutoLockScroll/index.tsx
@@ -11,6 +11,8 @@ function getElementBody() {
 }
 
 class AutoLockScroll extends React.Component<Props> {
+  locked: boolean = false
+
   componentDidMount() {
     if (this.props.lock === true) {
       this.preventScrolling()
@@ -33,8 +35,6 @@ class AutoLockScroll extends React.Component<Props> {
     this.allowScrolling()
   }
 
-  locked: boolean = false
-
   preventScrolling() {
     if (this.locked) {
       return
@@ -61,8 +61,9 @@ class AutoLockScroll extends React.Component<Props> {
       body.style.overflow = originalBodyOverflow || ''
       originalBodyOverflow = null
     }
-  } // eslint-disable-next-line class-methods-use-this
+  }
 
+  // eslint-disable-next-line class-methods-use-this
   render() {
     return null
   }
diff --git a/app/components/Chip/index.tsx b/app/components/Chip/index.tsx
index 47fae443..dce81dc4 100644
--- a/app/components/Chip/index.tsx
+++ b/app/components/Chip/index.tsx
@@ -3,10 +3,11 @@ import styled from 'styled-components'
 import DeleteIcon from '../Icons/DeleteIcon'
 
 export interface Props {
-  children?: React.Node | null | undefined
-  onClick?: Function
-  onRequestDelete?: Function
+  children?: React.ReactNode
+  onClick?: any
+  onRequestDelete?: any
 }
+
 const StyledChip = styled.div`
   display: flex;
   box-sizing: border-box;
@@ -22,6 +23,7 @@ const StyledChip = styled.div`
   vertical-align: baseline;
   border-radius: 16px;
 `
+
 const InnerChip = styled.span`
   color: rgba(0, 0, 0, 0.87);
   font-size: 14px;
@@ -32,13 +34,14 @@ const InnerChip = styled.span`
   user-select: none;
   white-space: nowrap;
 `
+
 const icnonStyle = {
   cursor: 'pointer',
   margin: '4px 4px 0px -8px',
 }
 
 class Chip extends React.PureComponent<Props> {
-  handleRequestDelete = (e: Event) => {
+  handleRequestDelete = (e: any) => {
     e.stopPropagation()
 
     if (this.props.onRequestDelete) {
diff --git a/app/components/ColumnHeaderBookmark/index.tsx b/app/components/ColumnHeaderBookmark/index.tsx
index 5aff385f..18245785 100644
--- a/app/components/ColumnHeaderBookmark/index.tsx
+++ b/app/components/ColumnHeaderBookmark/index.tsx
@@ -18,22 +18,23 @@ class ColumnHeaderSetting extends React.PureComponent<Props, State> {
     minBookmarks: 0,
   }
 
+  _sendBookmark = debounce(() => {
+    this.props.setMinBookmarks(this.state.minBookmarks)
+  }, 400)
+
   componentWillMount() {
     this.setState({
       minBookmarks: this.props.minBookmarks,
     })
   }
 
-  handleSlider = (event: Event, value: number) => {
+  handleSlider = (event: any, value: number) => {
     this.setState({
       minBookmarks: value,
     })
 
     this._sendBookmark()
   }
-  _sendBookmark = debounce(() => {
-    this.props.setMinBookmarks(this.state.minBookmarks)
-  }, 400)
 
   render() {
     const { minBookmarks } = this.state
@@ -59,4 +60,5 @@ const Wrap = styled.div`
   flex-direction: column;
   color: #eee;
 `
+
 export default ColumnHeaderSetting
diff --git a/app/containers/AddColumnModal/AddColumnModal.js b/app/containers/AddColumnModal/AddColumnModal.tsx
similarity index 82%
rename from app/containers/AddColumnModal/AddColumnModal.js
rename to app/containers/AddColumnModal/AddColumnModal.tsx
index 1479e2ad..78263ed4 100644
--- a/app/containers/AddColumnModal/AddColumnModal.js
+++ b/app/containers/AddColumnModal/AddColumnModal.tsx
@@ -1,26 +1,24 @@
-// @flow
 import * as React from 'react'
-import { injectIntl, FormattedMessage, type IntlShape } from 'react-intl'
-import type { Mode } from 'containers/ColumnRanking/reducer'
+import { injectIntl, FormattedMessage, IntlShape } from 'react-intl'
+import { Mode } from 'containers/ColumnRanking/reducer'
 import rankingMessages from 'containers/ColumnRanking/messages'
-import type { R18Mode } from 'containers/ColumnRankingR18/reducer'
+import { R18Mode } from 'containers/ColumnRankingR18/reducer'
 import rankingR18Messages from 'containers/ColumnRankingR18/messages'
 import Card from './Card'
 import LinkButton from './LinkButton'
 import messages from './messages'
 import { Content, Header, Wrap } from './styles'
 
-export type Props = {
-  addRecommended: () => void,
-  addBookmark: () => void,
-  addBookmarkPrivate: () => void,
-  addFollow: () => void,
-  addFollowPrivate: () => void,
-  addHistory: () => void,
-  addIllustRanking: (mode: Mode) => void,
-  addIllustR18Ranking: (mode: R18Mode) => void,
+export interface Props {
+  addRecommended: () => undefined
+  addBookmark: () => undefined
+  addBookmarkPrivate: () => undefined
+  addFollow: () => undefined
+  addFollowPrivate: () => undefined
+  addHistory: () => undefined
+  addIllustRanking: (mode: Mode) => undefined
+  addIllustR18Ranking: (mode: R18Mode) => undefined
 }
-
 const rankingMode = [
   'day',
   'week',
@@ -30,7 +28,6 @@ const rankingMode = [
   'week_original',
   'week_rookie',
 ]
-
 const rankingR18Mode = [
   'day_r18',
   'week_r18',
@@ -39,9 +36,14 @@ const rankingR18Mode = [
   'week_r18g',
 ]
 
-function SelectColumnModal(props: Props & { intl: IntlShape }) {
+function SelectColumnModal(
+  props: Props & {
+    intl: IntlShape
+  }
+) {
   const IllustRankingLinks = rankingMode.map(v => {
     const handleClick = () => props.addIllustRanking(v)
+
     return (
       <LinkButton
         text={props.intl.formatMessage(rankingMessages[v])}
@@ -50,9 +52,9 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
       />
     )
   })
-
   const IllustR18RankingLinks = rankingR18Mode.map(v => {
     const handleClick = () => props.addIllustR18Ranking(v)
+
     return (
       <LinkButton
         text={props.intl.formatMessage(rankingR18Messages[v])}
@@ -61,7 +63,6 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
       />
     )
   })
-
   const {
     addBookmark,
     addBookmarkPrivate,
@@ -70,7 +71,6 @@ function SelectColumnModal(props: Props & { intl: IntlShape }) {
     addHistory,
     addRecommended,
   } = props
-
   return (
     <Wrap>
       <Header>
diff --git a/app/containers/AddColumnModal/Card.js b/app/containers/AddColumnModal/Card.tsx
similarity index 92%
rename from app/containers/AddColumnModal/Card.js
rename to app/containers/AddColumnModal/Card.tsx
index 6ac682f1..f59bd0c4 100644
--- a/app/containers/AddColumnModal/Card.js
+++ b/app/containers/AddColumnModal/Card.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -16,7 +15,6 @@ const Wrap = styled.div`
   background: #fff;
   overflow-y: auto;
 `
-
 const Title = styled.div`
   font-size: 14px;
   padding-left: 16px;
@@ -26,7 +24,6 @@ const Title = styled.div`
   box-sizing: border-box;
   line-height: 40px;
 `
-
 const ListWrap = styled.div`
   padding: 0;
   margin: 0;
@@ -38,8 +35,8 @@ const List = ({ children }: { children?: React.Node }) => (
 )
 
 interface Props {
-  title: string | React.Element<any>;
-  children?: React.Node;
+  title: string | React.Element
+  children?: React.Node
 }
 
 const Card = ({ title, children }: Props) => (
diff --git a/app/containers/AddColumnModal/LinkButton.js b/app/containers/AddColumnModal/LinkButton.tsx
similarity index 90%
rename from app/containers/AddColumnModal/LinkButton.js
rename to app/containers/AddColumnModal/LinkButton.tsx
index 107e32b0..4e9077e3 100644
--- a/app/containers/AddColumnModal/LinkButton.js
+++ b/app/containers/AddColumnModal/LinkButton.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
@@ -18,14 +17,12 @@ const Wrap = styled.div`
     background-color: rgba(0, 0, 0, 0.098);
   }
 `
-
 const InnerButton = styled.div`
   padding: 10px 16px 10px 17px;
 `
-
 interface Props {
-  text: string | React.Element<any>;
-  onClick: () => void;
+  text: string | React.Element
+  onClick: () => undefined
 }
 
 const LinkButton = ({ text, onClick }: Props) => (
diff --git a/app/containers/AddColumnModal/index.js b/app/containers/AddColumnModal/index.tsx
similarity index 82%
rename from app/containers/AddColumnModal/index.js
rename to app/containers/AddColumnModal/index.tsx
index 4753f6b5..a1596020 100644
--- a/app/containers/AddColumnModal/index.js
+++ b/app/containers/AddColumnModal/index.tsx
@@ -1,40 +1,46 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
-import type { Dispatch } from 'types'
+import { connect, Connector } from 'react-redux'
+import { Dispatch } from 'types'
 import { addColumn as addRankingColumn } from 'containers/ColumnRanking/actions'
 import { addColumn as addRankingR18Column } from 'containers/ColumnRankingR18/actions'
 import { addColumn as addBookmarkColumn } from 'containers/ColumnBookmark/actions'
 import { addColumn as addFollowColumn } from 'containers/ColumnFollow/actions'
 import { addColumn as addRecommendedColumn } from 'containers/ColumnRecommended/actions'
 import { addColumnHistory } from 'containers/ColumnHistory/actions'
-import type { Mode } from 'containers/ColumnRanking/reducer'
-import type { R18Mode } from 'containers/ColumnRankingR18/reducer'
+import { Mode } from 'containers/ColumnRanking/reducer'
+import { R18Mode } from 'containers/ColumnRankingR18/reducer'
 import Modal from './AddColumnModal'
-import type { Props } from './AddColumnModal'
+import { Props } from './AddColumnModal'
 
 function mapDispatchToProps(dispatch: Dispatch) {
   return {
     addRecommended() {
       dispatch(addRecommendedColumn('recommended'))
     },
+
     addHistory() {
       dispatch(addColumnHistory())
     },
+
     addBookmark() {
       dispatch(addBookmarkColumn('public'))
     },
+
     addBookmarkPrivate() {
       dispatch(addBookmarkColumn('private'))
     },
+
     addFollow() {
       dispatch(addFollowColumn('public'))
     },
+
     addFollowPrivate() {
       dispatch(addFollowColumn('private'))
     },
+
     addIllustRanking(mode: Mode) {
       dispatch(addRankingColumn(mode))
     },
+
     addIllustR18Ranking(mode: R18Mode) {
       dispatch(addRankingR18Column(mode))
     },
@@ -45,5 +51,4 @@ const connector: Connector<{}, Props> = connect(
   undefined,
   mapDispatchToProps
 )
-
 export default connector(Modal)
diff --git a/app/containers/AddNewColumnButton/Button.js b/app/containers/AddNewColumnButton/Button.tsx
similarity index 77%
rename from app/containers/AddNewColumnButton/Button.js
rename to app/containers/AddNewColumnButton/Button.tsx
index b869de10..876d48fb 100644
--- a/app/containers/AddNewColumnButton/Button.js
+++ b/app/containers/AddNewColumnButton/Button.tsx
@@ -1,15 +1,19 @@
-// @flow
 import * as React from 'react'
 import { FormattedMessage } from 'react-intl'
 import Button from 'components/common/Button'
 import messages from './messages'
 
 export interface Props {
-  onClick: () => void;
+  onClick: () => undefined
 }
 
 const AddColumnButton = ({ onClick }: Props) => (
-  <a style={{ margin: '0 10px' }} onClick={onClick}>
+  <a
+    style={{
+      margin: '0 10px',
+    }}
+    onClick={onClick}
+  >
     <Button label={<FormattedMessage {...messages.addColumn} />} />
   </a>
 )
diff --git a/app/containers/AddNewColumnButton/index.js b/app/containers/AddNewColumnButton/index.tsx
similarity index 58%
rename from app/containers/AddNewColumnButton/index.js
rename to app/containers/AddNewColumnButton/index.tsx
index d94489ad..3d7581e1 100644
--- a/app/containers/AddNewColumnButton/index.js
+++ b/app/containers/AddNewColumnButton/index.tsx
@@ -1,12 +1,11 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
-import type { Dispatch } from 'types'
-import type { User } from 'types/user'
+import { connect, Connector } from 'react-redux'
+import { Dispatch } from 'types'
+import { User } from 'types/user'
 import { addColumn } from '../ColumnUserIllust/actions'
-import AddColumnButton, { type Props } from './Button'
+import AddColumnButton, { Props } from './Button'
 
-type OP = {
-  user: User,
+interface OP {
+  user: User
 }
 
 const mapDispatchToProps = (dispatch: Dispatch, { user }) => ({
diff --git a/app/containers/App/index.js b/app/containers/App/index.tsx
similarity index 98%
rename from app/containers/App/index.js
rename to app/containers/App/index.tsx
index 6b8b51c9..929fa92b 100644
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import MainView from 'components/MainView'
 import Table from 'containers/Table'
diff --git a/app/containers/BookmarkButton/BookmarkButton.js b/app/containers/BookmarkButton/BookmarkButton.tsx
similarity index 88%
rename from app/containers/BookmarkButton/BookmarkButton.js
rename to app/containers/BookmarkButton/BookmarkButton.tsx
index 72876639..b492bd30 100644
--- a/app/containers/BookmarkButton/BookmarkButton.js
+++ b/app/containers/BookmarkButton/BookmarkButton.tsx
@@ -1,10 +1,8 @@
-// @flow
 import * as React from 'react'
 import IconButton from 'material-ui/IconButton'
 import FavoriteIcon from 'material-ui/svg-icons/action/favorite'
 
 const iconSize = 18
-
 const styles = {
   button: {
     width: 32,
@@ -15,13 +13,11 @@ const styles = {
     height: iconSize,
   },
 }
-
 const hoverColor = '#b94343'
-
 export interface Props {
-  addBookmark: () => void;
-  deleteBookmark: () => void;
-  isBookmarked: boolean;
+  addBookmark: () => undefined
+  deleteBookmark: () => undefined
+  isBookmarked: boolean
 }
 
 const BookmarkButton = ({
@@ -30,7 +26,6 @@ const BookmarkButton = ({
   deleteBookmark,
 }: Props) => {
   const onClick = isBookmarked ? deleteBookmark : addBookmark
-
   return (
     <IconButton onClick={onClick} style={styles.button} iconStyle={styles.icon}>
       <FavoriteIcon
diff --git a/app/containers/BookmarkButton/index.js b/app/containers/BookmarkButton/index.tsx
similarity index 76%
rename from app/containers/BookmarkButton/index.js
rename to app/containers/BookmarkButton/index.tsx
index 16484aa3..90fd924b 100644
--- a/app/containers/BookmarkButton/index.js
+++ b/app/containers/BookmarkButton/index.tsx
@@ -1,8 +1,7 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { createSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import BookmarkButton, { type Props } from './BookmarkButton'
+import { Dispatch } from 'types'
+import BookmarkButton, { Props } from './BookmarkButton'
 import { addBookmarkRequest, deleteBookmarkRequest } from './actions'
 import { makeIsBookmarked } from './selectors'
 
@@ -17,18 +16,17 @@ const mapDispatchToProps = (dispatch: Dispatch, { id }) => ({
   addBookmark() {
     dispatch(addBookmarkRequest(id, 'public'))
   },
+
   deleteBookmark() {
     dispatch(deleteBookmarkRequest(id))
   },
 })
 
-type OP = {
-  id: number,
+interface OP {
+  id: number
 }
-
 const connector: Connector<OP, Props> = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(BookmarkButton)
diff --git a/app/containers/BookmarkButton/types.js b/app/containers/BookmarkButton/types.tsx
similarity index 83%
rename from app/containers/BookmarkButton/types.js
rename to app/containers/BookmarkButton/types.tsx
index 7c60d952..dc1477f6 100644
--- a/app/containers/BookmarkButton/types.js
+++ b/app/containers/BookmarkButton/types.tsx
@@ -1,2 +1 @@
-// @flow
 export type Restrict = 'public' | 'private'
diff --git a/app/containers/BoxContainer/index.js b/app/containers/BoxContainer/index.tsx
similarity index 78%
rename from app/containers/BoxContainer/index.js
rename to app/containers/BoxContainer/index.tsx
index a023b0dc..c02dc2b3 100644
--- a/app/containers/BoxContainer/index.js
+++ b/app/containers/BoxContainer/index.tsx
@@ -1,12 +1,11 @@
-// @flow
 import { remote } from 'electron'
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
-import type { User } from 'types/user'
-import { injectIntl, type IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
+import { User } from 'types/user'
+import { injectIntl, IntlShape } from 'react-intl'
 import { openDrawer } from 'containers/DrawerManager/actions'
 import { openIllustViewer } from 'containers/IllustPreview/actions'
 import { addColumn } from 'containers/ColumnSearch/actions'
@@ -16,22 +15,26 @@ import { makeSelectIllust } from 'containers/IllustById/selectors'
 import createMenu from './createMenu'
 import * as selectors from './selectors'
 
-type Props = {
-  illust: Illust,
-  user: User,
-  isIllustOnly: boolean,
-  isShowCaption: boolean,
-  openUserDrawer: (userId: number) => void,
-  openPreview: (type: 'illust' | 'manga') => void,
-  addColumnSearchIllust: Function,
-  // for context menu
-  dispatch: Dispatch,
+interface Props {
+  illust: Illust
+  user: User
+  isIllustOnly: boolean
+  isShowCaption: boolean
+  openUserDrawer: (userId: number) => undefined
+  openPreview: (type: 'illust' | 'manga') => undefined
+  addColumnSearchIllust: Function
+  dispatch: Dispatch
 }
 
-class BoxContainer extends React.Component<Props & { intl: IntlShape }> {
+class BoxContainer extends React.Component<
+  Props & {
+    intl: IntlShape
+  }
+> {
   shouldComponentUpdate(nextProps: Props) {
     const { illust, isIllustOnly, isShowCaption } = this.props
     const nextIllust = nextProps.illust
+
     if (nextIllust.isBookmarked !== illust.isBookmarked) {
       return true
     } else if (nextIllust.totalBookmarks !== illust.totalBookmarks) {
@@ -41,26 +44,27 @@ class BoxContainer extends React.Component<Props & { intl: IntlShape }> {
     } else if (nextProps.isIllustOnly !== isIllustOnly) {
       return true
     }
+
     return false
   }
 
   handleTagClick = (tag: string) => {
     this.props.addColumnSearchIllust(tag)
   }
-
   handleContextMenu = (e: Event) => {
     e.preventDefault()
-
     const { dispatch, illust, intl } = this.props
+    const menu = createMenu({
+      dispatch,
+      illust,
+      intl,
+    }) // $FlowFixMe
 
-    const menu = createMenu({ dispatch, illust, intl })
-    // $FlowFixMe
     menu.popup(remote.getCurrentWindow())
   }
 
   render() {
     const { openPreview, openUserDrawer, illust } = this.props
-
     return (
       <Box
         id={illust.id}
@@ -74,10 +78,9 @@ class BoxContainer extends React.Component<Props & { intl: IntlShape }> {
   }
 }
 
-type OP = {
-  id: number,
+interface OP {
+  id: number
 }
-
 const mapStateToProps = createStructuredSelector({
   illust: makeSelectIllust(),
   user: selectors.makeSelectUser(),
@@ -88,6 +91,7 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch: Dispatch, { id }) => {
   return {
     dispatch,
+
     openPreview(type: 'illust' | 'manga') {
       if (type === 'illust') {
         dispatch(openIllustViewer(id))
@@ -95,9 +99,11 @@ const mapDispatchToProps = (dispatch: Dispatch, { id }) => {
         dispatch(openMangaPreview(id))
       }
     },
+
     openUserDrawer(userId: number) {
       dispatch(openDrawer(userId))
     },
+
     addColumnSearchIllust(tag: string) {
       dispatch(addColumn(tag))
     },
diff --git a/app/containers/ColumnBookmark/index.js b/app/containers/ColumnBookmark/index.tsx
similarity index 76%
rename from app/containers/ColumnBookmark/index.js
rename to app/containers/ColumnBookmark/index.tsx
index 7ae7d1b6..66a03ef0 100644
--- a/app/containers/ColumnBookmark/index.js
+++ b/app/containers/ColumnBookmark/index.tsx
@@ -1,33 +1,30 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnHeader from 'components/ColumnHeader'
 import ColumnBody from 'components/ColumnBody'
-import type { ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts } from './selectors'
 import * as actions from './actions'
 import messages from './messages'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  onFetch: () => void,
-  onNext: () => void,
+  illusts: Illust[]
+  onFetch: () => undefined
+  onNext: () => undefined
 } & OP &
   ColumnProps
-
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnBookMark extends React.PureComponent<Props & InjectProp> {
@@ -44,11 +41,9 @@ class ColumnBookMark extends React.PureComponent<Props & InjectProp> {
       intl,
       onHeaderClick,
       setNode,
-    } = this.props
+    } = this.props // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 200
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -79,6 +74,7 @@ function mapDispatchToProps(dispatch: Dispatch, { id }: OP) {
     onFetch() {
       dispatch(actions.fetch(id))
     },
+
     onNext() {
       dispatch(actions.fetchNext(id))
     },
@@ -89,5 +85,4 @@ const connector: Connector<OP, Props> = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(injectIntl(ColumnBookMark))
diff --git a/app/containers/ColumnFollow/index.js b/app/containers/ColumnFollow/index.tsx
similarity index 76%
rename from app/containers/ColumnFollow/index.js
rename to app/containers/ColumnFollow/index.tsx
index b857eb45..6a32f695 100644
--- a/app/containers/ColumnFollow/index.js
+++ b/app/containers/ColumnFollow/index.tsx
@@ -1,33 +1,30 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import { type ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts } from './selectors'
 import * as actions from './actions'
 import messages from './messages'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  onFetch: () => void,
-  onNext: () => void,
+  illusts: Illust[]
+  onFetch: () => undefined
+  onNext: () => undefined
 } & OP &
   ColumnProps
-
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnFollow extends React.Component<Props & InjectProp> {
@@ -44,11 +41,9 @@ class ColumnFollow extends React.Component<Props & InjectProp> {
       intl,
       onHeaderClick,
       setNode,
-    } = this.props
+    } = this.props // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 200
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -79,6 +74,7 @@ function mapDispatchToProps(dispatch: Dispatch, { id }: OP) {
     onFetch() {
       dispatch(actions.fetch(id))
     },
+
     onNext() {
       dispatch(actions.fetchNext(id))
     },
@@ -89,5 +85,4 @@ const connector: Connector<OP, Props> = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(injectIntl(ColumnFollow))
diff --git a/app/containers/ColumnHistory/index.js b/app/containers/ColumnHistory/index.tsx
similarity index 78%
rename from app/containers/ColumnHistory/index.js
rename to app/containers/ColumnHistory/index.tsx
index 22233a6d..f50473e3 100644
--- a/app/containers/ColumnHistory/index.js
+++ b/app/containers/ColumnHistory/index.tsx
@@ -1,35 +1,31 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import type { ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts } from './selectors'
 import messages from './messages'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
-
 type Props = {
-  illusts: Array<Illust>,
+  illusts: Illust[]
 } & OP &
   ColumnProps
-
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnHistory extends React.PureComponent<Props & InjectProp> {
   render() {
     const { illusts, id, onClose, intl, onHeaderClick, setNode } = this.props
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -56,7 +52,5 @@ class ColumnHistory extends React.PureComponent<Props & InjectProp> {
 const mapStateToProps = createStructuredSelector({
   illusts: makeSelectIllusts(),
 })
-
 const connector: Connector<OP, Props> = connect(mapStateToProps)
-
 export default connector(injectIntl(ColumnHistory))
diff --git a/app/containers/ColumnManager/index.js b/app/containers/ColumnManager/index.tsx
similarity index 77%
rename from app/containers/ColumnManager/index.js
rename to app/containers/ColumnManager/index.tsx
index 5dcee10e..a5be0ece 100644
--- a/app/containers/ColumnManager/index.js
+++ b/app/containers/ColumnManager/index.tsx
@@ -1,9 +1,9 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { Dispatch } from 'redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { removeTable } from 'containers/Table/actions'
-import scrollToTopBind, { type HandleHeaderClick } from 'utils/scrollToTopBind'
+import scrollToTopBind, { HandleHeaderClick } from 'utils/scrollToTopBind'
 import ColumnRanking from '../ColumnRanking'
 import ColumnRankingR18 from '../ColumnRankingR18'
 import ColumnBookmark from '../ColumnBookmark'
@@ -12,31 +12,34 @@ import ColumnUserIllust from '../ColumnUserIllust'
 import ColumnSearch from '../ColumnSearch'
 import ColumnHistory from '../ColumnHistory'
 import ColumnRecommended from '../ColumnRecommended'
-import type { ColumnManagerId, ColumnType } from './reducer'
+import { ColumnManagerId, ColumnType } from './reducer'
 import { makeSelectColumnId, makeSelectType } from './selectors'
 
-export type Props = {
-  id: any, // TODO
-  type: ColumnType,
-  onClose: () => void,
+export interface Props {
+  id: any
+  type: ColumnType
+  onClose: () => undefined
 }
 
-type State = {
-  onHeaderClick: HandleHeaderClick,
+interface State {
+  onHeaderClick: HandleHeaderClick
 }
 
-export type ColumnProps = {
-  onHeaderClick: HandleHeaderClick,
-  setNode: () => void,
-  onClose: () => void,
+export interface ColumnProps {
+  onHeaderClick: HandleHeaderClick
+  setNode: () => undefined
+  onClose: () => undefined
 }
 
 class ColumnManager extends React.PureComponent<Props, State> {
-  state: State = { onHeaderClick: () => {} }
-
+  state: State = {
+    onHeaderClick: () => {},
+  }
   setNode = node => {
     if (node) {
-      this.setState({ onHeaderClick: scrollToTopBind(node) })
+      this.setState({
+        onHeaderClick: scrollToTopBind(node),
+      })
     }
   }
 
@@ -74,14 +77,14 @@ class ColumnManager extends React.PureComponent<Props, State> {
         <ColumnRecommended {...rest} {...this.state} setNode={this.setNode} />
       )
     }
+
     return null
   }
 }
 
-type OP = {
-  id: ColumnManagerId,
+interface OP {
+  id: ColumnManagerId
 }
-
 const mapStateToProps = createStructuredSelector({
   id: makeSelectColumnId(),
   type: makeSelectType(),
@@ -93,9 +96,8 @@ const mapDispatchToProps = (dispatch: Dispatch, { id }: OP) => ({
   },
 })
 
-const connector: Connector<OP, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(ColumnManager)
diff --git a/app/containers/ColumnRanking/index.js b/app/containers/ColumnRanking/index.tsx
similarity index 73%
rename from app/containers/ColumnRanking/index.js
rename to app/containers/ColumnRanking/index.tsx
index b59a641e..e2dd7cae 100644
--- a/app/containers/ColumnRanking/index.js
+++ b/app/containers/ColumnRanking/index.tsx
@@ -1,34 +1,33 @@
-// @flow
 import * as React from 'react'
 import { bindActionCreators } from 'redux'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import type { ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts } from './selectors'
 import * as actions from './actions'
 import messages from './messages'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
 
 type Props = {
-  illusts: Array<Illust>,
-  onNext: () => void,
-  actions: typeof actions,
+  illusts: Illust[]
+  onNext: () => undefined
+  actions: typeof actions
 } & OP &
   ColumnProps
 
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnRanking extends React.Component<Props & InjectProp> {
@@ -45,11 +44,9 @@ class ColumnRanking extends React.Component<Props & InjectProp> {
   }
 
   render() {
-    const { illusts, id, onClose, intl, setNode } = this.props
+    const { illusts, id, onClose, intl, setNode } = this.props // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 200
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -81,9 +78,8 @@ function mapDispatch(dispatch: Dispatch) {
   }
 }
 
-const connector: Connector<OP, Props> = connect(
+const connector = connect(
   mapState,
   mapDispatch
 )
-
 export default connector(injectIntl(ColumnRanking))
diff --git a/app/containers/ColumnRankingR18/index.js b/app/containers/ColumnRankingR18/index.tsx
similarity index 71%
rename from app/containers/ColumnRankingR18/index.js
rename to app/containers/ColumnRankingR18/index.tsx
index 827ab8a8..f84344f7 100644
--- a/app/containers/ColumnRankingR18/index.js
+++ b/app/containers/ColumnRankingR18/index.tsx
@@ -1,34 +1,31 @@
-// @flow
 import * as React from 'react'
 import { bindActionCreators } from 'redux'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import type { ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts } from './selectors'
 import * as actions from './actions'
 import messages from './messages'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  onNext: () => void,
-  actions: typeof actions,
+  illusts: Illust[]
+  onNext: () => undefined
+  actions: typeof actions
 } & OP &
   ColumnProps
-
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnRankingR18 extends React.Component<Props & InjectProp> {
@@ -45,15 +42,13 @@ class ColumnRankingR18 extends React.Component<Props & InjectProp> {
   }
 
   render() {
-    const { illusts, id, onClose, intl, setNode } = this.props
+    const { illusts, id, onClose, intl, setNode } = this.props // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 200
-
     return (
       <ColumnRoot>
         <ColumnHeader
-          name={intl.formatMessage(messages[id])}
+          name={intl.formatMessage(messages[id] as any)}
           onClose={onClose}
           onTopClick={this.handleTop}
         />
@@ -81,9 +76,8 @@ function mapDispatch(dispatch: Dispatch) {
   }
 }
 
-const connector: Connector<OP, Props> = connect(
+const connector = connect(
   mapState,
   mapDispatch
 )
-
 export default connector(injectIntl(ColumnRankingR18))
diff --git a/app/containers/ColumnRecommended/index.js b/app/containers/ColumnRecommended/index.tsx
similarity index 78%
rename from app/containers/ColumnRecommended/index.js
rename to app/containers/ColumnRecommended/index.tsx
index b4ee4bfa..37a09ab6 100644
--- a/app/containers/ColumnRecommended/index.js
+++ b/app/containers/ColumnRecommended/index.tsx
@@ -1,29 +1,27 @@
-// @flow
 import * as React from 'react'
 import { bindActionCreators } from 'redux'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import { injectIntl, type IntlShape } from 'react-intl'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { injectIntl, IntlShape } from 'react-intl'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import type { ColumnProps } from '../ColumnManager'
+import { ColumnProps } from '../ColumnManager'
 import { makeSelectIllusts } from './selectors'
 import * as actions from './actions'
 import messages from './messages'
 
 type Props = {
-  illusts: Array<Illust>,
-  onFetch: () => void,
-  onNext: () => void,
-  actions: typeof actions,
+  illusts: Illust[]
+  onFetch: () => undefined
+  onNext: () => undefined
+  actions: typeof actions
 } & ColumnProps
-
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
 
 class ColumnRecommended extends React.Component<Props & InjectProp> {
@@ -38,11 +36,9 @@ class ColumnRecommended extends React.Component<Props & InjectProp> {
   }
 
   render() {
-    const { illusts, onClose, onNext, intl, setNode } = this.props
+    const { illusts, onClose, onNext, intl, setNode } = this.props // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 1000
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -73,16 +69,17 @@ function mapDispatch(dispatch: Dispatch) {
     onFetch() {
       dispatch(actions.fetch('recommended'))
     },
+
     onNext() {
       dispatch(actions.fetch('recommended'))
     },
+
     actions: bindActionCreators(actions, dispatch),
   }
 }
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapState,
   mapDispatch
 )
-
 export default connector(injectIntl(ColumnRecommended))
diff --git a/app/containers/ColumnSearch/FilterUsersIn/index.js b/app/containers/ColumnSearch/FilterUsersIn/index.tsx
similarity index 92%
rename from app/containers/ColumnSearch/FilterUsersIn/index.js
rename to app/containers/ColumnSearch/FilterUsersIn/index.tsx
index 5d89e843..c46bed8e 100644
--- a/app/containers/ColumnSearch/FilterUsersIn/index.js
+++ b/app/containers/ColumnSearch/FilterUsersIn/index.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'
@@ -8,21 +7,20 @@ const Wrap = styled.div`
   flex-direction: column;
   color: #eee;
 `
-
 const styles = {
   color: '#eee',
 }
-
 interface Props {
-  defaultValue: string;
-  onChange: Function;
+  defaultValue: string
+  onChange: Function
 }
 
 class FilterUsersIn extends React.Component<Props> {
-  handleChange = (e: Event, value: ?string) => {
+  handleChange = (e: Event, value: string | null | undefined) => {
     if (!value) {
       return
     }
+
     this.props.onChange(Number(value))
   }
 
diff --git a/app/containers/ColumnSearch/index.js b/app/containers/ColumnSearch/index.tsx
similarity index 81%
rename from app/containers/ColumnSearch/index.js
rename to app/containers/ColumnSearch/index.tsx
index 1acb1728..c4e8f0b8 100644
--- a/app/containers/ColumnSearch/index.js
+++ b/app/containers/ColumnSearch/index.tsx
@@ -1,34 +1,32 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
 import ColumnHeaderBookmark from 'components/ColumnHeaderBookmark'
-import type { ColumnProps } from '../ColumnManager'
+import { ColumnProps } from '../ColumnManager'
 import FilterUsersIn from './FilterUsersIn'
-import type { ColumnId } from './reducer'
+// import { ColumnId } from './reducer'
 import * as selectors from './selectors'
 import * as actions from './actions'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: string
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  minBookmarks: number,
-  hasMore: boolean,
-  usersIn: number,
-  onFetch: () => void,
-  onNext: () => void,
-  setMinBookmarks: number => void,
-  onFilterUsersIn: number => void,
-  onStartWatch: Function,
+  illusts: Illust[]
+  minBookmarks: number
+  hasMore: boolean
+  usersIn: number
+  onFetch: () => undefined
+  onNext: () => undefined
+  setMinBookmarks: (a: number) => undefined
+  onFilterUsersIn: (a: number) => undefined
+  onStartWatch: any
 } & OP &
   ColumnProps
 
@@ -53,7 +51,6 @@ class ColumnSearch extends React.PureComponent<Props> {
       setNode,
       onFilterUsersIn,
     } = this.props
-
     return (
       <ColumnRoot>
         <ColumnHeader name={id} onClose={onClose} onTopClick={onHeaderClick}>
@@ -93,24 +90,27 @@ function mapDispatchToProps(dispatch: Dispatch, { id }: OP) {
     onStartWatch() {
       dispatch(actions.startWatch(id))
     },
+
     onFilterUsersIn(usersIn) {
       dispatch(actions.usersIn(id, usersIn))
     },
+
     onFetch() {
       dispatch(actions.fetch(id))
     },
+
     onNext() {
       dispatch(actions.fetchNext(id))
     },
+
     setMinBookmarks(minBookmarks) {
       dispatch(actions.setMinBookbook(id, minBookmarks))
     },
   }
 }
 
-const connector: Connector<OP, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(ColumnSearch)
diff --git a/app/containers/ColumnUserIllust/index.js b/app/containers/ColumnUserIllust/index.tsx
similarity index 79%
rename from app/containers/ColumnUserIllust/index.js
rename to app/containers/ColumnUserIllust/index.tsx
index 20c60510..ac2b52a5 100644
--- a/app/containers/ColumnUserIllust/index.js
+++ b/app/containers/ColumnUserIllust/index.tsx
@@ -1,28 +1,26 @@
-// @flow
 import * as React from 'react'
-import type { User } from 'types/user'
-import { connect, type Connector } from 'react-redux'
+import { User } from 'types/user'
+import { connect, Connector } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import IllustList from 'components/IllustList'
 import ColumnRoot from 'components/ColumnRoot'
 import ColumnBody from 'components/ColumnBody'
 import ColumnHeader from 'components/ColumnHeader'
-import type { ColumnProps } from '../ColumnManager'
-import type { ColumnId } from './reducer'
+import { ColumnProps } from '../ColumnManager'
+import { ColumnId } from './reducer'
 import { makeSelectIllusts, makeSelectUser } from './selectors'
 import * as actions from './actions'
 
-type OP = {
-  id: ColumnId,
+interface OP {
+  id: ColumnId
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  user: User,
-  onFetch: () => void,
-  onNext: () => void,
+  illusts: Illust[]
+  user: User
+  onFetch: () => undefined
+  onNext: () => undefined
 } & OP &
   ColumnProps
 
@@ -41,16 +39,13 @@ class ColumnUserIllust extends React.Component<Props> {
       onHeaderClick,
       setNode,
     } = this.props
-
     const name = user && user.name
 
     if (!name) {
       return null
-    }
+    } // TODO リミットをstoreに保存
 
-    // TODO リミットをstoreに保存
     const hasMore = illusts.length < 200
-
     return (
       <ColumnRoot>
         <ColumnHeader
@@ -82,6 +77,7 @@ function mapDispatchToProps(dispatch: Dispatch, { id }: OP) {
     onFetch() {
       dispatch(actions.fetch(id))
     },
+
     onNext() {
       dispatch(actions.fetchNext(id))
     },
@@ -92,5 +88,4 @@ const connector: Connector<OP, Props> = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(ColumnUserIllust)
diff --git a/app/containers/DrawerManager/index.js b/app/containers/DrawerManager/index.tsx
similarity index 79%
rename from app/containers/DrawerManager/index.js
rename to app/containers/DrawerManager/index.tsx
index 43eb321f..14e5df93 100644
--- a/app/containers/DrawerManager/index.js
+++ b/app/containers/DrawerManager/index.tsx
@@ -1,15 +1,15 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { Dispatch } from 'redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import Drawer from 'components/Drawer'
 import UserDrawerContainer from 'containers/UserDrawerContainer'
 import { closeDrawer } from './actions'
 import { makeSelectOpen } from './selectors'
 
-type Props = {
-  onRequestClose: () => void,
-  open: boolean,
+interface Props {
+  onRequestClose: () => undefined
+  open: boolean
 }
 
 function DrawerManager(props: Props) {
@@ -30,9 +30,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   },
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(DrawerManager)
diff --git a/app/containers/FollowButton/FollowButton.js b/app/containers/FollowButton/FollowButton.tsx
similarity index 76%
rename from app/containers/FollowButton/FollowButton.js
rename to app/containers/FollowButton/FollowButton.tsx
index 4a1ffe95..28554ecc 100644
--- a/app/containers/FollowButton/FollowButton.js
+++ b/app/containers/FollowButton/FollowButton.tsx
@@ -1,18 +1,16 @@
-// @flow
 import * as React from 'react'
-import type { User } from 'types/user'
+import { User } from 'types/user'
 import Button from 'components/common/Button'
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'
 
-export type Props = {
-  user: User,
-  onClick: () => void,
+export interface Props {
+  user: User
+  onClick: () => undefined
 }
-
-type State = {
-  isFollowing: boolean,
-  isFollowed: boolean,
+interface State {
+  isFollowing: boolean
+  isFollowed: boolean
 }
 
 function selectLabel(
@@ -24,6 +22,7 @@ function selectLabel(
   } else if (!isFollowed && isFollowing) {
     return <FormattedMessage {...messages.following} />
   }
+
   return <FormattedMessage {...messages.follow} />
 }
 
@@ -37,24 +36,31 @@ class FollowButton extends React.PureComponent<Props, State> {
     const {
       user: { isFollowed },
     } = this.props
-    this.setState({ isFollowed })
+    this.setState({
+      isFollowed,
+    })
   }
 
   handleMouseEnter = () => {
-    this.setState({ isFollowing: false })
+    this.setState({
+      isFollowing: false,
+    })
   }
-
   handleMouseLeave = () => {
-    this.setState({ isFollowing: true })
+    this.setState({
+      isFollowing: true,
+    })
   }
-
   handleClickUnFollow = () => {
-    this.setState({ isFollowed: false })
+    this.setState({
+      isFollowed: false,
+    })
     this.props.onClick()
   }
-
   handleClickFollow = () => {
-    this.setState({ isFollowing: true })
+    this.setState({
+      isFollowing: true,
+    })
     this.props.onClick()
   }
 
@@ -73,6 +79,7 @@ class FollowButton extends React.PureComponent<Props, State> {
         />
       )
     }
+
     return <Button onClick={this.handleClickFollow} label={label} />
   }
 }
diff --git a/app/containers/FollowButton/index.js b/app/containers/FollowButton/index.tsx
similarity index 59%
rename from app/containers/FollowButton/index.js
rename to app/containers/FollowButton/index.tsx
index 76f6c0a3..1962a2a7 100644
--- a/app/containers/FollowButton/index.js
+++ b/app/containers/FollowButton/index.tsx
@@ -1,10 +1,12 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
-import type { User } from 'types/user'
+import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
+import { User } from 'types/user'
 import { followRequest, unFollowRequest } from './actions'
-import FollowButton, { type Props } from './FollowButton'
+import FollowButton, { Props } from './FollowButton'
 
-type OwnProps = { user: User }
+interface OwnProps {
+  user: User
+}
 
 const mapDispatchToProps = (dispatch: Dispatch, { user }) => ({
   onClick() {
@@ -16,7 +18,7 @@ const mapDispatchToProps = (dispatch: Dispatch, { user }) => ({
   },
 })
 
-const connector: Connector<OwnProps, Props> = connect(
+const connector = connect(
   null,
   mapDispatchToProps
 )
diff --git a/app/containers/HeaderContainer/index.js b/app/containers/HeaderContainer/index.tsx
similarity index 83%
rename from app/containers/HeaderContainer/index.js
rename to app/containers/HeaderContainer/index.tsx
index d7c4f97c..05177edc 100644
--- a/app/containers/HeaderContainer/index.js
+++ b/app/containers/HeaderContainer/index.tsx
@@ -1,8 +1,7 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import Header, { type Props } from 'components/Sidebar'
+import { Dispatch } from 'types'
+import Header, { Props } from 'components/Sidebar'
 import { logout } from '../LoginModal/actions'
 import { openModal } from '../ModalManeger/actions'
 import {
@@ -25,27 +24,33 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   onLogout() {
     dispatch(logout())
   },
+
   onClickAdd() {
     dispatch(openModal('AddColumn'))
   },
+
   onToggleDropdown() {
     dispatch(toggleDropdown())
   },
+
   onCloseDropdown() {
     dispatch(closeDropdown())
   },
+
   onOpenFilterModal() {
     dispatch(openModal('Setting'))
   },
+
   toggleSearchField() {
     dispatch(toggleSearchField())
   },
+
   closeSearchField() {
     dispatch(closeSearchField())
   },
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
diff --git a/app/containers/IllustPreview/IllustPreview.js b/app/containers/IllustPreview/IllustPreview.tsx
similarity index 87%
rename from app/containers/IllustPreview/IllustPreview.js
rename to app/containers/IllustPreview/IllustPreview.tsx
index 09d0d865..4ee4feca 100644
--- a/app/containers/IllustPreview/IllustPreview.js
+++ b/app/containers/IllustPreview/IllustPreview.tsx
@@ -1,19 +1,17 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 import LazyImg from './LazyImg'
 
 interface Props {
-  from: string;
-  original: string;
-  width: number;
-  height: number;
-  isLoaded: boolean;
-  onLoad: () => void;
-  onUnLoad: () => void;
-  onClose: () => void;
+  from: string
+  original: string
+  width: number
+  height: number
+  isLoaded: boolean
+  onLoad: () => undefined
+  onUnLoad: () => undefined
+  onClose: () => undefined
 }
-
 export default class IllustPreview extends React.PureComponent<Props> {
   componentWillUnmount() {
     this.props.onUnLoad()
@@ -27,7 +25,6 @@ export default class IllustPreview extends React.PureComponent<Props> {
   handleOnClose = () => {
     this.props.onClose()
   }
-
   escToClose = (event: Event) => {
     // $FlowFixMe
     if (event.keyCode === 27) {
@@ -37,7 +34,6 @@ export default class IllustPreview extends React.PureComponent<Props> {
 
   render() {
     const { width, height, from, original } = this.props
-
     return (
       <StyledPreview onClick={this.handleOnClose}>
         <LazyImg
@@ -53,7 +49,6 @@ export default class IllustPreview extends React.PureComponent<Props> {
     )
   }
 }
-
 const StyledPreview = styled.div`
   display: flex;
   position: fixed;
diff --git a/app/containers/IllustPreview/LazyImg.js b/app/containers/IllustPreview/LazyImg.tsx
similarity index 76%
rename from app/containers/IllustPreview/LazyImg.js
rename to app/containers/IllustPreview/LazyImg.tsx
index bf6fcd18..382117cb 100644
--- a/app/containers/IllustPreview/LazyImg.js
+++ b/app/containers/IllustPreview/LazyImg.tsx
@@ -1,29 +1,46 @@
-// @flow
 import * as React from 'react'
 import styled, { keyframes } from 'styled-components'
 import CloseButton from 'components/common/CloseButton'
 import { LazyImgWrapper as Wrapper } from './styles'
 
 interface Size {
-  width: number | 'auto';
-  height: number | 'auto';
+  width: number | 'auto'
+  height: number | 'auto'
 }
 
 function calcSize(width: number, height: number): Size {
   const { innerWidth, innerHeight } = window
+
   if (height > innerHeight && width > innerWidth) {
     return width * innerHeight < height * innerWidth
-      ? { width: 'auto', height: innerHeight }
-      : { width: innerWidth, height: 'auto' }
+      ? {
+          width: 'auto',
+          height: innerHeight,
+        }
+      : {
+          width: innerWidth,
+          height: 'auto',
+        }
   }
+
   if (height > innerHeight) {
-    return { width: 'auto', height: innerHeight }
+    return {
+      width: 'auto',
+      height: innerHeight,
+    }
   }
+
   if (width > innerWidth) {
-    return { width: innerWidth, height: 'auto' }
+    return {
+      width: innerWidth,
+      height: 'auto',
+    }
   }
 
-  return { width, height }
+  return {
+    width,
+    height,
+  }
 }
 
 function calcMarginTop(node: HTMLElement | null): number {
@@ -42,21 +59,19 @@ function calcMarginTop(node: HTMLElement | null): number {
 }
 
 interface Props {
-  from: string;
-  original: string;
-  width: number;
-  height: number;
-  isLoaded: boolean;
-  onLoad: () => void;
-  onClose: () => void;
+  from: string
+  original: string
+  width: number
+  height: number
+  isLoaded: boolean
+  onLoad: () => undefined
+  onClose: () => undefined
 }
-
 interface State {
-  isClicked: boolean;
-  fromMarginTop: number;
-  toMarginTop: number;
+  isClicked: boolean
+  fromMarginTop: number
+  toMarginTop: number
 }
-
 export default class LazyImg extends React.PureComponent<Props, State> {
   to: HTMLElement | null
   from: HTMLElement | null
@@ -65,17 +80,15 @@ export default class LazyImg extends React.PureComponent<Props, State> {
     fromMarginTop: 0,
     toMarginTop: 0,
   }
-
   handleLoad = () => {
     if (!this.from) {
       return
     }
+
     this.setState({
       fromMarginTop: calcMarginTop(this.from),
     })
-
     const img = new Image()
-
     img.addEventListener('load', () => {
       if (this.to) {
         this.props.onLoad()
@@ -84,13 +97,13 @@ export default class LazyImg extends React.PureComponent<Props, State> {
         })
       }
     })
-
     img.src = this.props.original
   }
-
   handleClick = (event: Event) => {
     event.stopPropagation()
-    this.setState({ isClicked: !this.state.isClicked })
+    this.setState({
+      isClicked: !this.state.isClicked,
+    })
   }
 
   render() {
@@ -102,8 +115,14 @@ export default class LazyImg extends React.PureComponent<Props, State> {
       return (
         <Wrapper>
           <CloseButton
-            style={{ color: '#676767', top: '10px', right: '10px' }}
-            iconStyle={{ fill: 'white' }}
+            style={{
+              color: '#676767',
+              top: '10px',
+              right: '10px',
+            }}
+            iconStyle={{
+              fill: 'white',
+            }}
             onClick={onClose}
           />
           <Img
@@ -124,7 +143,12 @@ export default class LazyImg extends React.PureComponent<Props, State> {
 
     return (
       <Wrapper>
-        <CloseButton onClick={onClose} iconStyle={{ fill: 'white' }} />
+        <CloseButton
+          onClick={onClose}
+          iconStyle={{
+            fill: 'white',
+          }}
+        />
         <FromImg
           src={this.props.from}
           marginTop={this.state.fromMarginTop}
@@ -139,7 +163,6 @@ export default class LazyImg extends React.PureComponent<Props, State> {
     )
   }
 }
-
 const FromImg = styled.img`
   width: auto;
   height: auto;
@@ -150,13 +173,11 @@ const FromImg = styled.img`
   user-select: none;
   cursor: wait;
 `
-
 const fadeIn = keyframes`
   0% { filter: blur(1px); }
 
   100% { filter: none; }
 `
-
 const Img = styled.img`
   width: auto;
   height: auto;
diff --git a/app/containers/IllustPreview/index.js b/app/containers/IllustPreview/index.tsx
similarity index 81%
rename from app/containers/IllustPreview/index.js
rename to app/containers/IllustPreview/index.tsx
index 281e7de4..f1774807 100644
--- a/app/containers/IllustPreview/index.js
+++ b/app/containers/IllustPreview/index.tsx
@@ -1,9 +1,8 @@
-// @flow
 import React, { Component } from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import {
   coloseIllustViewer,
   startImgLoading,
@@ -12,11 +11,11 @@ import {
 import * as selectors from './selectors'
 import Preview from './IllustPreview'
 
-type Props = {
-  illust: Illust,
-  show: boolean,
-  isImgLoading: boolean,
-  dispatch: Dispatch,
+interface Props {
+  illust: Illust
+  show: boolean
+  isImgLoading: boolean
+  dispatch: Dispatch
 }
 
 class IllustPreviewContainer extends Component<Props> {
@@ -29,11 +28,9 @@ class IllustPreviewContainer extends Component<Props> {
   handleClose = () => {
     this.props.dispatch(coloseIllustViewer())
   }
-
   handleLoad = () => {
     this.props.dispatch(finishImgLoading())
   }
-
   handleUnLoad = () => {
     this.props.dispatch(startImgLoading())
   }
@@ -62,6 +59,5 @@ const mapStateToProps = createStructuredSelector({
   show: selectors.makeSelectIsImage(),
   isImgLoading: selectors.makeSelectIsImgLoding(),
 })
-
-const connecter: Connector<{}, Props> = connect(mapStateToProps)
+const connecter = connect(mapStateToProps)
 export default connecter(IllustPreviewContainer)
diff --git a/app/containers/Language/index.js b/app/containers/Language/index.tsx
similarity index 89%
rename from app/containers/Language/index.js
rename to app/containers/Language/index.tsx
index c838fd42..5746229e 100644
--- a/app/containers/Language/index.js
+++ b/app/containers/Language/index.tsx
@@ -1,29 +1,25 @@
-// @flow
 import electron from 'electron'
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect, Connector } from 'react-redux'
 import { IntlProvider } from 'react-intl'
 import { createStructuredSelector } from 'reselect'
 import { makeSelectLocale } from './selectors'
 import { DEFAULT_LOCALE } from './reducer'
 import * as actions from './actions'
 
-type OP = {
-  messages: Object,
-  children?: React.Element<*>,
+interface OP {
+  messages: object
+  children?: React.Element
 }
-
 type Props = {
-  locale: ?string,
+  locale: string | null | undefined
 } & typeof actions &
   OP
-
 export class Language extends React.Component<Props> {
   componentDidMount() {
     if (!this.props.locale) {
       const app = electron.remote.app || electron.app
       const sysLocale = app.getLocale().toLowerCase()
-
       const locale = ['id', 'ja', 'zh', 'zh-tw'].includes(sysLocale)
         ? sysLocale
         : 'en'
@@ -34,7 +30,6 @@ export class Language extends React.Component<Props> {
   render() {
     const { locale, messages, children } = this.props
     const localeMessages = (messages && locale && messages[locale]) || {}
-
     return (
       <IntlProvider
         defaultLocale={DEFAULT_LOCALE}
@@ -47,11 +42,9 @@ export class Language extends React.Component<Props> {
     )
   }
 }
-
 const mapStateToProps = createStructuredSelector({
   locale: makeSelectLocale(),
 })
-
 const connector: Connector<OP, Props> = connect(
   mapStateToProps,
   actions
diff --git a/app/containers/Language/tests/selectors.test.js b/app/containers/Language/tests/selectors.test.tsx
similarity index 69%
rename from app/containers/Language/tests/selectors.test.js
rename to app/containers/Language/tests/selectors.test.tsx
index 24053d77..870d9dcd 100644
--- a/app/containers/Language/tests/selectors.test.js
+++ b/app/containers/Language/tests/selectors.test.tsx
@@ -2,6 +2,10 @@
 import { makeSelectLocale } from '../selectors'
 
 test('makeSelectLocale', () => {
-  const state = { Language: { locale: 'en' } }
+  const state = {
+    Language: {
+      locale: 'en',
+    },
+  }
   expect(makeSelectLocale()(state)).toMatchSnapshot()
 })
diff --git a/app/containers/LoginModal/index.js b/app/containers/LoginModal/index.tsx
similarity index 73%
rename from app/containers/LoginModal/index.js
rename to app/containers/LoginModal/index.tsx
index 49e5fb56..4f7ca7d1 100644
--- a/app/containers/LoginModal/index.js
+++ b/app/containers/LoginModal/index.tsx
@@ -1,8 +1,7 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import LoginModal, { type Props } from 'components/LoginModal'
-import type { Dispatch } from 'types'
+import LoginModal, { Props } from 'components/LoginModal'
+import { Dispatch } from 'types'
 import { loginRequest } from './actions'
 import * as selectors from './selectors'
 
@@ -19,9 +18,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   },
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(LoginModal)
diff --git a/app/containers/LoginModal/tests/selectors.test.js b/app/containers/LoginModal/tests/selectors.test.tsx
similarity index 80%
rename from app/containers/LoginModal/tests/selectors.test.js
rename to app/containers/LoginModal/tests/selectors.test.tsx
index 893fd85a..840f3b28 100644
--- a/app/containers/LoginModal/tests/selectors.test.js
+++ b/app/containers/LoginModal/tests/selectors.test.tsx
@@ -14,10 +14,7 @@ const mockStore = {
 
 const createMock = s => {
   return {
-    LoginModal: {
-      ...mockStore,
-      ...s,
-    },
+    LoginModal: { ...mockStore, ...s },
   }
 }
 
@@ -25,20 +22,23 @@ test('makeSelectInfo', () => {
   const getInfo = selectors.makeSelectInfo()
   expect(getInfo(mockStore)).toMatchSnapshot()
 })
-
 test('makeSelectIsLoginFailure', () => {
   const s = selectors.makeSelectIsLoginFailure()
   expect(s(mockStore)).toBe(false)
 })
-
 test('makeSelectIsLoading', () => {
   const s = selectors.makeSelectIsLoading()
   expect(s(mockStore)).toBe(false)
 })
-
 test('getMyId', () => {
   expect(selectors.getMyId(mockStore)).toBeNull()
-  expect(selectors.getMyId(createMock({ account: { id: '1' } }))).toStrictEqual(
-    '1'
-  )
+  expect(
+    selectors.getMyId(
+      createMock({
+        account: {
+          id: '1',
+        },
+      })
+    )
+  ).toStrictEqual('1')
 })
diff --git a/app/containers/MangaPreview/MultiPreview.js b/app/containers/MangaPreview/MultiPreview.tsx
similarity index 65%
rename from app/containers/MangaPreview/MultiPreview.js
rename to app/containers/MangaPreview/MultiPreview.tsx
index 7ff6cf9a..a319bb79 100644
--- a/app/containers/MangaPreview/MultiPreview.js
+++ b/app/containers/MangaPreview/MultiPreview.tsx
@@ -1,24 +1,26 @@
-// @flow
 import * as React from 'react'
-import type { MetaPages } from 'types/illust'
+import { MetaPages } from 'types/illust'
 import CloseButton from 'components/common/CloseButton'
 import { Wrapper, Item, Img } from './styles'
 
-type Props = {
-  pages: MetaPages,
-  onClose: () => void,
+interface Props {
+  pages: MetaPages
+  onClose: () => undefined
 }
-
 export default function MultiPreview({ pages, onClose }: Props) {
   const imgs = pages.map(page => (
     <Item key={page.imageUrls.medium}>
       <Img src={page.imageUrls.large} />
     </Item>
   ))
-
   return (
     <Wrapper onClick={onClose}>
-      <CloseButton onClick={onClose} style={{ position: 'fixed' }} />
+      <CloseButton
+        onClick={onClose}
+        style={{
+          position: 'fixed',
+        }}
+      />
       {imgs}
     </Wrapper>
   )
diff --git a/app/containers/MangaPreview/index.js b/app/containers/MangaPreview/index.tsx
similarity index 72%
rename from app/containers/MangaPreview/index.js
rename to app/containers/MangaPreview/index.tsx
index 9b1d0b47..21383087 100644
--- a/app/containers/MangaPreview/index.js
+++ b/app/containers/MangaPreview/index.tsx
@@ -1,16 +1,15 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
-import type { Illust } from 'types/illust'
+import { Dispatch } from 'types'
+import { Illust } from 'types/illust'
 import { closeMangaPreview } from './actions'
 import MultiPreview from './MultiPreview'
 import { makeSelectIllust } from './selectors'
 
-type Props = {
-  illust: Illust,
-  close: () => void,
+interface Props {
+  illust: Illust
+  close: () => undefined
 }
 
 function MangaPreviewContainer({ illust, close }: Props) {
@@ -24,8 +23,7 @@ function MangaPreviewContainer({ illust, close }: Props) {
 const mapStateToProps = createStructuredSelector({
   illust: makeSelectIllust(),
 })
-
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   (dispatch: Dispatch) => {
     return {
diff --git a/app/containers/ModalManeger/ModalWrapper.js b/app/containers/ModalManeger/ModalWrapper.tsx
similarity index 82%
rename from app/containers/ModalManeger/ModalWrapper.js
rename to app/containers/ModalManeger/ModalWrapper.tsx
index 38f3e180..1d8fe600 100644
--- a/app/containers/ModalManeger/ModalWrapper.js
+++ b/app/containers/ModalManeger/ModalWrapper.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import EventListener from 'react-event-listener'
 import handleEscCreater from 'utils/handleEscCreater'
@@ -7,25 +6,22 @@ import CloseButton from 'components/common/CloseButton'
 import { Content, Wrap } from './sytles'
 
 interface Props {
-  open: boolean;
-  onRequestClose?: Function;
-  children?: React.Node;
-  onClose: Function;
+  open: boolean
+  onRequestClose?: Function
+  children?: React.Node
+  onClose: Function
 }
-
 export default class ModalWrapper extends React.Component<Props> {
   node: HTMLElement
-
   requestClose = () => {
     this.props.onClose()
     const { onRequestClose } = this.props
+
     if (onRequestClose) {
       onRequestClose(false)
     }
   }
-
   handleKeyUp = handleEscCreater(this.requestClose)
-
   setNode = (node: HTMLElement | null) => {
     if (node) {
       this.node = node
@@ -46,7 +42,13 @@ export default class ModalWrapper extends React.Component<Props> {
           <CloseButton onClick={onClose} />
           {open && children}
         </Content>
-        <Overlay show={open} style={{ zIndex: 800 }} onClick={onClose} />
+        <Overlay
+          show={open}
+          style={{
+            zIndex: 800,
+          }}
+          onClick={onClose}
+        />
       </Wrap>
     )
   }
diff --git a/app/containers/ModalManeger/index.js b/app/containers/ModalManeger/index.tsx
similarity index 80%
rename from app/containers/ModalManeger/index.js
rename to app/containers/ModalManeger/index.tsx
index 5d8cd41d..95eec7c3 100644
--- a/app/containers/ModalManeger/index.js
+++ b/app/containers/ModalManeger/index.tsx
@@ -1,20 +1,19 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
+import { Dispatch } from 'types'
 import LoginModal from '../LoginModal'
 import AddColumnModal from '../AddColumnModal'
 import SettingModal from '../SettingModal'
-import type { ModalType } from './reducer'
+import { ModalType } from './reducer'
 import { closeModal } from './actions'
 import ModalWrapper from './ModalWrapper'
 import { makeSelectType, makeSelectOpen } from './selector'
 
-type Props = {
-  type: ModalType,
-  open: boolean,
-  closeModal: () => void,
+interface Props {
+  type: ModalType
+  open: boolean
+  closeModal: () => undefined
 }
 
 function Modal({ type, open, closeModal }: Props) {
@@ -26,6 +25,7 @@ function Modal({ type, open, closeModal }: Props) {
     } else if (type === 'Login') {
       return <LoginModal />
     }
+
     return <AddColumnModal />
   }
 
@@ -47,7 +47,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   },
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
diff --git a/app/containers/ModalManeger/sytles.js b/app/containers/ModalManeger/sytles.tsx
similarity index 98%
rename from app/containers/ModalManeger/sytles.js
rename to app/containers/ModalManeger/sytles.tsx
index 55108c8a..a01baa76 100644
--- a/app/containers/ModalManeger/sytles.js
+++ b/app/containers/ModalManeger/sytles.tsx
@@ -1,4 +1,3 @@
-// @flow
 import styled, { keyframes } from 'styled-components'
 
 export const Wrap = styled.div`
@@ -14,7 +13,6 @@ export const Wrap = styled.div`
   left: 0;
   z-index: 700;
 `
-
 const fadeIn = keyframes`
   0% {
     opacity: 0;
@@ -28,7 +26,6 @@ const fadeIn = keyframes`
     margin-top: 0;
   }
 `
-
 export const Content = styled.div`
   z-index: 900;
   position: relative;
diff --git a/app/containers/Notify/saga.ts b/app/containers/Notify/saga.ts
index 9d60b842..069cd849 100644
--- a/app/containers/Notify/saga.ts
+++ b/app/containers/Notify/saga.ts
@@ -1,5 +1,5 @@
-import { select, takeEvery } from 'redux-saga/effects'
 import { shell } from 'electron'
+import { select, takeEvery } from 'redux-saga/effects'
 import { Illust } from 'types/illust'
 import { User } from 'types/user'
 import { getSelectIllust } from '../IllustById/selectors'
diff --git a/app/containers/PreviewFactory/Preview.js b/app/containers/PreviewFactory/Preview.tsx
similarity index 86%
rename from app/containers/PreviewFactory/Preview.js
rename to app/containers/PreviewFactory/Preview.tsx
index 38e9e751..d1f5804b 100644
--- a/app/containers/PreviewFactory/Preview.js
+++ b/app/containers/PreviewFactory/Preview.tsx
@@ -1,11 +1,10 @@
-// @flow
 import * as React from 'react'
 import IllustPreview from '../IllustPreview'
 import MangaPreview from '../MangaPreview'
 
 export interface Props {
-  isOpenImage: boolean;
-  isOpenManga: boolean;
+  isOpenImage: boolean
+  isOpenManga: boolean
 }
 
 const Preview = ({ isOpenImage, isOpenManga }: Props) => {
diff --git a/app/containers/PreviewFactory/index.js b/app/containers/PreviewFactory/index.tsx
similarity index 65%
rename from app/containers/PreviewFactory/index.js
rename to app/containers/PreviewFactory/index.tsx
index de9c5b25..4518e37d 100644
--- a/app/containers/PreviewFactory/index.js
+++ b/app/containers/PreviewFactory/index.tsx
@@ -1,15 +1,12 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { makeSelectOpen } from '../MangaPreview/selectors'
 import { makeSelectIsImage } from '../IllustPreview/selectors'
-import Preview, { type Props } from './Preview'
+import Preview, { Props } from './Preview'
 
 const mapStateToProps = createStructuredSelector({
   isOpenImage: makeSelectIsImage(),
   isOpenManga: makeSelectOpen(),
 })
-
-const connecter: Connector<{}, Props> = connect(mapStateToProps)
-
+const connecter = connect(mapStateToProps)
 export default connecter(Preview)
diff --git a/app/containers/Root/index.js b/app/containers/Root/index.tsx
similarity index 89%
rename from app/containers/Root/index.js
rename to app/containers/Root/index.tsx
index 6165887c..7fa50bb7 100644
--- a/app/containers/Root/index.js
+++ b/app/containers/Root/index.tsx
@@ -1,17 +1,16 @@
-// @flow
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import App from 'containers/App'
 import Language from 'containers/Language'
-import type { Store } from 'types'
+import { Store } from 'types'
 import { GlobalStyle } from '../../styles/global-styles'
 import { translationMessages } from '../../i18n'
 
-type Props = {
-  store: Store,
-  persistor: any,
+interface Props {
+  store: Store
+  persistor: any
 }
 
 function Root({ store, persistor }: Props) {
diff --git a/app/containers/SearchField/Popover.js b/app/containers/SearchField/Popover.tsx
similarity index 86%
rename from app/containers/SearchField/Popover.js
rename to app/containers/SearchField/Popover.tsx
index 23ac869a..a92e9bd5 100644
--- a/app/containers/SearchField/Popover.js
+++ b/app/containers/SearchField/Popover.tsx
@@ -1,20 +1,17 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
 interface ItemProps {
-  start: string;
-  end: string;
-  onClick: () => void;
+  start: string
+  end: string
+  onClick: () => undefined
 }
-
 export const Item = ({ start, end, onClick }: ItemProps) => (
   <ItemWrap onClick={onClick}>
     <u>{start}</u>
     {end}
   </ItemWrap>
 )
-
 const ItemWrap = styled.div`
   height: 45px;
   padding: 0 12px;
@@ -25,21 +22,17 @@ const ItemWrap = styled.div`
     background-color: rgb(230, 239, 247);
   }
 `
-
 interface Props {
-  title: string | React.Element<any>;
-  children?: React.Node;
+  title: string | React.Element
+  children?: React.Node
 }
-
 const Wrap = styled.div`
   box-sizing: border-box;
   background: white;
 `
-
 const Content = styled.div`
   padding-top: 4px;
 `
-
 const Title = styled.div`
   background-color: #e7e7e7;
   font-size: 0.8rem;
diff --git a/app/containers/SearchField/PopoverAuto.js b/app/containers/SearchField/PopoverAuto.tsx
similarity index 88%
rename from app/containers/SearchField/PopoverAuto.js
rename to app/containers/SearchField/PopoverAuto.tsx
index 9a1ba6e7..744d6d4d 100644
--- a/app/containers/SearchField/PopoverAuto.js
+++ b/app/containers/SearchField/PopoverAuto.tsx
@@ -1,18 +1,18 @@
-// @flow
 import * as React from 'react'
 import { FormattedMessage } from 'react-intl'
 import Popover, { Item } from './Popover'
 import messages from './messages'
 
 interface Props {
-  value: string;
-  keywords: string[];
-  onClick: (word: string) => void;
+  value: string
+  keywords: string[]
+  onClick: (word: string) => undefined
 }
 
 const PopoverAuto = ({ value, keywords, onClick }: Props) => {
   const list = keywords.map(keyword => {
     const handleClick = () => onClick(keyword)
+
     const start = keyword.slice(0, value.length)
     const end = keyword.slice(value.length)
     return <Item key={keyword} onClick={handleClick} start={start} end={end} />
diff --git a/app/containers/SearchField/SearchFiled.js b/app/containers/SearchField/SearchFiled.tsx
similarity index 80%
rename from app/containers/SearchField/SearchFiled.js
rename to app/containers/SearchField/SearchFiled.tsx
index 66e6cceb..0ad589fd 100644
--- a/app/containers/SearchField/SearchFiled.js
+++ b/app/containers/SearchField/SearchFiled.tsx
@@ -1,6 +1,5 @@
-// @flow
 import React, { Component } from 'react'
-import { injectIntl, type IntlShape } from 'react-intl'
+import { injectIntl, IntlShape } from 'react-intl'
 import { findDOMNode } from 'react-dom'
 import { throttle } from 'lodash'
 import PopoverAuto from './PopoverAuto'
@@ -8,23 +7,24 @@ import UsersOver from './UsersOver'
 import messages from './messages'
 import { Field, Input, Popup, Wrap } from './styles'
 
-type InjectProp = {
-  intl: IntlShape,
+interface InjectProp {
+  intl: IntlShape
 }
-
-export type Props = {
-  keywords: Array<string>,
-  onClose: () => void,
-  onFetch: (word: string) => void,
-  onSubmit: (tag: string) => void,
+export interface Props {
+  keywords: string[]
+  onClose: () => undefined
+  onFetch: (word: string) => undefined
+  onSubmit: (tag: string) => undefined
 }
-
-type State = {
-  value: string,
+interface State {
+  value: string
 }
 
 class SearchField extends Component<Props & InjectProp, State> {
-  state: State = { value: '', keywords: [] }
+  state: State = {
+    value: '',
+    keywords: [],
+  }
 
   componentDidMount() {
     window.addEventListener('click', this._handleClose)
@@ -36,40 +36,47 @@ class SearchField extends Component<Props & InjectProp, State> {
 
   handleChange = ({ target }: Event) => {
     if (target instanceof HTMLInputElement) {
-      this.setState({ value: target.value })
+      this.setState({
+        value: target.value,
+      })
+
       this._autoComplte()
     }
   }
-
   _handleClose = (event: any) => {
     event.preventDefault()
     let node = event.target
+
     while (node) {
       if (node === findDOMNode(this)) {
         return
       }
+
       node = node.parentNode
     }
+
     this.props.onClose()
   }
-
   _autoComplte = throttle(() => {
     const { value } = this.state
+
     if (value === '') {
       return
     }
+
     this.props.onFetch(value)
   }, 200)
-
-  handleSubmit = (event: SyntheticKeyboardEvent<>) => {
+  handleSubmit = (event: SyntheticKeyboardEvent) => {
     // eslint-disable-line no-undef
     const text = this.state.value.trim()
+
     if (event.which === 13 && text !== '') {
       this.props.onSubmit(text)
-      this.setState({ value: '' })
+      this.setState({
+        value: '',
+      })
     }
   }
-
   handleClick = (keyword: string) => {
     if (keyword !== '') {
       this.props.onSubmit(keyword)
@@ -80,7 +87,6 @@ class SearchField extends Component<Props & InjectProp, State> {
     const { intl, keywords } = this.props
     const { formatMessage } = intl
     const { value } = this.state
-
     return (
       <Wrap>
         <Field>
diff --git a/app/containers/SearchField/UsersOver.js b/app/containers/SearchField/UsersOver.tsx
similarity index 89%
rename from app/containers/SearchField/UsersOver.js
rename to app/containers/SearchField/UsersOver.tsx
index 058b1c02..eb31860b 100644
--- a/app/containers/SearchField/UsersOver.js
+++ b/app/containers/SearchField/UsersOver.tsx
@@ -1,16 +1,16 @@
-// @flow
 import * as React from 'react'
 import Popover, { Item } from './Popover'
 
 interface Props {
-  value: string;
-  onClick: (word: string) => void;
+  value: string
+  onClick: (word: string) => undefined
 }
 
 const UsersOver = ({ value, onClick }: Props) => {
   const bookmarkNumbers = [100, 500, 1000, 3000, 5000, 10000]
   const list = bookmarkNumbers.map(v => {
     const handleClick = () => onClick(`${value}${v}users入り`)
+
     return (
       <Item key={v} onClick={handleClick} start={value} end={`${v}users入り`} />
     )
diff --git a/app/containers/SearchField/index.js b/app/containers/SearchField/index.tsx
similarity index 78%
rename from app/containers/SearchField/index.js
rename to app/containers/SearchField/index.tsx
index db726ff3..82e919bc 100644
--- a/app/containers/SearchField/index.js
+++ b/app/containers/SearchField/index.tsx
@@ -1,11 +1,10 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
+import { Dispatch } from 'types'
 import { closeSearchField } from '../HeaderContainer/actions'
 import { addColumn } from '../ColumnSearch/actions'
 import SearchField from './SearchFiled'
-import type { Props } from './SearchFiled'
+import { Props } from './SearchFiled'
 import * as actions from './actions'
 import { makeSelectKeyword } from './selectors'
 
@@ -13,9 +12,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   onFetch(word: string) {
     dispatch(actions.fetchRequest(word))
   },
+
   onSubmit(tag: string) {
     dispatch(addColumn(tag))
   },
+
   onClose() {
     dispatch(closeSearchField())
   },
@@ -24,8 +25,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 const mapStateToProps = createStructuredSelector({
   keywords: makeSelectKeyword(),
 })
-
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
diff --git a/app/containers/SettingModal/Card.js b/app/containers/SettingModal/Card.tsx
similarity index 88%
rename from app/containers/SettingModal/Card.js
rename to app/containers/SettingModal/Card.tsx
index fede86ef..5f4011fc 100644
--- a/app/containers/SettingModal/Card.js
+++ b/app/containers/SettingModal/Card.tsx
@@ -1,9 +1,8 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 
 interface Props {
-  children?: React.Node;
+  children?: React.Node
 }
 
 const Card = ({ children }: Props) => <Wrap>{children}</Wrap>
@@ -14,5 +13,4 @@ const Wrap = styled.div`
   margin: 10px;
   padding: 10px;
 `
-
 export default Card
diff --git a/app/containers/SettingModal/LimitSetting.js b/app/containers/SettingModal/LimitSetting.tsx
similarity index 98%
rename from app/containers/SettingModal/LimitSetting.js
rename to app/containers/SettingModal/LimitSetting.tsx
index b1a05de4..0838530b 100644
--- a/app/containers/SettingModal/LimitSetting.js
+++ b/app/containers/SettingModal/LimitSetting.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react'
 import styled from 'styled-components'
 import Subheader from 'material-ui/Subheader'
@@ -16,7 +15,6 @@ const Discription = styled.div`
   white-space: wrap;
   padding: 5px 20px;
 `
-
 const A = styled.a`
   color: rgba(37, 143, 233, 0.8);
   text-decoration: underline;
diff --git a/app/containers/SettingModal/SettingModal.js b/app/containers/SettingModal/SettingModal.tsx
similarity index 85%
rename from app/containers/SettingModal/SettingModal.js
rename to app/containers/SettingModal/SettingModal.tsx
index c1cbffb2..61b24ca3 100644
--- a/app/containers/SettingModal/SettingModal.js
+++ b/app/containers/SettingModal/SettingModal.tsx
@@ -1,4 +1,3 @@
-// @flow
 import React, { Component } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { List, ListItem } from 'material-ui/List'
@@ -14,43 +13,43 @@ import messages from './messages'
 import { ChipWrap, Field, Icon, Input, TagFilter, Wrap } from './styles'
 
 export interface Props {
-  onDelete: (tag: string) => void;
-  onSubmit: (tag: string) => void;
-  onCheckShowText: (isShow: boolean) => void;
-  onCheckIllustOnly: (isShow: boolean) => void;
-  onSelectLanguage: (locale: string) => void;
-  onRemoveCache: Function;
-  tags: string[];
-  isShowCaption: boolean;
-  isIllustOnly: boolean;
-  locale: string;
+  onDelete: (tag: string) => undefined
+  onSubmit: (tag: string) => undefined
+  onCheckShowText: (isShow: boolean) => undefined
+  onCheckIllustOnly: (isShow: boolean) => undefined
+  onSelectLanguage: (locale: string) => undefined
+  onRemoveCache: Function
+  tags: string[]
+  isShowCaption: boolean
+  isIllustOnly: boolean
+  locale: string
 }
-
 interface State {
-  value: string;
+  value: string
 }
-
 export default class SettingFilterModal extends Component<Props, State> {
-  state: State = { value: '' }
-
+  state: State = {
+    value: '',
+  }
   handleCangeInput = (event: any) => {
     if (event.target && event.target.value) {
-      this.setState({ value: event.target.value })
+      this.setState({
+        value: event.target.value,
+      })
     }
   }
-
   handleSubmit = (event: any) => {
     if (event.keyCode === 13 && this.state.value !== '') {
       event.preventDefault()
       this.props.onSubmit(this.state.value)
-      this.setState({ value: '' })
+      this.setState({
+        value: '',
+      })
     }
   }
-
   handleCheckShowText = () => {
     this.props.onCheckShowText(!this.props.isShowCaption)
   }
-
   handleCheckSetOnlyIllust = () => {
     this.props.onCheckIllustOnly(!this.props.isIllustOnly)
   }
@@ -63,7 +62,6 @@ export default class SettingFilterModal extends Component<Props, State> {
       locale,
       onSelectLanguage,
     } = this.props
-
     return (
       <Wrap>
         <Card>
@@ -136,9 +134,9 @@ export default class SettingFilterModal extends Component<Props, State> {
         </Card>
         <LimitSetting />
         {/* <Card>
-          <RedText onClick={this.props.onRemoveCache}>
-            <FormattedMessage {...messages.cache} />
-          </RedText>
+         <RedText onClick={this.props.onRemoveCache}>
+           <FormattedMessage {...messages.cache} />
+         </RedText>
         </Card> */}
       </Wrap>
     )
diff --git a/app/containers/SettingModal/index.js b/app/containers/SettingModal/index.tsx
similarity index 85%
rename from app/containers/SettingModal/index.js
rename to app/containers/SettingModal/index.tsx
index 2fd04bf1..0ff5f8d0 100644
--- a/app/containers/SettingModal/index.js
+++ b/app/containers/SettingModal/index.tsx
@@ -1,7 +1,6 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
+import { Dispatch } from 'types'
 import { changeLocale } from 'containers/Language/actions'
 import { makeSelectLocale } from '../Language/selectors'
 import {
@@ -12,7 +11,7 @@ import {
   removeCache,
 } from './actions'
 import Modal from './SettingModal'
-import type { Props } from './SettingModal'
+import { Props } from './SettingModal'
 import {
   makeSelectIsShowCaption,
   makeSelectIsShowOnlyIllust,
@@ -32,14 +31,14 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   onSelectLanguage: (locale: string) => dispatch(changeLocale(locale)),
   onCheckShowText: (show: boolean) => dispatch(setShowCaption(show)),
   onCheckIllustOnly: (show: boolean) => dispatch(setShowOnlyIllust(show)),
+
   onRemoveCache() {
     dispatch(removeCache())
   },
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
-
 export default connector(Modal)
diff --git a/app/containers/Table/Table.js b/app/containers/Table/Table.tsx
similarity index 64%
rename from app/containers/Table/Table.js
rename to app/containers/Table/Table.tsx
index bf66d164..6f8577ed 100644
--- a/app/containers/Table/Table.js
+++ b/app/containers/Table/Table.tsx
@@ -1,13 +1,12 @@
-// @flow
 import * as React from 'react'
 import { SortablePane, Pane } from 'react-sortable-pane'
 import ColumnManager from '../ColumnManager'
-import type { TableIds } from './reducer'
-import typeof { setTable } from './actions'
+import { TableIds } from './reducer'
+import { setTable } from './actions'
 
-export type Props = {
-  ids: TableIds,
-  setTabel: setTable,
+export interface Props {
+  ids: TableIds
+  setTabel: typeof setTable
 }
 
 const Table = ({ ids, setTabel }: Props) => {
@@ -20,14 +19,22 @@ const Table = ({ ids, setTabel }: Props) => {
   const panes = ids.map(key => (
     <Pane
       key={key}
-      size={{ width: 280, height: '100%' }}
-      style={{ zIndex: 1 }}
-      resizable={{ x: true, y: false, xy: false }}
+      size={{
+        width: 280,
+        height: '100%',
+      }}
+      style={{
+        zIndex: 1,
+      }}
+      resizable={{
+        x: true,
+        y: false,
+        xy: false,
+      }}
     >
       <ColumnManager id={key} />
     </Pane>
   ))
-
   return (
     <SortablePane
       order={ids}
diff --git a/app/containers/Table/index.js b/app/containers/Table/index.tsx
similarity index 68%
rename from app/containers/Table/index.js
rename to app/containers/Table/index.tsx
index 6911ace3..224ff441 100644
--- a/app/containers/Table/index.js
+++ b/app/containers/Table/index.tsx
@@ -1,9 +1,9 @@
-// @flow
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import Tabel, { type Props } from './Table'
+import { Dispatch } from 'types'
+import Tabel from './Table'
 import { makeSelectIds } from './selectors'
-import type { TableIds } from './reducer'
+import { TableIds } from './reducer'
 import * as actions from './actions'
 
 const mapStateToProps = createStructuredSelector({
@@ -18,7 +18,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => {
   }
 }
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   mapDispatchToProps
 )
diff --git a/app/containers/UserDrawerContainer/index.js b/app/containers/UserDrawerContainer/index.tsx
similarity index 80%
rename from app/containers/UserDrawerContainer/index.js
rename to app/containers/UserDrawerContainer/index.tsx
index 8dcab6db..1fa8569e 100644
--- a/app/containers/UserDrawerContainer/index.js
+++ b/app/containers/UserDrawerContainer/index.tsx
@@ -1,10 +1,9 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
+import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
-import type { Dispatch } from 'types'
+import { Dispatch } from 'types'
 import Loading from 'components/Loading'
-import UserDrawer, { type Props } from 'components/UserDrawer'
+import UserDrawer, { Props } from 'components/UserDrawer'
 import {
   makeSelectUser,
   makeSelectProfile,
@@ -15,9 +14,11 @@ import * as actions from './actions'
 
 function UserDrawerContainer(props: Props) {
   const { user, profile } = props
+
   if (profile && user) {
     return <UserDrawer {...props} />
   }
+
   return <Loading />
 }
 
@@ -28,13 +29,14 @@ const mapStateToProps = createStructuredSelector({
   profile: makeSelectProfile(),
 })
 
-const connector: Connector<{}, Props> = connect(
+const connector = connect(
   mapStateToProps,
   (dispatch: Dispatch) => {
     return {
       onNextIllust() {
         dispatch(actions.nextIllustPage())
       },
+
       onNextManga() {
         dispatch(actions.nextMangaPage())
       },
diff --git a/app/containers/UserPopoverContainer/index.js b/app/containers/UserPopoverContainer/index.tsx
similarity index 69%
rename from app/containers/UserPopoverContainer/index.js
rename to app/containers/UserPopoverContainer/index.tsx
index b0b55fb5..d597ae45 100644
--- a/app/containers/UserPopoverContainer/index.js
+++ b/app/containers/UserPopoverContainer/index.tsx
@@ -1,22 +1,20 @@
-// @flow
 import * as React from 'react'
-import { connect, type Connector } from 'react-redux'
-import type { Dispatch } from 'types'
+import { connect } from 'react-redux'
+import { Dispatch } from 'types'
 import { createStructuredSelector } from 'reselect'
-import type { User } from 'types/user'
-import type { Illust } from 'types/illust'
+import { User } from 'types/user'
+import { Illust } from 'types/illust'
 import UserPopover from 'components/UserPopover'
 import { open } from './actions'
 import { makeLimitedIllust } from './selectors'
 
-type OP = {
-  onClick: () => void,
-  user: User,
+interface OP {
+  onClick: () => undefined
+  user: User
 }
-
 type Props = {
-  illusts: Array<Illust>,
-  open: Function,
+  illusts: Illust[]
+  open: Function
 } & OP
 
 class UserPopoverContainer extends React.PureComponent<Props> {
@@ -33,8 +31,7 @@ class UserPopoverContainer extends React.PureComponent<Props> {
 const mapStateToProps = createStructuredSelector({
   illusts: makeLimitedIllust(),
 })
-
-const connector: Connector<OP, Props> = connect(
+const connector = connect(
   mapStateToProps,
   (dispatch: Dispatch, { user }) => ({
     open() {
diff --git a/package.json b/package.json
index 01c98d06..94f6d037 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "build:renderer": "node config/scripts/webpack build-renderer",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:css": "stylelint \"app/**/*.js\"",
-    "lint:js": "eslint \"app/**/*.(tsx,ts)\"",
+    "lint:js": "eslint \"app/**/*.{tsx,ts}\"",
     "hot-updates-server": "node config/scripts/webpack hot-server",
     "start-hot-renderer": "node config/scripts/hot-renderer",
     "postinstall": "npm run build:dll && electron-builder install-app-deps",
@@ -101,6 +101,7 @@
     "@types/ms": "^0.7.30",
     "@types/react": "^16.8.6",
     "@types/react-intl": "^2.3.17",
+    "@types/react-redux": "^7.0.3",
     "@types/styled-components": "^4.1.12",
     "all-contributors-cli": "6.1.2",
     "babel-eslint": "10.0.1",
diff --git a/tsconfig.json b/tsconfig.json
index 3f8b7ffa..43963922 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,10 +2,10 @@
   "extends": "@akameco/tsconfig",
   "compilerOptions": {
     "lib": ["dom", "esnext"],
-    "rootDirs": ["types", "styles", "components", "containers"]
+    "baseUrl": "./",
+    "paths": {
+      "*": ["./app/*"]
+    }
   },
-  "include": [
-    "node_modules/babel-plugin-react-intl-auto/**/*.d.ts",
-    "types/intl"
-  ]
+  "include": ["./app/types/intl.d.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index ed898fa9..494f6b80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -866,6 +866,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#a59c0c995cc885bef1b8ec2241b114f9b35b517b"
+  integrity sha512-O2OGyW9wlO2bbDmZRH17MecArQfsIa1g//ve2IJk6BnmwEglFz5kdhP1BlgeqjVNH5IHIhsc83DWFo8StCe8+Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/jest-diff@*":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
@@ -921,6 +928,15 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
+"@types/react-redux@^7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.0.3.tgz#b8dc3faa954b7f28e4b0209bcf9209b45251ed6b"
+  integrity sha512-6qsIHHNwF41viooUgR2lXHL81v3uyeJsugq9YCMYE4g2bDyG710G/I/w5nbn7AQ9XfuOLUwrWfm3edV7gDJ9AQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    redux "^4.0.0"
+
 "@types/react@*", "@types/react@^16.8.6":
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.6.tgz#fa1de3fe56cc9b6afeddc73d093d7f30fd5e31cc"
@@ -8591,7 +8607,7 @@ redux-saga@^1.0.2:
   dependencies:
     "@redux-saga/core" "^1.0.2"
 
-"redux@>=0.10 <5", redux@^4.0.1:
+"redux@>=0.10 <5", redux@^4.0.0, redux@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
   integrity sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==