はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
EDIT: A previous version of this post recommended publishConfig, operating under the mistaken belief that it could be used to override "exports" during npm publish. As it turns out, npm only uses "publishConfig" to override certain .npmrc fields like registry and tag, whereas pnpm has expanded its use to override package metadata like "main", "types", and "exports". There are a number of reasons y
GitHub - marpple/FxTS: A functional programming library for TypeScript/JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー
STORES 予約 エンジニアの水野です。STORES 予約 の店舗管理画面で利用しているTypeScriptをv4.8からv5.5にアップグレードしたので追加された主な機能をおさらいしようと思います。 satisfies (v4.9) v4.9で実装されました。 型アノテーションのように型付けしつつ型推論も行う演算子です。 例を見てみましょう。 type Color = 'red' | 'green' | 'blue' const pallet: Record<Color, string | number[]> = { red: [255, 0, 0], green: '#00ff00', blue: '#0000ff', } // pallet.red => string | number[] pallet.redの型はstring | number[]となっています。これはRecor
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
GitHub - antfu/utils: Collection of common JavaScript / TypeScript utils
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
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
スプシの翻訳情報を用いた型付けと段階的i18n対応のためのカスタムESLint ### 内容 ・@nuxt/i18nのt関数にパッチを当ててスプシから生成された翻訳情報で型を付ける ・段階的なi18n対応のために特定ファイルから参照されるコードのみに翻訳漏れを検証するカスタムESLint
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート 2024年5月11日、中野セントラルパークカンファレンスにてTSKaigi 2024が開催されました。TSKaigiは今年初めて開催されたTypeScriptに特化した技術カンファレンスです。前身もない、完全初開催にも関わらずチケットはタイムテーブル公開前に完売。オンライン参加者も含めると2000人を超えるなど、とても注目度が高いカンファレンスとなりました。 今回筆者は運営スタッフとして参加しました。この記事では、TSKaigiがどのようなイベントだったのかに触れたうえで、当日の模様をレポートします。 TSKaigiついて TSKaigiは、日本最大級のTypeScriptをテーマとした技術カンファレンスです。コロナ禍で様々なオフラインイベントが打撃を受ける中、TypeScriptを扱うエ
Kobe.tsとは TypeScriptとその周辺知識についての勉強会を開催していくコミュニティです。 なので、フロントエンドに限らず、node.js, Deno, Nest,js, Freshなどのバックエンドや、Firebase,Cloudflare,VercelなどのSaaS、npm,pnpm,Biome,tailwindCSS,Figmaなども取り扱うトピックの範囲です。 記事執筆時点でですが、立ち上げから3週間で既にメンバーが80人になりました。 神戸在住な方に限らず、ぜひメンバーになるボタンだけでも押していってください！！！ なぜ神戸？ 生まれてこのかた約30年、ずっと神戸に住んでいるからです。おそらくこれからも住み続けます。 そう断言できるのは、もちろん私が神戸を気に入っているからというのもありますが、職場が神戸にある妻と結婚したからです。 ソフトウェアエンジニアとしての性が
Today we are excited to announce the availability of the release candidate of TypeScript 5.5. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.5! Inferred Type Predicates Control Flow Narrowing for Constant Indexed Accesses Type Imports in JSDoc Regular Expression Syn
この記事で扱うコードは全てTypeScript Playgroundにまとめていますので、 もし実際にコードを確認したい場合はそちらでご確認ください。 26以上のメンバーを持つMappedTypeで型の絞り込みができない 表題の通りですが、実際にコードを見てもらうのがわかりやすいでしょう。 const maxMap = { one: {a: 1}, two: {b: 2}, three: {c: 3}, four: {d: 4}, ... twentyThree: {w:23}, twentyFour: {x:24}, twentyFive: {y:25}, twentySix: {z:26}, } type MapKey = keyof MaxMap type MapValue<T extends MapKey> = MaxMap[T] interface ObjectImpl<Key,
TypeScriptユーザーに贈るGleam入門
最近v1に到達したGleamという静的型付けな関数型言語があります。 GleamはErlangとJavaScriptをターゲットに実行できるため、今TypeScriptを使っている領域でも使うことができます。 この記事ではTypeScriptユーザー向けにGleamの文法を解説していきます。 記事を通してGleamの良さを感じていただければ幸いです。 Gleamの公式サイトでは以下の言語のユーザー向けのチートシートもあるため、この中に知っている言語があるのならそちらを読んでみるのがオススメです。 Elixir Elm Erlang PHP Python Rust また、個人的にGleamの情報をCosense(Scrapbox)にまとめているので、リファレンスがてら覗いてみてください。 organizationとして管理していきたいと考えているので、編集のリクエスト等も歓迎です。 編集した
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
集合で理解する Typescript
🌼 はじめに 私は高校の数学時間に初めて集合について教わりましたが、その時は全然知らなかったです。まさか Typescript に集合の知識を活かす日が来るとは、、 ということで今回は集合の観点で理解する Typescript について語ります。 1. 型は値の集合 変数には色んな種類の値を割り当てることができ、Typescript なので型を持ちます。 const A: number = 42 const B: null = null const C: undefined = undefined const D: string = 'Canada' const E: boolean = true const F: number[] = [1, 2, 3, 4] const G: { [k: string]: string} = { name: "name" } 集合的に考えると、型は割
マイクロソフトが開発したプログラミング言語「TypeScript」、エンジニアの平均年収はいくら？（＠ＤＩＭＥ） - Yahoo!ニュース
TypeScriptは言語年収ランキングの4位に位置し、平均年収は1,235万円となっている。中央値年収もそれに近い1,190万円。月収では平均で103万円、中央値は99万円と、高水準にある。時給でみても、平均6,124円、中央値5,903円と良好な水準となっており、TypeScriptが開発者にとって魅力的な言語の1つであることがうかがえる。 TypeScriptの案件数TypeScriptの案件数は全体の11.0%を占めており、案件数ランキングでは4位に位置している。多様な分野でTypeScriptが利用されるなど、需要が非常に高い言語といえる。開発者にとってTypeScriptは就業機会に恵まれた選択肢の1つと言えるだろう。 TypeScriptの開発者の稼働日数を見ると、週2～3日が51.49%と最も多く、次いで週4～5日が47.52%となっている。この2つを合わせると99%以上を
TypeScriptコードを直接実行したい（ts-node、esbuild-register、tsx） - CLOVER🍀
これは、なにをしたくて書いたもの？ Node.jsでソースコードを書く時は基本的にTypeScriptにしたいのですが、時々ちょっとしたスクリプトを書きたい時もあったりします。 そういう時は、ちゃんとした設定などは特に用意せず、さっと書いてそのまま実行したいのですが、そういう時はどういう手段が あるのかなと思って、調べてみることにしました。 やりたいこと TypeScriptファイルを実行時に直接トランスパイル、実行したいわけですね。 選択肢としては、ts-node、esbuild-register、tsxがあるようです。 今回はそれぞれをあまり深追いせず、さらっと見ていく感じにします。求めている用途がそういう傾向なので。 ただ、実行速度は気になるので、そこは動作時に合わせて見ていきたいと思います。 ts-node ts-nodeは、Node.jsのTypeScript実行エンジン、REP
はじめに 現在 https://snkrdunk.com/ では、多くのWebアプリケーションにおいて、webpackを利用してマルチページアプリケーション（MPA）の構成でFrontendの実装をしています。 エントリーポイントは100を超え、その大半がVue.jsとJavaScript、TypeScriptを組み合わせて実装されています。 今回は、そんな環境の依存関係を紐解くべく調査のためのscriptを作成したお話になります。 エントリーポイントごとの依存関係をJSON形式で生成 [ { "entryPointPath": "src/entryPointA.js", "dependencies": [ "vue", "vue-router", "src/moduleA.js", "src/moduleB.js" ] }, { "entryPointPath": "src/entryP
How to Document Picture-in-Picture in React (with Typescript) | HackerNoon
How to Document Picture-in-Picture in React (with Typescript) by@dlitsman Too Long; Didn't ReadThe Chrome 116 update introduced the Document Picture-in-Picture API, expanding developers' control over custom controls and UI for Picture-in-Picture mode. This feature is currently supported in Chrome and Edge, with potential for wider browser support. The API allows opening, closing, and detecting Pic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
Live types in a TypeScript monorepo
TypeScript 5.5 で追加された正規表現構文チェックを理解する
TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog
TypeScriptに導入された新たな仕組みのデコレータ、その使い方と利便性とは？
Announcing TypeScript 5.5 - TypeScript
TypeScriptに導入された新たな仕組みのデコレータ、その使い方と利便性とは？
TypeScriptの型システムに命を吹き込む: Typia と unplugin-typia
TypeScriptを活用したi18n対応
参加者2000人超え！ TypeScript大規模カンファレンス「TSKaigi 2024」レポート | gihyo.jp
神戸でKobe.tsというTypeScriptコミュニティを立ち上げた話
Announcing TypeScript 5.5 RC - TypeScript
TypeScriptは26以上のメンバーを絞り込めない！
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
TypeScriptを使って、エントリーポイントに紐づくts, js, vueの依存関係を追う