Satoshi Takeda tkdn

React HOCs on TypeScript

まだ HOC と TypeScript の良い落としどころが見えてないが、何となく理解しつつある現状。「TypeScript こわい」から卒業したのと、良記事があったので簡単にまとめておきます。

~~悪い。~~ => 型を設定することが難しい。しかしやっていきたいので、any を使わずに整理していこう。

また記事中に出てくるサンプルについてはより削ぎ落としたもので、依存がほとんどない。 GraphQL はクライアントからすると、クライアントキャッシングやその他課題はあるものの、クエリ言語である以外何者でもなさそうというがよく分かる。

	const pluck = (
	array: Array<{[key: any]: value: any}>,
	props: string[],
	pickedKey: string,
	): {[valuePickedByKey: any]: {[prop:any]: any}} => {
	return array.reduce((prevOut, item) => {
	const valuePickedByKey = item[pickedKey];
	const pickedObj = props.reduce((prevItem, pickProp) => {
	return {
	...prevItem,

	const pluck = (
	array: Array<{[key: any]: value: any}>,
	props: string[],
	pickedKey: string,
	): {[valuePickedByKey: any]: {[prop:any]: any}} => {
	return array.reduce((prevOut, item) => {
	const valuePickedByKey = item[pickedKey];
	const pickedObj = props.reduce((prevItem, pickProp) => {
	return {
	...prevItem,

	import { Index } from '@Components/pages'
	import * as React from 'react'
	import { cleanup, render } from 'react-testing-library'

	jest.mock('../../../routes', () => {
	const React = require('react')
	return {
	Link: ({ children }) => {
	return <div>{children}</div>
	}

	// This is a vastly simplified implementation of what a Redux container would do
	class MyComponentContainer extends Component {
	mapStateToProps(state) {
	// this function is specific to this particular container
	return state.foo.bar;
	}

	render() {
	// This is how you get the current state from Redux,
	// and would be identical, no mater what mapStateToProps does

	export function prevLocation(state = {
	refDomNode: null,
	method: null
	}, action) {
	switch (action.type) {
	case LOCATION_CHANGE:
	const method = action.payload.action
	return Object.assign({},state,{
	method: method
	})

	$(function() {
	var action = (function(jqObject) {
	var content = jqObject.next('.content');
	var contentParent = content.parent();
	if(contentParent.hasClass('active')){
	content.slideUp('250',function(){
	contentParent.removeClass('active');
	});
	} else {
	contentParent.addClass('active');