YouMinTW

目標

1. 用戶可修改文字框的值

2. 按下 Change Value 鈕也能改變文字框的值

題目

1. 請描述發生的問題？

Generate 按鈕 以及 text input 均無法正確顯示畫面

YouMinTW

/* eslint-disable */
import React, { useState, useContext } from "react";
import "./styles.css";

export const AppContext = React.createContext();

/* 詳見 MD */

function ContextInput() {
  const [context, setContext] = useContext(AppContext);

YouMinTW

@ken-chen 73 Followers 🕴 Latest Articles 👇 釋放巢狀物件的型別標示吧！ feat. TypeS... 👏 857 RxJS 是什麼？！(2) 被觀察的世界的建立與轉... 👏 60 RxJS 是什麼？！ 觀察者、被觀察的對象 👏 66

YouMinTW

1. Parent, ChildA, ChildB

const Parent = ()=>{
  return (
    <div>
      <ChildA />
      <ChildB />
    </div>
 )

YouMinTW

function fibonacci(num) {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}

YouMinTW

function fibonacci(num,memo) {
  if (memo.get(num)) return memo.get(num)
  if (num <= 1) return 1;  
  const result = fibonacci(num - 1,memo) + fibonacci(num - 2,memo);
  memo.set(num,result);
  return memo.get(num);
}

YouMinTW

type Book = {
  name: string;
  author: Author;
};
type Author = {
  firstName: string;
  lastName: string;
  address: Address;
};
type Address = {

YouMinTW

type UserEmail = NonNullable<UserEmailInput>;

// 等於 (將 Type Alias 型別化名拆開)
type UserEmail = NonNullable<string | null | undefined>;

// 等於 (將 union 聯集 各自拆開)
type UserEmail =
  | NonNullable<string>
  | NonNullable<null>
  | NonNullable<undefined>;

YouMinTW

type Simplify<T> = T extends Record<string, any> ? { [K in keyof T]: Simplify<T[K]> } : T;

YouMinTW

type Example<T> = T extends Record<string, any> ? keyof T : T;
// type T1 = number | keyof string[]
type T1 = Example<string[]>;
// type T2 = "a" | "b"
type T2 = Example<{ a: number; b: string }>;
// type T3 = boolean
type T3 = Example<boolean>;