【2024年4月1日のTypeScriptニュース】次期バージョンでオブジェクト型に追加される新機能の紹介 - Qiita
本日、2024年4月1日は、TypeScriptの歴史に残る記念すべき日となりそうです。TypeScriptの次期バージョン5.5.555に実装予定の新機能の概要が公開されたのです。 この記事では、本日投稿された以下のissueの内容をかみ砕いて解説します。 Arranged Field Definitionの概要とモチベーション issueのタイトルにもあるように、今回公開された新機能はArranged Field Definition (AFD) と題されています。ここでのarrangedという単語は、「順序に意味がある」という意味に解するのがよいでしょう。つまり、オブジェクト型のフィールド定義において順序まで考慮されるということです。 TypeScriptはJavaScriptに型をつけた言語ですが、JavaScriptではオブジェクトのプロパティに順序があることが知られています。つ
TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
JavaScript (TypeScript) で配列の遅延評価 - Qiita
「Scala関数型デザイン&プログラミング ―Scalazコントリビューターによる関数型徹底ガイド」（以下、 FP in Scala）という本を読んでいます。 ところどころプログラミングの演習問題が出てきて、これを解いていかないとちゃんと理解できなさそうなのですが、 Scala で書くのも当たり前すぎてつまらない（？）ので、 JavaScript (TypeScript) で書いてみようと思いました。 今回は第5章に出てくる遅延評価を取り上げます（次回があるかどうかは分かりません）。 コードは以下に公開しています。 https://github.com/kimamula/fp-in-javascript/tree/master/lazy-array 遅延評価とは 「実際に必要になるまで、値の評価を遅延させる」ことです。 Haskell はデフォルトで遅延評価ですし、 Scala でも明示的
TypeScript の paths はパスを解決してくれないので注意すべし！
こんにちは、江嵜です。 みなさん、 TypeScript 書いてますか？ 私は JavaScript のゆるふわ感が大好きなんですが、 やっぱりそこそこの大きさのものを開発しようと思うと 型とかあった方が安心で、TypeScript を使おうかなって気になります。 で、今回はそんな TypeScript を使う上で注意すべき小ネタ的お話を 1 点。 (文中のコードは一部全角にしているので実行される場合は注意してくださいね) TypeScript の paths って設定使ってますか？ TypeScript はコンパイルのルールを色々設定することができます。 tsconfig.json ファイルですね！ 多分一度 TypeScript を書かれた方なら触ったことがあるのではと思います。 色々な設定ができるのですが、今回はその中でも paths という設定項目について、見ていきます。 …と！そ
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？ - Qiita
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？TypeScriptVue.jsvue-composition-api Vue.js の公式ドキュメントには「状態管理」という章があり、そこでは単純なストアパターンと、より大規模向けという Vuex ライブラリを使う 2 つの手法が紹介されています。 ですが、それぞれどこに長所・短所がありどのような基準で選択すれば良いのかは「大規模」というあやふやな基準でしか示されていません。実際その境界はどこにあるのでしょうか？ さて、TypeScript も同様に大規模アプリケーション向けと言われます。型安全性の有用さは他言語の世界で実証されています。ところが残念なことに Vuex の API 設計とは極めて相性が悪いというのはよく言われます。現時点で両者を両立させるのは大変
vuex + typescriptをvuex-module-decoratorsで無敵になる - Qiita
vuex + typescript をvuex-module-decoratorsで無敵になる はじめに vue.js, vuex, typescriptを用いた開発環境で、コンポーネント内からvuexのgetters, state, actions, mutationを用いようとしたとき、インテリセンスが効かない、型安全が保たれないといった問題に直面する。 これらを解決する策としてサードパーティー製のパッケージvuex-module-decoratorsを用いたのでここに記す。 Vuex + typescriptは発展途上 vuex + typescriptで開発を行うとgetters, mutationでせっかく型指定をしても型安全を保てない。 各mutationやgettersはコンポーネントで呼び出す際、文字列による指定を取るためインテリセンスが効かない ↑インテリセンスが効いてな
SlackApp快速開発 - ローカル開発環境構築(with Bolt + TypeScript) | Trial and Spiral
A framework that makes Slack app development fast and straight-forward. With a single interface for Slack’s Web API, Events API, and interactive features, Bolt gives you the full power of the Slack platform out of the box. なぜBoltとTypeScript?単純で簡素なものはサーバーレス構成で作って、CloudFunctionやLambdaなどのFaaSで動かすほうが楽で早いと思います。それでもあえてBoltを選択したのは Slackの一部の機能には3秒レスポンスの壁があるので、FaaSのコールドスタートがキツかったイベントリスニングに対しての書きわけがしやすい =>
Vuex and Typescript
Lately, Typescript is becoming more popular in the Javascript ecosystem and, by this post, I don’t want to dive deeply into Typescript but I would like to show a basic approach to integrate Vuex within a Vue application with a Typescript codebase. At this point, I assume you are familiar with basic Typescript approaches and how to use the language in a Vue application. In case you’d like to have a
Is there a `valueof` similar to `keyof` in TypeScript?
I want to be able to assign an object property to a value given a key and value as inputs yet still be able to determine the type of the value. It's a bit hard to explain so this code should reveal the problem: type JWT = { id: string, token: string, expire: Date }; const obj: JWT = { id: 'abc123', token: 'tk01', expire: new Date(2018, 2, 14) }; function print(key: keyof JWT) { switch (key) { case
TypeScript | WebStorm
TypeScriptWebStorm supports developing, running, and debugging TypeScript source code. WebStorm recognizes .ts and .tsx files and provides full range of coding assistance for editing them without any additional steps from your side. TypeScript files are marked with the icon. TypeScript-aware coding assistance includes completion for keywords, labels, variables, parameters, and functions, error and
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
ReactをTypeScriptで書く3: React編 | dkrkのブログ
メモです。 そして前回からの続きです。 追記: 2019/07/16 全体的に項目を修正しました。 Function Component Function Componentの基本形はReact.FC型を使用する。 ジェネリクスにpropsの型を指定することができる。 PropTypesなどで指定していたpropsの型指定が、型エイリアスに移っただけ。 import * as React from 'react'; // Introのpropsのtype aliasを定義 type ContentProps = { title: string; } // React.FC型を用いる // ジェネリクスにIntroPropsを指定 const Content: React.FC<ContentProps> = props => { return ( <> <h2>{props.title}<
React + TypeScriptのESLintルールをカスタマイズしたり、Airbnbのやつを導入するぞ。 | Ginpen.com
何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Video.js ❤ Typescript - Joe Flateau
TypeScript Deep Dive
FAQ
GitHub - yymm/hooks-canvas-sample: A example canvas animation using react hooks.