ついに来る! TypeScript 5.0の新機能を全紹介 @uhyo
本記事は、TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 皆さまこんにちは、株式会社バベルにてプリンシパルエンジニアをしておりますuhyoです。まもなくリリースされる予定のTypeScript 5.0の新機能が、この発表ですべてわかるように用意しましたのでぜひお聞きください。 TypeScriptのリリースサイクル まずはTypeScriptのリリースサイクルをおさらいしておきましょう。TypeScriptは3カ月に1回のリリースサイクルを採用しており、TypeScript 5.0もそのサイクルに則り、2023年3月に公開される予定です(3
Create T3 App
The best way to start a full-stack, typesafe Next.js app Typesafe From The Start We made create-t3-app to do one thing: Streamline the setup of typesafe Next.js apps WITHOUT compromising modularity. After countless projects and many years on this tech, we have lots of opinions and insights. We've done our best to encode them into this CLI. This is NOT an all-inclusive template. We expect you to br
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
T3 Stack でアプリを構築して実行してみた
今回は yarn を使いました。 アプリの雛形を生成するコマンドを実行すると、いくつかの質問が表示されます。 括弧 (my-t3-app) の中はデフォルト値となっており、何も入力せずに Enter を押すとその値が使われます。 $ yarn create t3-app yarn create v1.22.15 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.3.2: The platform "linux" is incompatible with this module. info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
TypeScript・モジュラーモノリスによる型安全なWebサービス開発
こんにちは。SALESCORE株式会社CTOの成澤です。 祝・Publication機能のオープンβリリース🎉🎉 ということで、SALESCOREのテックブログを発信し始めます！ テックブログの一発目ということで、2022年で一番開発体験が変わったTurborepoによるモノレポ・モジュラーモノリスによる開発について紹介します。 今後もTypeScriptでのWebサービス開発について記事を出していく予定なので、気になる話題などあればコメントいただけるととても嬉しいです🙋♀️ モジュラーモノリスという選択肢 ソフトウェア開発における重要な要素の1つは抽象化です。 抽象化をあえて噛み砕いて、平坦な言葉で言うならば 「適切なグルーピング」 と呼んでも良いでしょう。抽象化とは、ものごとをグルーピングして、適切な名前を与えることです。 100行の処理の羅列は分かりづらいが、10行ずつグルー
TypeScript 4.9のas const satisfiesが便利
今日開催の「TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線」で発表した資料です。 https://techfeed.io/events/techfeed-experts-night-11 Zennの記事はこちら https://ze…
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
tRPCを導入したら爆速でWebサービスをリリースできた話
この記事は 「個人開発Advent Calendar 2022」 8日目の記事です。 はじめに 先日リリースされた、SplarateというWebサービスの開発をお手伝いしています。そこで導入したtRPCが驚くほど便利だったので、実際の体験を交えてその使いやすさを紹介します。 tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation. https://trpc.io/docs/ tRPCは、スキーマやコード生成なしで型安全なAPIを簡単に構築し、呼び出すことのできるライブラリです。 tRPC is for full-stack TypeScript developers. と謳われているように、TypeScriptに特化して作られており、Ty
frourioを使って1ヶ月で管理画面をリリースした話 - Leverages Tech Blog
はじめに こんにちは、レバテック開発部の河村です。 私はレバテック各種メディアのリプレイスを担当しており、バックエンドを中心にフルスタック開発を行っています。 今回は管理画面のリリースで採用した、フルスタックフレームワークであるfrourioについて、frourioを採用した理由や使ってみて良かったこと、困ったことを紹介します。 この記事を通して、frourioのメリット、デメリットだけでなく、レバテック開発部ではどのような背景のもと、技術・アーキテクチャの選定を行っているのか、どれくらいのスピード感で開発を行っているのかをお伝えできればと思います。 なお、この記事ではfrourioにおける環境構築や使い方等の説明は割愛させていただきます。 開発背景・経緯 今回、開発する対象となった管理画面は、レバテックの各メディアで運用する記事やセミナー情報、エントリー情報を管理するものになります。 す
TypeScript エラー処理パターン - Object.create(null)
M 年前にも N 年後にも人類は同じ話をしている. まとめ エラーの発生方法は throw と return に大別できる throw には簡潔さ, return には明瞭さと型安全性といった特徴がある どちらの方法がより適しているかはプログラムの規模, エラーの種類, ハンドリングの方法などが判断の材料になる 実際にどちらの方法を使うかは上の判断材料と, フレームワークやプロジェクトのコーディング規約なども合わせて複合的に決めるのがよい エラー発生方法の分類 まず前提として, 関数から呼び出し元にエラーを伝える方法は以下の 2 つに大別できます. 逆にこの記事ではこれ以上の具体的な方法についての議論はしません. throw エラーを throw して呼び出し元に伝える方法です. 例えば以下のようなものが当てはまります. throw new Error("...") Promise.rej
GitHub - marcj/TypeRunner: High-performance TypeScript compiler
Parser Type checking (as CLI and as library) Language Server Interactive type debugging Type information in other languages (optional) transpiling to JavaScript (optional) RTTI in JavaScript (optional) type profiler Additionally, making TypeScript type checking as fast as possible and providing a native library for other languages so they can use TypeScript type information without the need for a
Deno のめっちゃ難しいバグを修正した - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしてい
【TypeScript 4.9 beta】satisfies に大満足
少し前に、TypeScript 4.9 betaがリリースされましたね。その中でもsatisfiesオペレータに、「おお！いいやん！」と個人的に興奮したので軽く記事にしたいと思います。 概要 一言で言うと「typoとかが嫌なので型でしばりたい が 推論は具体的なままでいてほしい」という想いを実現してくれるのがsatisfiesです。 上記のBlogも十分わかりやすいかと思いますが、本記事では、より簡素な例を用いて説明したいと思います。 以降colorsというオブジェクトを定義すると仮定して、説明を進めます...。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
逆引き 型ファースト Zod
T3 Stack and TypeScript ecosystem
JavaScript / TypeScript の豆知識 10 選 - Qiita
GitHub - tsconfig/bases: Hosts TSConfigs to extend in a TypeScript app, tuned to a particular runtime environment
TypeScript による GraphQL バックエンド開発
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
