Typescript 5.2 using 키워드란 무엇인가

using은 tc39에 실린 내용.

함수 객체에 Symbol.dispose라고 하는 global symbol이 속성으로 할당되어 있으면 이 함수는 리소스로 판단되며 유저에 의해 직접 생명주기를 명령형으로 조절(Symbol.dispose)를 호출하거나 선언적으로 using 키워드를 사용해서 관리가 가능하다.

// 동기
import { open } from "fs-sync";
const getFileHandler = () => {
  const fileHandler = open("...", "r+");
  return {
    fileHandler,
    [Symbol.Dispose]: () => {
      fileHandler.close();
    },
  };
};

{
  using file = getFileHandler("dante.txt");
  // 파일 핸들러 사용
  file.fileHandler
} // 블록을 벗어나면 리소스 해제

// 비동기
import { open } from "node:fs/promises";
const getFileHandler = async () => {
  const fileHandler = await open("...", "r+");
  return {
    fileHandler,
    [Symbol.asyncDispose]: async () => {
      await fileHandler.close();
    },
  };
};

{
  await using file = getFileHandler("dante.txt");
  // 파일 핸들러 사용 
  file.fileHandler
} // 블록을 벗어나면 리소스 해제

using 사용 시

// Symbol.dispose 함수를 가진 객체를 반환하는 함수
const getConnection = (host: string, port: number) => {
  // ..
  return {
    socket,
    [Symbol.dispose]: () => {
      socket.end();
    },
  };
};

import React, { useEffect, useState } from "react";
import { getConnection } from "~/utils";

const NetworkComponent = ({ path }) => {
  const [networkHandle, setNetworkHandle] = useState(null);
  const [content, setContent] = useState("");

  useEffect(() => {
    using networkHandle = getConnection()
    setNetworkHandle(networkHandle.socket);
    // 컴포넌트가 언마운트될 때 자동으로 네트워크 핸들이 닫힘
  }, []);

  // 파일 내용을 읽어오는 함수
  const read = async () => {
    const buffer = await networkHandle.read();
    setContent(buffer.toString());
  };

  // 파일 내용을 수정하는 함수
  const write = async (newContent) => {
    await networkHandle.write(newContent);
    setContent(newContent);
  };

  return (
    <div>
      <h1>File: {path}</h1>
      <button onClick={readFile}>Read</button>
      <textarea value={content} onChange={(e) => write(e.target.value)} />
    </div>
  );
};