Forem: Polchompunoot Thongtaem Na Ayudhya

TypeScript มากับ React Hooks

Polchompunoot Thongtaem Na Ayudhya — Mon, 27 Apr 2020 10:34:09 +0000

ตอนนี้ก็พูดได้เต็มปากเลยว่าคงไม่มีใครไม่ใช้ Hooks แล้ว code อ่านง่ายและสั้นกว่าการเขียน Class Component แบบเดิมมาก ฉะนั้นตอนนี้ถ้าไม่ติดอะไรก็ใช้ Functional Component แล้วใช้ Hooks เถอะของเค้าดีจริงๆ ในบทความนี้จะถือว่าทุกคนรู้จักแล้วว่า Hooks คืออะไร เราแค่มาดูกันว่า Hooks แต่ละแบบถ้าจะใช้กับ TypeScript ต้องมีอะไรเพิ่มเติมกันบ้าง

useState

ส่วนใหญ่แล้ว useState ก็จะใช้ type ตามที่เรา initial อยู่แล้ว แต่ในบางกรณีเราอาจจะ initial ด้วยค่า undefined, null ไม่ก็ object หรือ array ที่เราต้องการ control type ภายใน ทำให้ไม่รู้ว่า type ที่จะ return ออกมาเป็น type อะไร เราจึงต้องใช้ generic เพื่อกำหนด type ที่จะ return ออกมาให้ useState

// เคสปกติใช้ type ตามค่า initial
const [count, setCount] = useState(0); // count จะมี type เป็น number

// เคสอื่นๆ
// count จะมี type เป็น number หรือ undefined
const [count, setCount] = useState<number | undefined>(undefined);
// count จะมี type เป็น Array<number> โดย initial เป็น Array เปล่าๆ
const [count, setCount] = useState<Array<number>>([]);

interface PersonInfo {
  name: string;
  age?: number;
}
// person จะมี type เป็น object ตาม interface PersonInfo
const [person, setPerson] = useState<PersonInfo>({ name: 'My Name' });

useEffect / useLayoutEffect

useEffect และ useLayoutEffect ไม่มี return type สามารถใช้งานได้เหมือนตอนใช้ JavaScript ปกติเลย

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

useContext

useContext จะใช้ค่า type ตาม context object ตาม argument ที่ส่งเข้าไปอยู่แล้ว สามารถใช้งานได้เหมือนตอนใช้ JavaScript ปกติเลย

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

const App = () => (
  <ThemeContext.Provider value={themes.dark}>
    <Toolbar />
  </ThemeContext.Provider>
);

const Toolbar = () => (
  <div>
    <ThemedButton />
  </div>
);

const ThemedButton = () => {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useMemo / useCallback

ทั้ง useMemo and useCallback จะใช้ type ตามที่ตัวเอง return สามารถใช้งานได้เหมือนตอนใช้ JavaScript ปกติเลย

// useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// useCallback
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useRef

ถ้า ref object ประกอบด้วยค่า current ที่เป็น readonly โดยมาค่าเริ่มต้นเป็น null จนกระทั้ง ref ถูก attached ในกรณีเราจะ initial ค่าเป็น null และใช้ generic เพื่อกำหนด type ที่จะ return ออกมาให้ useRef

const TextInputWithFocusButton = () => {
  // initial ค่าเป็น null ใช้ generic กำหนด return type เป็น HTMLInputElement
  const inputEl = useRef<HTMLInputElement>(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useReducer

กำหนด type ลักษณะเดียวกับการใช้ Redux โดยใช้ type จาก action และ state เป็นตัวกำหนด type ให้กับ useReducer

interface State {
  count: number;
}

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'incrementAmount'; amount: number };

const init = (initialCount: number) => {
  return {count: initialCount};
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

const Counter : React.FC<{ initialCount: number }> = ({ initialCount }) => {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

ส่งท้าย

การใช้ Hooks กับ TypeScript ไม่ได้มีอะไรวุ่นวาย ส่วนใหญ่สามารถใช้งานได้เหมือนกับ JavaScript เลย แค่มีบางตัวที่ต้องใช้ generic เพื่อกำหนดให้ Hooks รู้ค่าที่จะ return ออกมา ซึ่งคุ้มมากที่จะ feature ต่างๆ ของ TypeScript มาใช้งาน ขอให้มีความสุขมากมายกับการใช้งาน TypeScript นะครับ

Select Component Ant Design 4.0 vs 3.0

Polchompunoot Thongtaem Na Ayudhya — Fri, 10 Apr 2020 16:08:08 +0000

ถ้าให้ย้อนความทรงจำว่าหันมาใช้ Ant Design ตอนไหน จำไม่ผิดน่าจะตอนที่ Bootstrap ออก version 4 ใหม่ๆ หลังจากนั้นก็ไม่เคยหันกลับไปหา Bootstrap อีกเลย นอกจากจะไปแก้งานของคนอื่นเท่านั้น ไม่นานมานี้ Ant Design ออก Version 4.0 เปลี่ยนแปลงหลายจุด ที่ชอบมากๆ ก็คงเป็น Form ตัวใหม่ ใช้ง่าย code clean ขึ้นเยอะและถ้าจะทำ Modal Form ก็ไม่ต้องใช้ Ref แล้ว ถูกใจเป็นที่สุด

ส่วนอีกตัวนึงที่จะไม่พูดถึงก็คงไม่ได้นั่นคือ Select Component ก็เอาไว้ทำ Dropdown ให้เลือกนู่นนี่แหละ โดยปกติแล้วเราก็ไม่ค่อยคิดอะไรมาก อยากให้เลือกอะไรก็ทำ array ยัดใส่เข้าไปเลย เยอะแค่ไหนก็ไม่สน มันพิมพ์ค้นหาได้อยู่แล้ว ตอน Version 3.0 พอ array เริ่มโตมากๆ กด Dropdown ทีนึงกว่าจะขึ้นมาให้ได้เลือกก็นิ่งไปสักพัก เป็นอะไรที่แย่มากๆ คิดไว้เสมอว่าเดี๋ยวต้องจัดการมันสักหน่อย (ซึ่งก็ไม่ทำอะไรอยู่ดีปล่อยมันไว้แบบนั้นแหละ 555+) อยู่ดีๆ Ant Design ก็ rewrite Select Component ใหม่มาให้เราได้ใช้กัน ซึ่งมันเร็วขึ้นมากกกกกกกกก รู้สึกดีใจที่ยังไม่ได้แก้ไขอะไรไป อิอิ ... มาลองดูกันดีกว่าว่ามันเร็วขึ้นแค่ไหน

Ant Design 3.0 - 1,000 items

ยัด array ไป 1,000 items กดทีนึงก็นิ่งไปนานกว่าจะขึ้นมาให้ได้เลือกใช้กัน

Ant Design 4.0 - 100,000 items

รอบนี้มาลอง 4.0 บ้าง เพื่อโชว์ความเทพจัดไป 100,000 items จะเห็นได้ว่ากดแล้วมาทันทีเลย ใครอยากลองมากกว่านี้ก็ไปลองกันเองได้เลยนะครับ ส่วนตัวผมถ้ามี item มากกว่านี้คงหนีให้ไปใช้วิธีอื่นดีกว่าครับ

ปิดท้าย

Ant Design 4.0 มี rewrite หลายตัวมาก ไม่ว่าจะเป็น Form, DatePicker, Tree, Select, TreeSelect, AutoComplete, Table และ Grid ก็มาใช้ flex layout แล้ว ซึ่งมันดีขึ้นหลายๆ อย่างแต่ก็แลกมาด้วย break change เพียบ

ใครอยากอ่าน document แบบละเอียดก็ตามไปอ่านได้ที่ link นี้เลยครับ

Sequelize + Typescript ตอนที่ 1

Polchompunoot Thongtaem Na Ayudhya — Sun, 05 Apr 2020 16:09:45 +0000

พวกเราใช้ JavaScript กันอย่างมีความสุขตลอดมา อยู่ๆ ก็มีน้องคนนึงถามขึ้นมาว่า "พี่ๆ เราไม่ใช้ TypeScript เหรอ" จากนั้นก็แลกเปลี่ยนความคิดกันไปมา สรุปได้ว่าเราจะเปลี่ยนไปใช้ TypeScript กัน อะไรคือเหตุผลค่อยว่ากันเนอะ สรุปว่าตอนนี้จะใช้ก็แล้วกัน

เท่าที่กลับไปดูอย่างอื่นก็มีวิธีที่จะทำเป็น TypeScript เกือบหมดแล้ว จะมีก็แต่ ORM ที่เราเลือกใช้ Sequelize (v. 5) ที่ยังดูเหมือนไม่ค่อยชัดเจนกับเรื่องนี้เท่าไหร่ ถึงขั้นเราจะเลิกใช้ Sequelize หนีไป TypeORM กันเลยที่เดียว แต่พอไปลองจริงๆ TypeORM ยังมีหลายอย่างที่เราคิดว่ายังไม่สมบูรณ์เหมือนกับ Sequelize สุดท้ายก็กลับมาตายรังที่ Sequelize และก็ยังตัดสินใจไม่ใช้ sequelize-typescript อีกด้วย เอาจริงๆ วิธีการก็ไม่ต่างจากเดิมเท่าไหร่แค่เปลี่ยนอะไรนิดๆ หน่อยๆ และนี่คือวิธีการใช้ Sequelize กับ TypeScript ที่ทีมเราใช้กันอยู่ตอนนี้

เครื่องมือเครื่องใช้

ก่อนหน้านี้ใช้ babel มาตลอด หลังจากเปลี่ยนมาใช้ TypeScript ก็เปลี่ยนมาใช้ ts-node เป็นตัวช่วย ก็รู้ว่าง่ายกว่า babel มาก สามารถใช้ร่วมกับ JavaScript ปกติได้เลย ใครที่ config อะไรแปลกๆ ใน babel ก็ลอง test กันดูก่อนนะ ส่วน dependencies ที่ต้องใช้เพิ่มเติมจาก Sequelize ก็คือ

@types/node
@types/validator
@types/bluebird

สร้าง Connection

ในบทความนี้ขอใช้ database เป็น sqlite เผื่อใครจะ clone code ไปทำตามจะได้ลุยกันได้เลย ตามจริงจะใช้ตัวไหนก็ไม่ต่างกันเพราะเราใช้ ORM แล้วนิเนอะ แล้วก็สร้าง connection เหมือนที่เราเคยสร้างตามปกติ



import { Sequelize } from 'sequelize';

export const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: './src/database/demo.db',
});

สร้าง Model หรือ Table นั่นแหละ

ใครที่เคยสร้าง Model แบบ sequelize.define ก็เปลี่ยนมาใช้ class extends Model มันง่ายกว่าเยอะมาก สร้าง class กำหนด type แล้วใช้ Sequelize init เพื่อสร้าง Sequelize Model เท่านี้ Model ก็พร้อมใช้งานแล้ว ขอสร้างไว้ 3 Model ไว้ทำ association ในตอนต่อไปละกันเนอะ



import { Model, DataTypes } from 'sequelize';
import { sequelize } from '../database/connection';

export class Actor extends Model {
  id!: number;

  firstName!: string;

  lastName!: string;

  createdAt!: Date;

  UpdatedAt!: Date;
}

Actor.init(
  {
    firstName: {
      type: DataTypes.STRING,
      allowNull: false,
    },

    lastName: {
      type: DataTypes.STRING,
      allowNull: false,
    },
  },
  {
    sequelize,
    tableName: 'actor',
    freezeTableName: true,
  },
);



import { Model, DataTypes } from 'sequelize';
import { sequelize } from '../database/connection';

export class Movie extends Model {
  id!: number;

  title!: string;

  year!: number;

  createdAt!: Date;

  UpdatedAt!: Date;
}

Movie.init(
  {
    title: {
      type: DataTypes.STRING,
      allowNull: false,
    },

    year: {
      type: DataTypes.INTEGER,
      allowNull: false,
    },
  },
  {
    sequelize,
    tableName: 'movie',
    freezeTableName: true,
  },
);



import { Model, DataTypes } from 'sequelize';
import { sequelize } from '../database/connection';

export class Genre extends Model {
  id!: number;

  name!: string;

  createdAt!: Date;

  UpdatedAt!: Date;
}

Genre.init(
  {
    name: {
      type: DataTypes.STRING,
      allowNull: false,
    },
  },
  {
    sequelize,
    tableName: 'genre',
    freezeTableName: true,
  },
);

ทดสอบ Connection

เมื่อได้ Connection กับ Model แล้วก็มาลองทดสอบกันหน่อย ปกติเราสามารถเรียก class ที่เราสร้างเพื่อทดสอบ Connection ได้เลย แต่ถ้ามีหลายๆ Model เราควรให้ทุก Model init ให้เรียบร้อยก่อน จึงสร้าง file รวมขึ้นมาเพื่อ init ทุก Model ซึ่งวิธีนี้จะช่วยแก้ปัญหาการทำ associations ซึ่งจะกล่าวถึงในตอนต่อไป



import './Actor';
import './Movie';
import './Genre'

จากนั้นก็สามารถเรียก sequelize.authenticate() เพื่อทดสอบ Connection ได้ตามปกติและสามารถทดสอบการ Query จาก Model ได้เลย จะเห็นว่าแต่ละ Model จะมี type ติดมาด้วยแล้ว



import './models';
import { sequelize } from './database/connection';
import { Actor } from './models/Actor';

(async () => {
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');

    // Find all actors
    const actors = await Actor.findAll();

    console.log(actors);
  } catch (err) {
    console.error('Unable to connect to the database:', err);
  }
})();

สรุป

หลังจากทำตามขึ้นตอนด้านบนเราก็จะมี Model พร้อมใช้งาน โดยสามารถใช้งานได้ตามปกติไม่ต่างจากที่ทำใน JavaScript เลย เพียงแต่จะมี type ติดไปด้วย แต่ยังมีอีกส่วนนึงที่ต่างไปจากตอนใช้ JavaScript ก็คือการทำ association พวก One-to-Many, Many-to-Many นั่นแหละ ไว้เจอกันใหม่ตอนหน้าครับ