Open4ヶ月前にコメント追加19

Deno

karabiner.tsをやろうとしてキャッチアップ始めた
今後の個人開発で使っていきたい
ちなみに昨日７歳になったらしい
Rust製らしい
https://docs.deno.com/

deno main.ts

TS実行できて嬉しい

deno run https://docs.deno.com/examples/scripts/hello_world.ts

Hello, World!

URLもrunできるらしい

amtt

ちゃんとテスト書こうね

main_test.ts

import { assertEquals } from "@std/assert";
import { add } from "./main.ts";

Deno.test(function addTest() {
  assertEquals(add(2, 3), 5);
});

Deno.test("simple test",()=>{
	const x=1+2
	assertEquals(add(1,2),x)
})

amtt

プロジェクトの初期化

deno init my_project

my_project
├── deno.json
├── main_test.ts
└── main.ts

amtt

CLI

amtt

args
引数渡せる

main.ts

console.log(Deno.args);

$ deno run main.ts arg1 arg2 arg3
[ "arg1", "arg2", "arg3" ]

amtt

オプションは実行するスクリプトの後に置いたら引数(args)として扱われるので注意

amtt

--watch
Watch mode Jump to heading#

You can supply the --watch flag to deno run, deno test, and deno fmt to enable the built-in file watcher. The watcher enables automatic reloading of your application whenever changes are detected in the source files. This is particularly useful during development, as it allows you to see the effects of your changes immediately without manually restarting the application.
ファイルの変更監視してhot reloadするよ！ってやつ

すらすら読めて嬉しい

amtt

--watch-hmr
指定したファイル全体を更新するのではなく、変更されたモジュールのみ更新する

何回も更新するのが重いときとか便利
状態がリセットされないのでエラーの原因になるかも？

hands on!

mod.tsを作る

mod.ts

export function greet() {
  console.log("hello, world!");
}

↓ディレクトリ構成

.
├── deno.json
├── main.ts
├── main_test.ts
└── mod.ts

main.tsでモジュールに変更があったときのロジックを書く

main.ts

import { greet } from "./mod.ts"

addEventListener("hmr", async (e) => {
    const customEvent = e as CustomEvent<{ path: string }>;
    console.log("HMR triggered", customEvent.detail.path);

    const updated = await import (`./mod.ts#${Date.now()}`);
    updated.greet();
}

実行

hello, world!→hello, Deno!に変更した

deno run --watch-hmr main.ts

HMR Restarting! File change detected: "/Users/nekantatsuju/local_dev/ts-learn/my
_project/mod.ts"
hello, Deno!
HMR Process finished. Restarting on file change...

amtt

公式で提供されているコードだと型エラーが出た

addEventListener("hmr", (e) => {
  console.log("HMR triggered", e.detail.path);
});

Property 'detail' does not exist on type 'Event'.

addEventListenerの第2引数の(≒コールバック関数の)eはEvent型とみなされるのが原因で型エラーが起こってるらしい

amtt

 Event型とはなんだaddEventListerで受け取るイベントの基本的な型

e.typeとかe.targetとか
実際はEvent型を拡張したやつがよく使われてるらしい

KeyboardEventとか、何押したかわかるやつとか
そこで、detailが使えるCustomEvent型だよ！ってことを伝えないといけないらしい

amtt

  const customEvent = e as CustomEvent<{ path: string }>;

の意味

eはCustomEvent型で、その中身のpathはstring型だよ！

amtt

まあとりあえず、指定したファイルが変更されたときのロジックが書ける！ってこと

amtt

--lock
ロックファイルとの整合性を確認するやつ
!ロックファイル？

→依存モジュールの正確なバージョン、内容をハッシュ値で保存してるやつ

 deno.lockが存在するとき--lock=deno.lock

実行ファイルでimportされているモジュールと、deno.lockのバージョンとかが一致しているか確認する

一致してなくても、deno.lockを更新する
--lock=deno.lock --frozen

deno.lockと違ったらエラー出る

実行環境を変えたくないとき(本番環境)とかに使える

 なかったら新しく作る

amtt

hands on!

delayモジュールを使って確認してみる

main.ts

import { delay } from "https://deno.land/std@0.224.0/async/delay.ts";

console.log("Wait 1 second...");
await delay(1000);
console.log("Done!");

deno run --lock=deno.lock main.ts

Wait 1 second...
Done!

deno.lockファイルが生成できる

deno.json
deno.lock ←←
main.ts
main_test.ts

amtt

手動でdelayのバージョンをlockファイルと異なるものにしたらエラー

local_dev/ts-learn/my_project is 📦 1.0.0 via ⬢ v23.11.0 via 🦕 v2.3.1
➜ deno run --frozen main.ts 
error: The lockfile is out of date. Run `deno install --frozen=false`, or rerun with `--frozen=false` to update it.
changes:
 4 | -    "https://deno.land/std@0.223.0/async/delay.ts": "f90dd685b97c2f142b8069082993e437b1602b8e2561134827eeb7c12b95c499",
 4 | +    "https://deno.land/std@0.221.0/async/delay.ts": "8e1d18fe8b28ff95885e2bc54eccec1713f57f756053576d8228e6ca110793ad",
 5 | +    "https://deno.land/std@0.223.0/async/delay.ts": "f90dd685b97c2f142b8069082993e437b1602b8e2561134827eeb7c12b95c499",

amtt

deno check
型チェックできる

amtt

local_dev/ts-learn/my_project is 📦 1.0.0 via ⬢ v23.11.0 via 🦕 v2.3.1 
➜ deno check main.ts 
Check file:///Users/nekantatsuju/local_dev/ts-learn/my_project/main.ts
TS2339 [ERROR]: Property 'detail' does not exist on type 'Event'.
  console.log("HMR triggered", e.detail.path);
                                 ~~~~~~
    at file:///Users/nekantatsuju/local_dev/ts-learn/my_project/main.ts:6:34

error: Type checking failed.

amtt

Denoのいいところ

TS native sapport

deno check main.ts

↓で.mdのTSコードブロックを型チェックしてくれるらしい
おもしろ

deno check --doc-only markdown.md