デザイナーが抱くReact+TypeScriptの疑問を紐解き、フロントエンドに一歩近づこう - estie inside blog
こんにちは。ひらやま（@rhirayamaaan）です。 先日とあるツイートを見かけ、つい反応してしまいました。 これはReactコンポーネントを作る時に最低限必要なTypeScriptの知識をまとめた記事を書く気運高まってますか…！！？ https://t.co/rb9iwfNqDG— ひらやま (@rhirayamaaan) 2023年3月1日 3, 4年くらい前（2023年4月現在）は、フロントエンドを好むエンジニアやプログラムを書くマークアップエンジニアが目を輝かせながら React に飛びついていたように私は感じていました。しかし最近では React を使ったサービスが運用される機会も増え、デザイン修正を行うためにデザイナーが React のコードを触るケースも徐々に増えてきている印象があります。 ここ最近ではデザインエンジニアや UX エンジニアという形で表記ゆれを許しながら新
『プロを目指す人のためのTypeScript入門』読者が最新情報にキャッチアップできる記事
こんにちは。先日発売された『プロを目指す人のためのTypeScript入門』は、発売日の最新バージョンであるTypeScript 4.6に対応しています。 そこで、この記事では読者に向けたアフターサポートとして、本の発売時から現在までに増えた機能や変わったところをご紹介します。 現在のTypeScript最新版は4.9です。 TypeScript 4.7での更新 公式アナウンス: https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/ Node.js向けES Modulesサポートの追加 TypeScript 4.7最大の話題はこちらです。本書の第1章では、tsconfig.jsonの設定項目について次のように説明しました。 現在のところnode16とnodenextには違いがありません。将来のNode.js
Null vs. Undefined - TypeScript Deep Dive 日本語版
JavaScript(と、TypeScript)は、nullとundefinedという2つのボトム型(bottom type)があります。これらは異なる意味を持っています。
Announcing TypeScript 4.4 - TypeScript
Today we’re excited to announce the availability of TypeScript 4.4! If you haven’t heard of TypeScript yet, it’s a language that builds on JavaScript by adding syntax for static types. Tools like the TypeScript compiler just erase those types, leaving you with clean readable JavaScript that you can run anywhere; but those types are there to be type-checked! Types make your intentions explicit, and
Eight 、TypeScript はじめました - Sansan Tech Blog
こんにちは。Eight でフロントエンドエンジニアをしている鳥山（@pvcresin）です。 最近は UI デザインとアプリケーションのパフォーマンス改善、ビルド時間の短縮に興味があります。 Eight の Web フロントエンドは JavaScript（JS）で書かれていましたが、2020 年 5 月に TypeScript（TS）を導入しました。 今回は TS 初心者だった私が、どのようなステップを経て TS を学び、実際に導入していったのかについてお話ししたいと思います。 目次 TypeScript TS 導入の背景 導入の準備 導入・移行方針の検討 導入手順 移行手順 TS を導入してみて まとめ TypeScript はじめに TypeScript の紹介をします。 TS は Microsoft が開発したオープンソースの静的型付け言語です。 型システムによって、コードの品質を向
TypeScriptのコードレビューを依頼された人のための!と?の解説 | DevelopersIO
TypeScriptのコードレビューをしていて、 ! と ? の意味を改めて確認したら意外とややこしかったのでまとめておきます。 ご注意: 本記事では、nullとundefinedを厳密に区別せず、どちらも含めてnon-null/nullableと表現しています。 Optional Paramater Optional Paramater 関数の引数がOptional(省略可能)であることを宣言します。コンパイラはOptional Paramaterが宣言されたとき、その引数の型を T | undefined と認識します。 勘違いしやすいのが、Nullableを宣言するものではないということです。OptionalとNullableの違いは、Optionalの場合は複数の引数があるときにOptionalの引数の後ろにOptionalでない引数を宣言できないという点です。 function
4歳娘「パパ、具体的な名前をつけないで？」 - Qiita
↓新作もよろしくやで！ ジェネリクスをもう少しだけ使いこなす。 コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった 36歳ザコーダーの休日 ワイ「何やこのコード、全然動かへんやん」 ワイ「怖いな～怖いな～…なんか嫌だなあ～」 よめ太郎「（何で自分が書いたコード見て稲川淳二みたいに怯えとんねん・・・）」 よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」 娘（4歳）「ねぇ、パパ」 ワイ「なんや、娘ちゃん」 娘「ちょっと、作ってほしい関数があるの」 ワイ「またかいな」 ワイ「娘ちゃんはホンマに関数が大好きやなぁ」 ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」 娘「ありがとう、パパ」 今回の要件 ワイ「ほんで、今回はどんな関数を作ればええんや？」 娘「えっとね」 娘「'あ'という文字列を渡したら」 娘「['あ', 'あ
TypeScriptのInterfaceとTypeの比較 - Qiita
こういうコンパイルエラーにぶち当たった。 Interfaceだとコンパイルエラーになったのが、Typeなら問題なく通る。 declare function numMapToVoid(obj: {[key: string]: number}): void; // interfaceだとコンパイルエラー interface IObj { a: number } const iObj: IObj = {a: 1}; numMapToVoid(iObj); // エラー // typeだと問題なし type TObj = { a: number }; const tObj: TObj = {a: 1}; numMapToVoid(tObj); // OK これは不思議...というのがきっかけで、TypeScriptのInterfaceとTypeの機能上の違いを調べてみた。 比較まとめ TypeSc
ReactでTypeScript使うときにPropsやStateってinterfaceよりType Aliasの方よいのでは説 - terrierscript: 保存済みの下書き
ライブラリの場合は「拡張に対して開いている」ほうが良いので、Interfaceのほうがいいと考えているため。 A second more important difference is that type aliases cannot be extended or implemented from (nor can they extend/implement other types). Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.
TypeScriptのasync/await (PromiseとかVisual Studio Codeとか…) - Qiita
筆者は、普段はC#やC++など、型付きの言語を使ってデスクトップアプリケーションを作ることが多いです。そんな筆者が、最近、Webのクライアントサイドのプログラム（主にJavaScript）を書き始めたのですが、いろいろと苦労することが多いです。そんな中、TypeScriptを使うことで、Webクライアントサイドのプログラムも型付きの言語で行えるようになりました。 とはいえ、それ以外にも苦労する部分は多いです。そのうちの一つが、非同期処理のオンパレード。しかも、本当のスレッドではないため、イベント待ちなどもできず、コールバック関数をうまく使って書いてあげなければいけません。これがなか慣れませんし、記述も複雑です。その問題に対し、TypeScriptにはasync/awaitという非同期処理を同期的（？）に掛ける構文があります。この構文、以前はES6(ECMAScript2015、つまりそのま
仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
Misoca❤️TypeScript - 弥生開発者ブログ
こんにちは、@mugi_unoです。 GWはリスと遊んできました。たのしかったです。 さて、長きに渡ってコツコツと手を入れてきたMisocaのフロントエンドですが、 先日、新たに大きな改善を行いました。 というわけで、令和一発目のエントリーは MisocaのフロントエンドにTypeScriptを導入したお話です。 🤔なぜTypeScriptを？ 金額処理触るの怖すぎ問題 Misocaは請求書の発行・管理サービスという性質上、各所で金額に関する処理があります。 そして、最近はさまざまな事情により修正が頻繁に行われていました。 以前のエントリでもご紹介したレガシーコードのリファクタリングなども該当します。 tech.misoca.jp エンジニアの方なら「おおぅ...」となりそうですが、金額を触る処理というのは怖いものです。 そしてフロントエンドが絡んでくると「ここは文字列？数値？」といった
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
安全性の極北から見るTypeScript
Nondestructive_TypeScript.md
GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.