florianmartens

import { useState, useEffect } from "react";

export default function App() {
  const initalState = 0;
  const [count, setCount] = useState(initalState);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);

florianmartens

import { useEffect, useReducer } from "react";

const reducer = (state, action) => {
  switch(action.type) {
    case "Increment":
      return state + 1;
    default:
      return state;
  }
}

florianmartens

import English from "../compiled-locales/en.json";
import German from "../compiled-locales/de.json";

function MyApp({ Component, pageProps }: AppProps) {
    const { locale } = useRouter();
    const [shortLocale] = locale ? locale.split("-") : ["en"];

    const messages = useMemo(() => {
        switch (shortLocale) {
            case "de":

florianmartens

{
    ...
    "scripts": {
        "dev": "next dev",
        "build": "npm run i18n && next build",
        "start": "next start",
        "extract:i18n": "formatjs extract '{pages,components,sections}/**/*.{js,ts,tsx}' --format simple --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file content/locales/en.json",
        "compile:i18n": "formatjs compile-folder --ast --format simple content/locales content/compiled-locales",
        "i18n": "npm run extract:i18n && npm run compile:i18n"
    },

florianmartens

{
    "presets": ["next/babel"],
    "plugins": [
        [
          "formatjs",
          {
            "idInterpolationPattern": "[sha512:contenthash:base64:6]",
            "ast": true
          }
        ]

florianmartens

interface BigType {}
const zap: BigType = {
    foo: "foo",
    bar: "bar",
    // -> You can add a million properties to this
    // -> And it would still be of type BigType
}

florianmartens

interface SmallerType {
  foo: string;
  baz: string;
}
let obj: SmallerType;
const smaller = {
  // included in our requirements
  foo: "foo",
  baz: "bar",
  // infinite number of other properties

florianmartens

type ReallyPermissiveType = {} | string | number | symbol | bigint | boolean | undefined | null;

florianmartens

interface EmptySet {
  foo: string;
  bar: string;
  faz: object;
  // -> add an infinite number of requirements
  // ...
  // ...
}

florianmartens

interface User {
  name: string;
}

interface Props {
  user: User
  setUser: (user: User) => void;
}

const UserDisplay = (props: Props) => {