サービス開発における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
シェルスクリプトをJavaScript/TypeScriptで記述、どのOSでも実行できる「Bun Shell」、JavaScriptランタイムのBunが発表
JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」（Shell）と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に
Documentation - .jsファイルから.d.tsファイルを生成する
TypeScript 3.7では、 TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。 この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの体験を自分のものにできるということを意味します。 TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスはこちら。 .d.tsファイルを出力するようにプロジェクトを設定する プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります: dev dependenciesにTypeScriptを追加する TypeScriptを設定するためのtsconfig.jsonを追加する TypeScriptコンパイラを実行して、JSファイルに対応するd.t
Documentation - JSDocリファレンス
以下のリストは、JavaScriptファイルの型情報を提供する JSDocアノテーションにおいて、現在サポートされている構文の概要です。 以下に明示的にリストに入っていないタグ(@asyncなど)はまだサポートされていないことに注意してください。 @type @param (or @arg or @argument) @returns (or @return) @typedef @callback @template @class (or @constructor) @this @extends (or @augments) @enum class拡張 プロパティ修飾子 @public、@private、@protected、@readonly タグの意味は通常、jsdoc.appで与えられたものと同じか、あるいはそのスーパーセットです。 以下のコードでは、それぞれのタグの違いを説明し、使
TypeScript未経験でもスムーズに業務に取り組める、最強の学習用コンテンツを作った話 - NTT Communications Engineers' Blog
この記事は、 NTT Communications Advent Calendar 2023 19日目の記事です。 この記事では、TypeScript未経験のインターン生にすぐにSkyWayの開発に取り組んでもらうために、TypeScriptの学習用コンテンツを作成した話を紹介します。 学習用コンテンツでどのようなスキルを身に着けてもらったのか、効果的に学ぶためにどのような点を工夫したのかについても説明します。 はじめに 学習用コンテンツの目的 TypeScript学習用コンテンツの紹介 取り組んでもらった結果 より高度な内容について おわりに はじめに 皆さまこんにちは。イノベーションセンター SkyWay DevOps プロジェクト所属の@sublimerです。 SkyWayのチームでは、今年の8〜9月に現場受け入れ型のインターンシップを実施しました。 インターン生を受け入れるにあたっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenAI、JavaScript/TypeScriptランタイム「Deno」の公式SDKをリリース
