ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
Turbo 8 is dropping TypeScript
By all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not after giving it five years. So it's with great pleasure that I can announce we're dropping TypeScript from the next big release of Turbo 8. The fac
Microsoft、プログラミング言語「TypeScript 5.0」を正式に公開、デコレーターが標準機能に
「TypeScript 5.0」では、「デコレーター（Decorators）」の機能に正式に対応するようになった。デコレーターは、クラスの実装をほとんど変更することなく、クラスやフィールド、メソッドなどを拡張、上書きする外部関数を利用可能にする機能。一般に言うDI（Dependency Injection：依存性の注入）を実現する機能だ。 デコレーター関数を利用するには、デコレーター関数を実装してから、クラスを実装したコード内のフィールドやメソッドを記述した部分の直前で「@関数名」と記述すれば良い。デコレーターの機能を利用して、クラスやフィールド、メソッドの機能を拡張、上書きするコードを外部関数として分離することで、再利用しやすくなる。 以前のバージョンでもデコレーターは使用可能だったが、「実験的」な位置付けにとどまっており、使用するにはコンパイラ実行時に「--experimentalDe
フロントエンドにおけるテスト駆動開発の実践と概説
はじめに 自動テストが叫ばれて10数年以上の時を経ていますが、今なお開発者の興味を惹くトピックの1つであります。 実際、Developers Summit 2023ではテストを主題とした講演が多く、また人気も博したと耳にします。 さて自動テストと共に話題になるトピックの1つと言えばテスト駆動開発でしょう。 ただテスト駆動開発は、設計・開発手法のため自動テストとは厳密にはジャンル違いであり、誤解を受けがちなトピックでもあります。 またテスト駆動開発を解説する書籍の多くが、Java等のオブジェクト指向言語のスタイルで書かれているためフロントエンドエンジニアのコードスタイルとは若干差異があリます。 当記事ではフロントエンドエンジニアのためにテスト駆動開発の技法の数々をTypeScript、Reactを用いて実践します。 フレームワークとしてReactを採用しましたが、記事内のコードはモダンフロン
ついに来る！TypeScript5.0の新機能
TechFeed Experts Night#11 「ついに来る！TypeScript5.0の新機能」
`*.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 にしてしまうことには問題があります。代表的な問題として型エラ
TypeScriptと構造的型付け | TypeScript入門『サバイバルTypeScript』
コピーこれらのクラスは、walkメソッドを持つ点で似ています。このようなとき、Person型とDog型は「互換性がある」とみなすことができるでしょうか。それとも、まったく異なる型として扱うべきでしょうか。 こうした問題を扱うために、プログラミング言語はさまざまな型システムを採用しています。どのように型を区別すべきか、また、どのように型同士の互換性を判断するべきか、このような観点から型システムの仕様を考える必要があります。TypeScriptでは、「構造的型付け」という型システムが採用されています。構造的型付けがどのように型を区別し、逆にどのように型同士に互換性があると判断するのか、こうした言語仕様を知ることは、よいコードを書くために役立ちます。 型の区別に関する2つのアプローチプログラミング言語における型の区別や互換性の判定には、主に次の2つのアプローチが存在します。 名前的型付け構造的
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプロジェクト内のJavaScriptモジュールをひとつのファイルにまとめるバンドルと呼ばれる作業が必要でした。 これは、ブラウザがESモジュールに対応していないことや、ひとつのHTMLファイルから沢山のjsファイルをダウンロードさせると、その数だけア
Documentation - Utility Types
TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally. Awaited<Type> Released: 4.5 This type is meant to model operations like await in async functions, or the .then() method on Promises - specifically, the way that they recursively unwrap Promises. Example
type-challenges をやる
Pick Implement the built-in Pick<T, K> generic without using it. Constructs a type by picking the set of properties K from T For example interface Todo { title: string description: string completed: boolean } type TodoPreview = MyPick<Todo, 'title' | 'completed'> const todo: TodoPreview = { title: 'Clean room', completed: false, } ヒント この課題をパスするためには、以下の型を知る必要があります。 keyof Mapped Types Indexed Access
Vue3<script setup lang="ts">知見
はじめに 先日、仕事で参加させてもらっているプロジェクトでVueを3系にバージョンアップしました。 続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。 前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 おそらく<script setup>自体は簡単に書けるようになってすぐ慣れると思うのですが、TypeScript対応が結構癖があって困ります。 なのでこれらの公式ドキュメントをよく読むようにしましょう。 SFC<script setup>TypeScript のみの機能 https://v3
Announcing TypeScript 4.9 Beta - TypeScript
Today we’re announcing our beta release of TypeScript 4.9! To get started using the beta, you can get it through NuGet, or- use npm with the following command: npm install -D typescript@beta You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code. Here’s a quick list of what’s new in TypeScript 4.9! The satisfies Operator Unlisted Prop
Record<Keys, Type> | TypeScript入門『サバイバルTypeScript』
Record<Keys, Type>はプロパティのキーがKeysであり、プロパティの値がTypeであるオブジェクトの型を作るユーティリティ型です。 Record<Keys, Type>の型引数Keysオブジェクトのプロパティーキーを指定します。Keysに代入できる型は、string、number、symbolとそれぞれのリテラル型です。 Typeオブジェクトのプロパティの値の型を指定します。任意の型が代入できます。 Recordの使用例キーがstringで値がnumberのインデックス型を定義する。
never型 | TypeScript入門『サバイバルTypeScript』
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
インターセクション型 (intersection type) | TypeScript入門『サバイバルTypeScript』
考え方はユニオン型と相対するものです。ユニオン型がどれかを意味するならインターセクション型はどれもです。言い換えるとオブジェクトの定義を合成させることを指します。 インターセクション型を作るためには合成したいオブジェクト同士を&で列挙します。
TypeScriptでコードを書く時に意識していること
なんだかんだでTypeScriptを業務でも個人開発でも使うようになって3年くらいが経過しました。 TypeScriptは便利ですよね☕️ 世の中的にも、もはやTypeScript以外でフロントエンドの開発を行うことが珍しいくらいの雰囲気になってきたのではないかという感じがします。 最近というかTypeScriptを書き始めてしばらくした今、書き始めた当初とは意識することが変わってきたように感じています。 そういうわけで、今、どんなことを意識しているのかを自分の整理をこめて記載しておこうと思います。 🔥🔥🔥 型を先に定義する ここがかなり気持ちの上で変わった部分です。 TypeScriptで型を書くということは、つまるところ自分が今から記述するコードの設計図を書くということだという意識が強くなりました。 TypeScriptの型推論は非常に強力で、自分でほとんど型を定義しなくても、多
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と JavaScriptのツールチェインを統一的に提供することを目指した「Rome Tools, Inc.」（以下、Rome Tools）は、JavaScriptおよびTypeScriptのコードの書式を高速に整えるフォーマッター「Rome Formatter」をリリースしました。 Release of the Rome Formatter, a super fast formatter for JavaScript, with a focus on Prettier compatibilityhttps://t.co/2iXq5Gm5K3 — Rome Tools (@rometools) April 5, 2022 Rome Toolsは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
TypeScript 5.0 const 型パラメータの使い道
TypeScriptを振り回せ！
