TypeScriptのもとでuseRefを使うときに知るべきRefObjectとMutableRefObjectについて
React v19 RC時点で、 MutableRefObject の廃止と RefObject への一本化、デフォルトでmutableになることが案内されています。続報に注意してください。 TypeScript環境でのReactの useRef は、初期値と型引数の与え方によって返り値の型が RefObject と MutableRefObject のどちらかになります。どういう使い方のときにどう書いてどちらを得るべきかを、 @types/react の更新まわりの議論を追った結果を示します。 この記事は2021年5月現在、React 17.0.2が最新バージョンの時点で記述します。 参考にした情報 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-446425911 RefObjec
TypeScript で T 型と {...} の併用で型チェックが機能しなくなる罠
はじめに Dwango でニコニコ生放送のフロント開発を担当している misuken です。 今回は TypeScript で T 型、つまり Generics(総称型)のオブジェクト(props 等)を spread operator で {...props} した際、事実上型チェックが機能しなくなる罠の話をしたいと思います。 Generics(総称型)のオブジェクトが対象なので T 以外の U などでも条件さえ整えば発生します。 React のコードを例に挙げますが、React だけで発生する問題ではないのでご注意ください。 Generics を使わない推論の例 まずは Generics を使わないパターンで期待通りに動作する例を見ていきます。 export const Component1: VFC<{ id?: string }> = (props) => { return ( <
VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説 - Qiita
2/22に個人開発のブラウザゲーム『ネコメザシアタック21』をリリースしました。 特に理由はないのですが、3年前からこの時期には毎年同じテーマでゲームを作ってます。 ぶっちゃけ全然流行らないし、当然収益なんて1円もないのだけど、3年続けると見えてくることもあるので今年も記事書きます。せめて供養がわりにLGTM頂けると幸甚の極みです 作ったものの変遷 まあそんなわけで、まずはこの3年間での進歩をみて欲しい 1年目：その場でジャンプするだけの超シンプルゲーム プレイURL: https://mezashiattack.firebaseapp.com ソースコード: https://github.com/yuneco/mezashi 解説記事: VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 その場でジャンプして弾（メザシ）を発射するだけの簡
Swdev: 真の No bundle frontend
みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか？ しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv
TypeScriptのnamespaceは非推奨ではない - Qiita
結論から 公式の TypeScript ドキュメントの何処にも namespace を非推奨と示唆する記載は無い。 尚且つ microsoft/TypeScript#30994(comment) で TypeScript チームのリード開発者である Ryan Cavanaugh 氏が述べているように将来的に廃止される事も無い。 TypeScript の namespace について調べると公式では無い記事や投稿で非推奨（deprecated）というワードが目立つ事、tslint や typescript-eslint を使用していると namespace の使用で注意されてしまう事などから非推奨と認識されてしまっていると推測する。 個人的に「非推奨」という強いワードは「使用するな」というメッセージ性を感じる。開発者同士の間で誤解を生みかねないため namespace は非推奨では無いと伝え
TypeScriptの異常系表現のいい感じの落とし所 | DevelopersIO
みなさんTypeScriptでサーバアプリケーション（Node.js）のロジックを書く時に、異常系の表現をどのようにされていますでしょうか？ここでいう異常系とは、仕様上想定される異常のことです。準正常系と言ったりもするかと思います。 私はJavaScriptの延長でTypeScriptをはじめたので、最初は null や undefined を返したり throw を用いるやり方をしていましたが、次第にTypeScriptが持つ型を生かし、できるだけ型安全に異常系を表現したいと考えるようになりました。そして試行錯誤した結果、いい感じの落とし所に落ち着いたので、その内容についてお伝えしたいと思います。 また記事の後半では、異常系の型を実装する中でハマった点についてもお伝えしたいと思います。 TypeScriptの異常系表現について 1. nullやundefinedを返す 冒頭でも述べたよう
esnip.dev - Share snippets
esnip.dev - Share snippetsPlay with presetreactpreacttfjssveltevue-tsxvanillaLatest editscatalogue by 7a08c584-b2f7-4128-b3ea-1942da371f65class with proxy by tosukeMarked + React JSX Renderer Example by 7a08c584-b2f7-4128-b3ea-1942da371f65fork: input test/raf by tosukeinput bug(firefox + skk) test by tosukeinput test by tosukeinput test by tosukeinput test by tosukefork: react by Shinyaigeeknoise
2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け）のインストール方法です。v2 （TypeScript 4.5〜）ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。
TypeScript >= 4.1 の Template Literal Types を活用した引数パーサーを作ってみた - ジンジャー研究室
ヘルプっぽいものを書くと文字列をパースして型をつけてくれる。 デフォルト値を指定すると T | null が T になったりする。 公開は今のところ GitHub Packages だけです（メンテしなくていい方法を考え中） github.com 型レベルのパーサーはこちらの記事を大いに参考にしたというかパクりました。 (ネタ) TypeScript 型パズルで作るmini interpreter | by Yosuke Kurami | Medium こんなに本格的じゃないけど。 難しいなと思ったのは、せっかく型レベルでパースしてもその結果を値レベルの実装に利用できない点。 なので、型は型、値は値でそれぞれパースして最終的に辻褄が合うように実装しました。 それでは皆さま良いお年を。
設定0行でNext.jsとNuxt.jsの内部リンクを型安全に取得できる最強ライブラリ「pathpida」
Qiita TypeScript Advent Calendar 2020 最終日の記事です。 TypeScript製の内部リンク取得ライブラリ「pathpida」 最近ちょっと話題になった frourio と aspida を開発したSolufaです。 Zenn初投稿を記念して、新作ライブラリ「pathpida」を紹介します。 と言っても完全な新作ではなく、初回リリースからもうすぐ1年が経ち月間DL数は1,000を超えています。自分が関わる案件だけで静かに検証を続け、ようやっと今週全面リニューアルして一般告知が出来るようになりました！ pathpidaはNext.jsとNuxt.jsそれぞれのルーティング規約に最適化しているので設定不要で型安全に使うことが出来ます。 どんな問題を解決するのか 以下のように/post/1 に遷移するLinkがあるとします。 import Link from
TypeScriptでVimのファジーファインダーを実装して開発体験が最高になっている話
2020/12/31 追記 VimからTypeScriptを実行するためのランタイムとしてNeovimのRemote Pluginかcoc.nvimのRPCを使うと書いたのですが、Vim scriptでRPCを実装したので外部のRPC実装への依存がなくなりました。 coc.nvimを導入していない状態のVimでも使えるようになったので、興味がある方はぜひ試してみてください。 はじめに この記事は自分が開発しているTypeScript製Vimプラグイン、fzf-preview.vimについての記事となっています。 以下のような内容について書いています。 自分のエディタ(Vim)との付き合い方 ファジーファインダーを用いた開発体験・開発フロー プラグインの機能 プラグイン開発のモチベーション プラグインの導入など 色々と書いていたら結構な量になってしまったので、動作を見たい場合はfzf-pre
最近話題の TS 製 ORM「Prisma 2」でログイン処理を試してみたら超快適だった
はじめに この記事は、Qiita: TypeScript Advent Calendar 2020 24 日目の記事です 🎄✨ 今回は、Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass で紹介されていた Prisma 2 を、同じく紹介されていた frourio を使って試してみます。 環境構築 frourio で一気に まずは create-frourio-app でサクッと環境構築します。 今回は以下の構成で試してみます。 MySQL を建てるのが面倒な場合は、SQLite でもいいと思います。 Core framework of frourio : Fastify Frontend framework : Next.js Building mode : Basic HTTP client of aspida : axios
VBAでやってたその業務TypeScriptで出来ませんか？ - Qiita
これはTypeScriptアドベントカレンダー2020の23日目の記事です。 Office Scripts使って単純業務効率化していこうという記事です。 Qiita初投稿＆締め切りギリギリで書いてるのでがばってる可能性高しです。 ことの発端 普段はサービス企画をしており職種としてはエンジニアとは呼べないのですが、業務を色々改善するにはコードは書けるに越したことはないので、ちょこちょこ書いてます。 今のチームに入ったのは最近なんですが、かなりレガシーかつ属人的な作業が多くこれはなかなか困ったものだとなってました。 状況 チームでコード書くのは私一人 保守するのも私一人 人事異動激しいのでいつでも抜けれるように, でも業務は減らしたい 業務内容（雑） とあるexcelデータから月次で数十-１００件程度取得 行ごとにデータを確認して、いい感じに集計、文章に整形してメール送付 いろんな業務条件が重
`let h = null`について、TypeScript はどのような型を推論するか - Qiita
はじめに Q. let h = nullについて、TypeScriptはどのような型を推論するでしょうか？ (▶ をクリックすると回答が表示されます) A. any 型 (let h: any) となる1 こちらの問いは、プログラミング TypeScript ――スケールする JavaScript アプリケーション開発に記載されていた問いになります。 皆さんは正解しましたか？ (ちなみに、const h = nullとした場合、hは null 型となります) 本記事では、なぜこのような結果になるのか解説したいと思います。 前提 バージョン
TypeScript4.1から正式に登場したテンプレートリテラル型について - Qiita
ついにTypeScript4.1がリリースされましたね。 今回のリリースの目玉はなんと行ってもテンプレートリテラル型なのではないでしょうか。 今回はテンプレートリテラル型とはなにか、具体的な使い所について触れていこうと思います。 テンプレートリテラルとはなんだったか まずはテンプレートリテラルとはなんだったか確認です。 テンプレートリテラルとは組み込み式を扱うことが可能な文字リテラルのことです。 粗雑な覚え方としてはバックティック文字で囲まれた文字列のことです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ivanhofer/typesafe-i18n: A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference
Vite | 次世代フロントエンドツール
GitHub - crosstype/crosstype: CrossType is a multi-language translation engine for cross-compiling data structure types
Your connected workspace for wiki, docs & projects | Notion