敗北者のTypeScript - Qiita
TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性（コンパイル時にバグ・間違いを発見することができる能力）を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeScriptへの移行が可能となっています。TypeScriptは@ts-check（あるいは@ts-ignore）などを通じてこのようなユースケースも手厚くサポートしています。 このことの裏返しとして、TypeScriptを利用するときは注意すべき点があります
TypeScriptの型システムに命を吹き込む: Typia と unplugin-typia
TL;DR この度、unplugin-typia という Library を作りました unplugin-typia を使うと今までめんどくさかった Typia の導入が簡単になります Vite、esbuild、webpackなどフロントエンドで主流の様々なbundlerに対応しています Next.jsでも簡単に使えます Bunにも対応しています はじめに 皆さんはTypeScriptでのValidationにはどのような Library を使っていますか？ zodはエコシステムが硬いし、最近だとvalibotが流行りつつありますね。 またarktypeも注目に値するLibraryです。 typeboxも耳にする機会が増えてきました。 また個人的には（厳密にはValidatorではないですが)、unknownutilも手に馴染んでよく使っています。 既存のValidation Librar
DDDの実装にはあまり興味がなくなっている - Mitsuyuki.Shiiba
以前は、DDDでどう実装したらいいかなぁって考えてたんだけど、最近は、そういうことへの興味があまりなくなっている。エンティティや値オブジェクト、集約やリポジトリなど、そのあたりにあまり興味がない。ヘキサゴナルアーキテクチャなども、そんなに考えなくなった。 TypeScriptを使うことが多いので、型でしっかり守るとかカプセル化するとか、そのあたりがどっちでもいっかという気持ちになっていることが影響してるとは思う。TypeScriptでクラスを使おうとはあまり思わないし。BrandedTypeみたいなのを使ってまで型で守ろうとは思わない。 じゃあ何に興味があるんだっけ？って考えてみると、トランザクション境界とユビキタス言語かな。 トランザクション境界 トランザクションの境界を作って、DB（RDBMS）を小さく保ちたいと思っている。DBが大きくなると、すぐに複雑になっていく感じがする。 だから
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
サービス開発におけるVue3とTypeScriptの親和性について
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
TSConfig Guide - Generate a modern TSConfig file from just a few toggles.
Sick of scouring the TypeScript docs to setup your TSConfig?I was too, so I built this tool to get you started with some smart defaults! This TSConfig builder is heavily influenced by Matt Pocock's TSConfig Cheat Sheet. I highly encourage you to check it out for further explanation of these properties.
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
カリー化と部分適用
カリー化と部分適用 先日同僚にカリー化を説明する機会がありました．その際に，簡潔に説明に適した自分用の資料があるといいなと思いましたので，こちらの記事を書くことにしました． この記事ではカリー化と部分適用について解説します．歴史等には触れずにただその内容について述べます． 混同しやすいという情報があるのですが，割と違うレイヤの話なのでなぜなのかは不明ですが，関連性に関する私見も末尾に書いておきます． カリー化 カリー化 (Currying)[1]とは 複数の引数を取る関数を，単一の引数を取る関数に翻訳する手法 のことです． 簡単な例を見ます．以下のような2つの引数を持つ関数を考えます． const add = (a: number, b: number) => a + b; console.log(add(1, 3)); // 4 関数を値のように返す関数のことを高階関数と呼びます． カリ
ts-node で path alias が効かないにハマる - かもメモ
TypeScript な Express を ts-node で動かしてて tsconfig.json に path alias を設定したんだけどエラーになってなんもわからん。ってなったのでメモ 環境 typescript: ^4.5.4 ts-node: ^10.4.0 ts-node-dev: ^1.1.8 結論 tsconfig-paths を使って ts-node 実行時に -r tsconfig-paths/register オプションを渡してあげれば OK package.json (entry point が src/index.ts の場合) { "scripts": { "start": "ts-node -r tsconfig-paths/register src/index.ts", "dev": "ts-node-dev -r tsconfig-paths/reg
GAS + Typescript のいい感じのビルド環境を整える
株式会社TERASSで主にフロントエンドを中心にエンジニアをしている myrear (読みは「みりあ」)です。 社内で GAS を使った小さいアプリケーションを作る機会があり、その時にビルド周りで行った工夫をシェアしていきます。 はじめに Google Apps Script (以下 GAS) を使ったアプリケーションの開発は、 GAS 上のエディタで直接 .gs ファイルを編集するか、ローカルで書いた .js (または .ts ) ファイルを clasp を使って変換・プッシュ(アップロード)するのが主流かと思います。 ここでは後者の clasp を使う方法の中でも .js .ts から .gs へ変換する部分に焦点を当て、この方法に含まれる問題点を取り上げそれらを解決していくことでいい感じのビルド環境を整えることが目標です。 ゴール この記事の最終的なゴールは以下です。 typescr
TypeScript5.4の新機能をピックアップ - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 3月6日にTypeScript5.4がリリースされました。 そこで、今回は個人的に気になった機能についてピックアップして紹介したいと思います。 はじめに 型の絞り込み NoInfer まとめ 型の絞り込み 関数クロージャ内の型の絞り込みの挙動が少し変わりました。 以下のgetUrlsでは、まず始めにtypeof演算子を使用して、第一引数のurlがstring型かどうかを確認しています。 string型であった場合、URLのインスタンスを生成します。 その後、map関数内でURLのプロパティであるsearchParamsを使用しています。 function getUrls(url: string | URL, names: string[]) { if (typeof url === "str
TypeScript 5.5で型述語を推論できて最高。配列のfilterも型安全に
TypeScriptの次バージョン5.5で、開発者が長い間求めていた挙動が手に入ります。 現状のTypeScript （執筆時点で5.4）では、ユーザー定義型ガードを使う際には型述語（用語は後ほど解説します）の記述が必要です。 function isNumber(value: number | string): value is number { return typeof value === 'number'; }
サバイバルTypeScriptのGPTsを作成・公開しました
サバイバルTypeScriptは有志で執筆を進めているTypeScriptのOSSドキュメントです。 今回、サバイバルTypeScriptのドキュメントをベースにTypeScriptに関する質問に答えてくれるGPTsを作成・公開しました✨ この記事ではGPTs公開の背景や作成手順、現状の課題などをまとめています。 GPTs公開の背景 LLMによるドキュメント検索は近い将来（既に？）一般的になると思い、サバイバルTypeScriptでも実験的にチャットボットでの情報アクセスを作成・公開しました。 ドキュメントの情報アクセスの課題 ドキュメントが多くなると、目次やサイトマップ、サイト内検索だけでは必要な情報にアクセスするのが困難になる。 チャットボットのメリット 雑な質問でも意図を汲んで、知りたい情報にアクセスしやすい 内容を要約して説明してくれるので、手軽に情報にアクセスできる 回答の信頼性
Components (experimental) | Playwright
test('event should work', async ({ mount }) => { let clicked = false; // Mount a component. Returns locator pointing to the component. const component = await mount( <Button title="Submit" onClick={() => { clicked = true }}></Button> ); // As with any Playwright test, assert locator text. await expect(component).toContainText('Submit'); // Perform locator click. This will trigger the event. await
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TypeScriptの型定義まとめ【Reactも対応】
はじめに プログラムを始めて間もない時に以下のような体験をした人は少なくないのではないでしょうか。 静的型付け言語を始める → むずい。もう嫌 → 動的型付け言語サイコー！→ いや、やっぱ静的型付け言語大事だわ 少なくとも僕はこの一人でした。 加えてこんなことも思ってる人もいるのではないでしょうか。 静的型付け言語やりたいけど、業務で使う言語は動的型付け言語での開発がメイン。かといって今使ってない Java とかをガッツリやるのもなぁ。 なんて思ってたら TypeScript が誕生。歓喜。 よく使う言語を続けつつも静的型付けを取り入れることが可能になりました。 そんなこんなで最近は TypeScript の学習を始めましたのでアウトプットとして型の定義の方法まとめです。 並走で React の学習も進めているので通常の TypeScript の型定義と React 特有の型定義を本記事で
TypeScriptの代数的部分型模型
本書ではTypeScriptの型と部分型関係がなす代数的構造を解説し、型についての強固かつ柔軟なメンタルモデルを構築します。 順序理論、集合論、束論、環論、そして圏論に至るまで、複数の数学理論を利用して多角的にモデルを構築することで、型の直感的な理解を深め、型の互換性に対する自然な推論を可能となるように解説した新しい試みの本です。
Viteを利用したテストツールVitestの利用を始める - Qiita
はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え
型を少し工夫して、より安全なコードへ - エムスリーテックブログ
こんにちは、デジスマチームでエンジニアをやっている堀田です。 これまで、TypeScriptの型で色々試したことがあります。 2年前: TSの型で麻雀の点数計算 最近: 型で足し算 遊ぶことの方が多かったですが、先日M3 TechTalkで実用的かも？と思える話をしました。 そこでは、3つの場面を想定して、それぞれの場面でより安全なコードを書くための型定義を提案しました。 この記事では、その時の話をまとめて紹介します。 1. key? 2. ログ送信 Rest parameters with tuple types Function Overloadsでも実現可能 3. 画面遷移パス生成 まとめ We are hiring!! 1. key? 早速、1つ目の場面です。 ここでは、「パラメータを受け取って、その値によって生成か更新か挙動が変わる」以下のような関数を扱うことを考えます。 fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptを活用したi18n対応
