koss-lebedev

import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent } from 'next'

type Props = {
  posts: readonly RedditPost[]
  subreddit: string
}

// 1. We use NextFunctionComponent type here

koss-lebedev

const getInitialProps = async () => {
  const subreddit = 'typescript'
  const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`)
  const result = await response.json() as RedditResult

  return {
    subreddit,
    posts: result.data.children
  }
}

koss-lebedev

type Props = ReturnType<typeof getInitialProps>

/*
type Props = Promise<{
    subreddit: string;
    posts: readonly RedditPost[];
}>
*/

koss-lebedev

declare type PromiseResult<T> = T extends Promise<infer U> ? U : T

koss-lebedev

import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent } from 'next'

type Props = PromiseResult<ReturnType<typeof getInitialProps>>

const Posts: NextFunctionComponent<Props> = ({ posts, subreddit }) => (
  <div>
    <h1>Posts in "{subreddit}"</h1>
    <ul>

koss-lebedev

import { NextContext } from 'next'

// we define our type
type Context = NextContext<{ subreddit: string }>

// ...
  
const getInitialProps = async (context: Context) => {
  // now we can get subreddit value from the query!
  const subreddit = context.query.subreddit

koss-lebedev

import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent, NextContext } from 'next'

type InitialProps = PromiseResult<ReturnType<typeof getInitialProps>>
type Props = InitialProps
type Context = NextContext<{ subreddit: string }>

const Posts: NextFunctionComponent<Props, InitialProps, Context> = ({ posts, subreddit }) => (
  <div>

koss-lebedev

type NextFunctionComponent<Props = {}, InitialProps = Props, Context = NextContext>

koss-lebedev

const INCREMENT_BY = 'counter/INCREMENT_BY'
const DECREMENT_BY = 'counter/DECREMENT_BY'

const incrementBy = (num) => ({
  type: INCREMENT_BY,
  payload: num
})
const decrementBy = (num) => ({
  type: DECREMENT_BY,
  payload: num

koss-lebedev

import * as React from "react"
import { Quote } from "./canvas"

export function KanyeQuote() {
    const [quote, setQuote] = React.useState("")

    React.useEffect(() => {
        fetch("https://api.kanye.rest/").then(response => {
            response.json().then(json => {
                setQuote(json.quote)