TypeScriptのESMでハマる - くらげになりたい。
markdownからhtmlに変換したいなーと思い、 micromarkを使おうとしたら、 ES Modulesでかなりハマったので、その時の備忘録。 はじまり 今まで使っていたらちょっとしたツールのプロジェクトに、 micromarkをインストールしたら、こんなエラーが。。 $ npx ts-node sample.ts ./node_modules/ts-node/dist/index.js:842 return old(m, filename); ^ Error [ERR_REQUIRE_ESM]: require() of ES Module ./src/node_modules/micromark/index.js from ./src/sample.ts not supported. Instead change the require of index.js in src/s
【T3 Stack】フロントエンド・バックエンドTypescript開発入門
はじめに フロントエンドもバックエンドもTypescriptで書きたい！ということで、T3 Stack（T3スタック）について調べてみました。 T3 Stackを利用したプロジェクトを作成するためのCLIツールcreate-t3-appが用意されており、簡単に雛形プロジェクトが作れるため、実際に使ってみました。 この記事は以下の内容をメインに紹介します。 create-t3-appの環境構築手順 雛形プロジェクトの解説（特にtRPCを用いたAPIの呼び出し方法について） T3 Stackとは T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想に焦点を当てています。 そしてそれらを実現するために以下6つの技術スタックが採用されています。 ✅ Next.js ✅ tRPC
ライブラリにTypeScriptコードを同梱するときはディレクトリを分けよう - Qiita
ライブラリがこんな構成になっていませんか？ TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか？フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...
ExpressoTS 入門
はじめに 今回の記事では、今年にリリースされたTypeScriptフレームワークであるExpressoTSの概要と、それを使った簡単なWebサーバを構築する手順を解説する。 対象とする読者 タイトルを読んで気になったひと 実務でTypeScriptを触っているひと TypeScriptでWebサーバを構築したいひと ExpressoTSとは ExpressoTSとは、NestJSと同様にTypeScriptで開発されたバックエンドフレームワークである。公式サイトのIntroductionには、以下のように説明されている。 ExpressoTS is a TypeScript lightweight framework for building scalable, readable and maintainable server-side applications. The framewor
OpenAI Function Calling を Zod + TypeScript で型安全に扱う - Qiita
概要 OpenAI の Chat Completions API に Function Calling と呼ばれる新しい機能が追加されました。これを使うと、JSON Schema で指定した型に従う JSON 文字列を GPT が返してくれます。（ただし 100% valid な JSON が返る保証は無い） 特にライブラリに頼らずに Function Calling を利用しようとすると、 JSON Schema を書く OpenAI API にリクエスト 返ってきた JSON 文字列をパースして検証する というステップが必要になって面倒ですが、Zod のスキーマさえ書けば 1, 3 の手間を省きつつ型安全に実装することができます。 目指す姿 import { z } from "zod"; // 手動でコードを書くのは関数の名前、説明文、Zod スキーマの部分だけ const func
TypeScript: Union to intersection type
Published on June 29, 2020 Stefan on Mastodon Reading time: 17 minutes More on TypeScript Recently, I had to convert a union type into an intersection type. Working on a helper type UnionToIntersection<T> has taught me a ton of things on conditional types and strict function types, which I want to share with you. I really like working with non-discriminated union types when I try to model a type w
JavaScript / TypeScript の豆知識 10 選 - Qiita
JavaScript / TypeScript の豆知識 10 選 初めに JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。 コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。 少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。 それでは、以下が目次です。 JavaScript / TypeScript の豆知識 10 選 初めに 1.Nullish と Falsy 関連参考資料_1 2. tsconfig の便利な設定 関連参考資料_2 3. 依存関係の綺麗な図示の仕方 関連参考資料_3 4.正しい XSS のやり方 関連参考資料_4 5.removeChildren 関連参考資料_5 6.数値型を関数の引数として使う時の小技 関連参考資料_6 7.hi
TypeScript 型レベル関数型プログラミング in 2023 - Object.create(null)
ちょっと前に話題になった hotscript の技法の紹介やら, ラムダ計算を TypeScript の型にコンパイルする話やらなんやら. 通常の型レベル関数 TypeScript の型エイリアスはパラメータを取れるので, これは型レベルの関数であるとみなせます. type IsNumber<X> = X extends number ? true : false; type A = IsNumber<42>; // = true 一方でこのようにして定義された関数は第一級ではない, つまり関数そのものを他の関数の引数として渡したりすることができません. type FilterUnion<F, X> = X extends unknown ? (F<X> extends true ? X : never) : never; // ~~~~ // ^ Error: Type 'F' is n
ts-array-lengthを支えるテクニック
皆さんこんにちは。筆者は先日、TypeScript向けライブラリのts-array-lengthを公開しました。 この記事ではこのライブラリを宣伝するとともに、ライブラリの実装がどのようになっているのか解説します。 ts-array-lengthの機能 ts-array-lengthは3つの関数を提供しており、これらを使うことでなんと配列の要素数をチェックできます。 例えばhasLengthを使うと、配列の要素がちょうど2個かどうか調べることができます。 if (hasLength(arr, 2)) { // arrは2要素の配列！ const [first, last] = arr; }
えっ？Browser内でNode.jsアプリが動く？？ WebContainerAPIをTypeScriptで動かしてみた
概要 StackBlitzのサービスを支えるWebContainerという素晴らしい技術のAPIが公開されたので、実際に気になっている方に向けて、体験した所感を紹介しようと思います。一見サーバサイドのNode.jsでやっているように見えることが、実際にはブラウザ内部で動いているので、めちゃくちゃすごいです。 対象読者 StackBlitzにお世話になっていて、その裏側の仕組に興味がある方 ブラウザ内で、Node.jsを動かしたいなぁと思っている方 WebContainerに興味がある方 はじめに フロントエンド界隈では、有名なplayground環境と思われるStackBlitz(このZennの挿入もできるサービスなので、見たことある方も多いかもしれません)が提供している、サービスを支える重要な技術である、WebContainer(Webブラウザ上で実現されるWebAssemblyベースの
tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』
コピーtsconfig.jsonが作成されます。すでにtsconfig.jsonがある時は上書きされませんのでいったん既存のtsconfig.jsonを別名に変更するなど、一度tsconfig.jsonと名のつくファイルが存在しないようにしてください。 公式にあるtsconfig.jsonの説明はこちらです。 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html すべてのオプションの解説をすると余白が足りないので、ここでは用途を抽出して、次の観点で説明します。 targetの決め方フロントエンドとバックエンド2020年版スクラッチからつくるならtargetTypeScriptは最終的にJavaScriptにコンパイルされます。このオプションはそのときにどのバージョンのJavaScript向けに出力するかといったもの
Documentation - What is a tsconfig.json
Overview The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. JavaScript projects can use a jsconfig.json file instead, which acts almost the same but has some JavaScript-related compiler flags enabled by default. A project is co
TSConfig Reference - Docs on every TSConfig option
A TSConfig file in a directory indicates that the directory is the root of a TypeScript or JavaScript project...
一定規模を超えたプロジェクトに Organize imports を一括で適用する - カミナシ エンジニアブログ
こんにちは。ソフトウェアエンジニアの坂井 (@manabusakai) です。 カミナシは Web ブラウザ向けに React、ネイティブアプリ向けに React Native を採用しています。 2023/02/10 時点で ts, tsx のファイルは 1,468 個ありました。 一定規模を超えたプロジェクトということもあり、Prettier や Organize imports が適用されているファイルとされていないファイルが混在していました（Organize imports は未使用の import を削除したり、既存の import をファイルパスでソートする機能のことで、TypeScript 2.8 から使えるようになりました）。 Pull request を作るときはコードフォーマッターの差分だけコミットを分けたり、少しの変更であれば他のコミットに混ぜてしまっているケースも見
T3を支えるTypeScriptのエコシステムと”Typesafe”というAxiom @Quramy
本記事は、TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 よろしくお願いします。 事前に書いたタイトルが「T3を支えるTypeScript」だったのですが、資料をまとめながら「いや、これなんかTypeScriptというよりエコシステムの話かな」となったので、最後に「のエコシステム」という言葉を補足しつつ、お話しさせていただこうかなと思います。 自己紹介です。@Quramyというこの緑色のアイコンで、TwitterだったりGitHubだったりの活動をしている人です。 Tで始まるライブラリが3つ入ったT3 Stack 今日はTypeScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、「TypeScript」高速化のために開発した「Deopt Explorer」を一般提供／「V8」の内部構造を理解している上級ユーザー向けの「Visual Studio Code」拡張機能
GitHub - microsoft/ts-parsec: Writing a custom parser is a fairly common need. Although there are already parser combinators in others languages, TypeScript provides a powerful and well-structured foundation for building this. Common parser combinators’ w
GitHub - didinele/typescript-docker-monorepo: Template for creating dockerized applications under a pnpm monorepo for shared libraries and code.
GitHub - negezor/typescript-monorepo-boilerplate: Pure ESM monorepo usage native TypeScript compiler 🌟
GitHub - sindresorhus/type-fest: A collection of essential TypeScript types
