Functional TypeScriptオープンデベロッパーズカンファレンス(ODC)2024 での発表資料
[K, U] extends [U, K] ← ナニコレ
タイトルは初見時の自分の気持ちでした。内容は結構あっさりしたもので、5分あれば読めると思います。 「あーなるほどね」となった方はわざわざ読む必要がない記事っぽいです。 型の互換性チェック 一言で言ってしまえばそういうことです。KとUが互いに置き換え可能かどうかを確認しています。 これがKとUのままだと分かりづらいのですが、適当な型に置き換えてみると分かりやすいです。 type Test1 = [1, 1] extends [1, 1] ? true : false; // true type Test2 = [number, number] extends [number, number] ? true : false; // true type Test3 = [string, string] extends [string, string] ? true : false; // tru
![[K, U] extends [U, K] ← ナニコレ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9af7e71ff7c69bfdf4d7b809839db833e4254a4d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--pqg40Mk4--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BK%25252C%252520U%25255D%252520extends%252520%25255BU%25252C%252520K%25255D%252520%2525E2%252586%252590%252520%2525E3%252583%25258A%2525E3%252583%25258B%2525E3%252582%2525B3%2525E3%252583%2525AC%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AKanon%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IwMDEzZTI2ODYuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AKobe.ts%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2U2MWQ5MmViYmQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Object.groupBy で作られるオブジェクトの prototype は null - Object.create(null)
おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジェクトを作るには Object.create を使う (あるいは new 演算子や __proto__ を使っても良い). const x = {}; x.foo = "foo"; const y = Object.create(x); y.bar = "bar"; const z = Object.create(y); z.baz = "baz"; console.log(z.foo); // => "foo" conso
おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！
おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！ 2022.06.25 TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。 具体的には、配列に対するインデックスアクセスやインデックスシグネチャを通じたプロパティのアクセスは常に `undefined` とのユニオン型となります。
エフェクトとジェネレーターと - Object.create(null)
2 年前に作って放置していたライブラリを最近ちょっと整理したのでその話. エフェクト プログラム中に登場する関数のことを考えてみましょう. 関数は引数を与えるとなんらかの計算を行い, 戻り値を返してくれます. もし関数が純粋な (数学的な意味での) 関数であれば, 関数の入出力は引数と戻り値だけです. つまり, 引数以外の入力 (例えば時刻) によって出力が変わることもなければ, 戻り値以外の出力 (例えば光や音) が得られることもありません. 一方で実用的な価値のあるプログラムというのは時刻に応じて光や音を発生させるようなものであり, これらは純粋な関数だけを組み合わせていては作ることができません. ここで登場する純粋でない関数は, 計算の過程でなんらかのエフェクトを発生させて, 引数と戻り値以外の入出力 (副作用) を行います. エフェクトの明示と副作用の分離 関数が発生させるエフェク
【TSkaigi】2024/05/11 当日スライド
2024/05/11開催されたTSKaigiに登壇した際のプレゼン資料です。
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
【TypeScript】配列の型を絞り込むときはflatMapがおすすめ
こんにちは。 スペースマーケットでフロントエンドエンジニアをしているmizukiです！ 今回はタイトルの通り、配列で型を絞る際にflatMapを使うのがおすすめだよ！といった話をします。 配列から特定のデータを排除する 例えば、配列からnullableな値を消したいとします。 その場合は以下のようなコードになります。 const nullableArray: Array<string | null> = ['hoge', null, 'fuga'] const array = nullableArray.filter((data) => { return !!data }) ただ、この場合だと型定義としてはnullが排除されたことを認知できず、変数arrayの型は引き続きArray<string | null>と認識されてしまいます。 isを使って型を絞り込む 先ほどの場合、期待値としては
TypeScript で幽霊型っぽいものをつくる
この実装だと当然エンコード済みの文字列も渡せてしまい、多重エンコードが起きる。未エンコードの文字列だけが渡ってくることをコンパイラレベルで検出したい。 幽霊型（Phantom Type） こういうとき、他の言語ではよく幽霊型が用いられる。次のリンク先は Scala での実装例を紹介している https://www.slideshare.net/AkinoriAbe1/aja-2016623 // 上記スライドの 6 枚目より class Str[T] (val str: String) trait Normal trait Encoded def encode(x: Str[Normal]) = new Str[Encoded](...) 内部では利用されない型パラメータ（ Normal Encoded ）を使って、Str[T] にはそういう種類があること、 Str[Normal] と S
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
私がthrowを使わない理由
この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記
アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog
Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/assets/logo.png" alt="Logo image" /> {/* ... */} </header> ); } 一方で、最近のWeb フロントエンドフレームワーク (例: Next.js, Remix) を使う場合は、import 文を用いて以下のように書くことが多いと思います。 // src/components/Header.tsx import I_LOGO from '../asse
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
マストドンのコード、特にフロントエンドをなんとかしたい、あるいはなんとかしている - このIP網の片隅で
はい。 このブログをわざわざ読んでいる方なら既にご存知かもしれませんが、マストドンをご存知でしょうか。 いわゆる分散型マイクロブログの一種で、2017年ごろのTwitter社による日本人イラストレーターの大規模凍結あたりで一時期話題になり、 最近またイーロンマスクによるTwitter社買収から始まった一連の混乱で再度少し話題にもなりました。 で、まあ僕としてもマストドンに小改造をしたうえで自分で運用しているんですが、マストドンのコードは今となってはだいぶ厳しい。 厳しい部分を挙げると割とキリがないんですが、ざっくり書くと フロントエンドがWebpackerにべったり、かつ独自configを書きまくっている デフォルトが隠蔽されているWebpackerと合わさり最終的にどういうconfigでwebpackerが動いてるのかたぶん誰も把握できてない Typescriptじゃない 動いてるからヨ
TypeScriptである型の部分型であることを保証する型定義 - | ＾ω＾ |
言い換えると、あるオブジェクトAに存在するプロパティが、あるオブジェクトBに生えているプロパティのいずれかに該当することを保証し、かつどのプロパティが生えてるかは自由、という感じにしたい。 追記: id:nanto_vi さんに教えていただいたのですが、組み込みで Partial という型があり、基本的にはこちらを使えば良さそうです。 TypeScript: Documentation - Utility Types 以下中身がどうなっているかなど keyofとMapped Type使えばなんかできそうだなーと思いつつも type PartialObjectOf<T> = { [P in keyof T] : T[P] } こんな風に書くと結局全てのプロパティを持っていないといけないし、どうすればスマートに書けるかなーと思っていた。 実際にはこう書けば良い type PartialObje
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
TypeScriptで世界一型安全な型レベルSQL Interpreterを作っている話
こんにちは。DevOps芸人と化して久しいAndyです。 2020年の秋にTypeScript 4.1へTemplate Literal Typesが導入され、そのインパクトに俄かに一部の界隈がザワついたのは記憶に新しいかと思います。 今回は型プログラミングの可能性を大いに押し広げたTemplate Literal Typesを用いてSQL文を型レベルで解析し、その実行結果を型情報として導出するためのsqlptureというライブラリを作ったので紹介します。 Embedded content: https://github.com/andoshin11/sqlpture SQLの実行/検証対象はPostgreSQL v13です。 tl;dr SQL文を型レベルで解析・評価して返り値型を取得できるmini interpreterを作ったよ 型レベルのSQL validatorも作ってるよ 実際
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript入門 2024
TypeScript 関数型スタイルでバックエンド開発のリアル
GitHub - gvergnaud/ts-pattern: 🎨 The exhaustive Pattern Matching library for TypeScript, with smart type inference.
