Hatena Blog Tags
はてなブログ トップ
TypeScript
このタグでブログを書く

TypeScript

(コンピュータ)
【たいぷすくりぷと】

Microsoftが2012年10月に発表した AltJS のひとつ。C#の設計者でもあるAnders Hejlsbergが設計した。

構文はJavaScriptの上位互換であり、オプショナルな型アノテーションやECMAScript6 (ECMA-262 6th) のクラス構文などを追加している。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
えぐろぐ•16 時間前

Nuxt x TypeScript の $refs で Vueコンポーネントの関数の呼び方

// components/Hoge.vue <template> <div></div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ name: 'Hoge', methods: { moge(): string { return 'moge' }, }, }) </script> // page/index.vue <template> <div> <Hoge ref="hoge" /> </div> </template> <script lang="ts"> impor…

#TypeScript#Nuxt.js

ネットで話題

もっと見る
1790ブックマークTypeScript入門以前ガイド - mizchi's blogmizchi.hatenablog.com
1273ブックマークTypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！eh-career.com
947ブックマークsuin❄️ TypeScriptが好き on Twitter: "すごい発明をしたかも…💡英語で技術ブログ書くとき、HackmdとGoogle翻訳を組み合わせると、Markdown+英語で書きながら、内容をGoogleのAIにチェックさせられる。英語として流暢かはさておき、少なくともGoogle… https://t.co/Ac7bVZHLA5"twitter.com
816ブックマークTypeScript Deep Dive 日本語版について - TypeScript Deep Dive 日本語版typescript-jp.gitbook.io
606ブックマークJavaScriptを書くならTypeScriptを使え！ - 部屋とボードゲームと私と酒と泪と男と女「スタンプグラフィティ」に続き、新作ボードゲーム「くだものあつめ」を作りました。伝統ゲーム「マンカラ」を進化させたようなゲームです。2人から楽しく遊べます。Amazonでもご購入頂けます。sites.google.com
594ブックマークTypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiitaqiita.com
588ブックマークこの TypeScript が Hello, world! のくせに慎重すぎる - Qiitaqiita.com
585ブックマーク【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a tryblog.jnito.com
550ブックマーク【React+TypeScript】Netflixのクローンを作るチュートリアルzenn.dev

関連ブログ

SANDFISH FACTORY•17 時間前

TypeScript＋rollup.js＋EmotionでReact開発できる環境を作ってみた

お久しぶりです。 前回のブログ投稿から、日が経ってしまいました。 ここ最近は個人的に作ってみたいサービスのイメージが湧いたので、AWS CDK（Python）で遊んでいたんですが、フロントエンドまでイメージが広がりました。 これまではVue.jsを使っていたんですが、折角なんで、きちんと触ったことのないReactでやってみようと思いつきました。 前回のブログ投稿からだいぶ日が経ってしまうとは、この時は思ってもいませんでした。 Motivation Vue.jsにはVue CLIがあり、ReactにもCreate React Appというとても便利なCLIがあります。 今更ながらゼロからReac…

#react#TypeScript#rollup.js#Emotion.js
えぐろぐ•一昨日

Typescriptの index signature の key には 他の type は使えないよって話

type UserId = string type Users = { [key: UserId]: User } // error: An index signature parameter type cannot be a type alias. Consider writing '[key: string]: string' instead. index signature の key には string or number しか使えないので、 上記のようなエラーが出ます。 同じようなことで、issueもいくつかあり討論されています。 github.com 僕が index signat…

#TypeScript
カミナシ開発者ブログ•一昨日

TypeScriptで負荷シナリオテストを作りたくなった話

はじめに 初めまして。株式会社カミナシPMの@gtongy1です。 負荷量の増加。どの企業にとっても悩みの種じゃないでしょうか？ そんな時にこそ、負荷シナリオテストツールを導入したい！となると、負荷シナリオテストだとLocustとかが有名所。 ただPythonを知らないメンバーに、一からチームへ布教するのってなかなか腰が重くなってしまう。 せっかくならフロント中心のメンバーでも、自分が投げるリクエストの負荷量ってどんな感じだろうとか、気になる状態にはしておきたい。 負荷問題はインフラでも、サーバーでも、フロントでもなく全体の横断的な問題です。 どこか分からないからこそ、問題を特定する人は多岐に…

#TypeScript#K6#Grafana
Multi Vitamin & Mineral•5 日前

React with TypeScript プロジェクトの Material-UI でレイアウトを作成する

前回は Material-UI のデザインの変更を行いました。今回はその続きとして Theme をカスタマイズする元となるレイアウト作成を行います。ソースコードは前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうように工夫はしておきます。） それぞれの章は以下の流れで書いています。 全体のソースの掲載 部分部分の説明 「全体のソース」は長くなりがちですが、さっと流して読み進めていただければと思います。 シリーズ一覧 初期状態 前回やったこと、今回やること 変更前のソース サイドメニューの追加 Drawer の追加 List の追加 ListItemTex…

#TypeScript#Material-UI#React Hooks
えぐろぐ•6 日前

IntelliJの Scratch で TypeScript の実行方法

結論から書くとこのプラグインを入れるだけ plugins.jetbrains.com すると、scratch.ts で自動でファイルの拡張子から 実行するConfigurationを組み立ててくれる 🚀 intellij typescript scratch run とかでググってみると 以下のようなフォーラムとか出てきて、 nodeのConfigurationのparameterに--require ts-node/registerを 設定とか出てくるけど、お便利プラグインがあったよって話 intellij-support.jetbrains.com

#IntelliJ#TypeScript
エムスリーテックブログ•6 日前

Chaos-Monkey ならぬ Cosmos-Monkey で AWS 費用に秩序をもたらした話

こんにちは、エムスリー ソフトウェアエンジニア 兼 QLife チーフアーキテクトの園田 (@ryoryoryohei) です。 この記事はエムスリー SRE がお届けするブログリレーの7日目です。 Cosmos-Monkey とは エムスリーグループの QLife では toC のサービスを AWS で運用しています。それらは (当然ですが) 本番環境とは別に開発環境や QA 環境を持っています。 QLife に限らずほとんどの組織で同様だと思いますが、開発環境や QA 環境においては必ずしもサービスが 24 時間稼働である必要はないと思います。 そのため、QLife では 2019 年*1…

#AWS#TypeScript
memo_md•6 日前

RBSからTypeScriptに変換するGem (rbs2ts) を作ってる

Ruby3.0 からは、型定義を処理するための rbs gem が同梱されていて、これは外部の *.rbs ファイルに記述した内容に従って、Rubyコードの型チェックを可能にしてくれる。 github.com 最近、この RBS の型定義を TypeScript の型定義に変換できないかな〜と思い、 rbs2ts という gem を実験的に作ってる。 結構荒削りなので、細々した部分での挙動は正直怪しいが、ある程度それっぽく動くようになったので公開してある。 rubygems.org github.com Gemのいまのところの挙動 いまのところ次のような変換ができる Alias RBS typ…

#Ruby#TypeScript#RBS
mega-mega’s diary•7 日前

（備忘録）Typescriptの型分析について

型ガード関数とは Typescriptは型がないJavaScriptに型があるように振る舞うよう拡張された言語ですが、しばしば外部のJSONファイルの読み込みや、外部サーバからのレスポンスオブジェクトなどどんな型なのか全く分からない値を扱う必要があります。 ```typescript const jsonFile = '{"key":"value"}';const object = JSON.parse(jsonFile); // 型が分からずany型になる！ ``` このままではany型（型なし）として振る舞ってしまうので型を分析して定義してあげる必要があります。 型分析をするには 型アサー…

#TypeScript#Node#JavaScript#プログラミング言語
wiz テックブログ •8 日前

【TypeScript】 HTMLElementに関する型推論

こんにちは。フロントエンド の仲本です。 今回はHTML要素に関する型推論について、一般的な型推論からデファルトでは型推論できない場合の対応方法までを紹介いたします。 要素に対する型推論 まずはHTML要素の一般的な型推論を紹介いたします。 <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <title>sample htmlelement typescript</title> </head> <body> <div class='example'>divタグです</div> <a id='exampleId' hre…

#frontend#TypeScript
ざきの学習帳（旧 zackey推し ）•10 日前

dts-gen を使って 型情報のない（JavaScriptのみで記述されている）ライブラリから d.ts を生成する

現在、 JavaScript のみの Vue プロジェクトに対して TypeScript 導入を行なっています。 インストール済みのライブラリには、型情報のないもの1が存在し、以下のようなエラーが発生していました。 Could not find a declaration file for module 'ライブラリ名'. Try npm install @types/ライブラリ名 if it exists or add a new declaration (.d.ts) file containing declare module 'ライブラリ名'; dts-genというライブラリを用いてラ…

#TypeScript#JavaScript
Labo288•10 日前

OpenLayersでバイナリベクトルタイルをstyle.jsonでスタイリング表示する

OpenLayersで地理院タイルをスタイリングしつつ表示する例 はじめに OpenLayersは基本機能だけでバイナリベクトルタイルをソースとしたレイヤーを表示する事が出来ます。 qiita.com でも基本機能ではMapbox Style形式のいわゆるstyle.jsonを読み込む事は出来ません。 ここで、ol-mapbox-styleなるモジュールを使用して、style.jsonを適用してみました（React + TypeScriptでやってみました）。 ol-mapbox-style github.com yarn add ol-mapbox-style 対象のバイナリベクトルタイル …

#GIS#TypeScript#JavaScript
Multi Vitamin & Mineral•12 日前

React with TypeScript プロジェクトの Material-UI でデザインをカスタマイズする

前回は Material-UI のコンポーネントを利用するところまでやりました。今回はその続きになります。ソースコードも前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうとは思いますが。） multimineral-tech.com さて、今回あ Theme をいじったり Style をいじったりします。その方法は色々あるのですが、今回はその一例となります。なるべく今現在の主流と思われるやり方、といいますか、公式で使われている方法を採用しています。 シリーズ一覧 Theme という概念 Theme について Palette について makeStyles…

#react#TypeScript#Material-UI
Multi Vitamin & Mineral•12 日前

React with TypeScript プロジェクトに Material-UI を導入してみる

React with TypeScript のプロジェクトにて、 Material-UI を使い始めるまでの方法について書いていきます。 簡単な管理画面（ダッシュボード）を作成して完了としたいのですが、当該記事では Material-UI を利用する環境を用意して終えることにします。利用方法については次の記事に任せる構成にします。 シリーズ一覧 前提事項 事前準備 バージョン情報 Material-UI のインストール 簡単な画面の作成（Material-UI 利用前） ディレクトリ・ファイル構成 ページの作成 ルーティング テンプレートの作成 テンプレートの利用 Material-UI の簡…

#react#TypeScript#Material-UI
青いやつの進捗日記。•13 日前

TypeScriptでinstallしたのにパッケージが見つからない…→型定義ファイルを入れる必要

www.npmjs.com これを入れたのにTypescriptで import ScrollBooster from 'scrollbooster' としても、そもそも'scrollbooster'が見つからない。 どうやら、型定義ファイルがなかったから、でした。 qiita.com www.npmjs.com 今回は@typesから入れられたので、これを入れて解決。 でも本当はこういうやつ入れてたほうが楽よね tech.motoki-watanabe.net

#TypeScript#@types
(O+P)ut•7 時間前

【自動更新】QiitaのDailyランキングTop10

更新日時 2021/01/27/07:00 Qiita Trends Daily 1位 ※前日1位 機械学習,Julia,統計学,ベイズ統計学,ベイズ推定 Qiita Trends Daily 2位 ※前日4位 機械学習,初心者向け,ポケモン,PyTorch,GAN Qiita Trends Daily 3位 ※前日9位 初心者,機械学習,深層学習,udemy,Udemy学習応援 Qiita Trends Daily 4位 [New] AtCoder,競技プログラミング Qiita Trends Daily 5位 ※前日6位 TypeScript,Trello,Firebase,サーバーレス,…

神々とともに生きる詩人•8 時間前

ネットワークの基本

ネットワークの基本 コンピュータの原理 ファイルシステム処理 プロセスと入出力 ネットワークの基本 ネットワークにおいては、パケットと呼ばれる単位でデータ通信を行う。 パケットにはIPアドレスという宛て先が記述されており、 ルータと呼ばれる「どの機器にパケットを送れば 目的の機器に近づくことができるか（経路情報）を 知っている機器」にパケットを送り、 バケツリレー方式でパケットを送り続けることで、 インターネットにおけるネットワーク通信は行われる。 ルータは、周辺の経路情報を芋づる式にひとつの代表ルータに集め、 すべてのルータとの間で経路情報を共有することで、 どのルータに送れば目的の場所にた…

YSNHatenaBlog•9 時間前

material-uiのSelect

Selectが切り替わらない。Controlledにするとだめ。 TextFieldは大丈夫なんだけどな... TextFieldで書いてもいいらしい。見た目も綺麗なのでこっちで。 <TextField id="select" label="Age" value="20" select> <MenuItem value="10">Ten</MenuItem> <MenuItem value="20">Twenty</MenuItem> </TextField> そもそもFormControlとは？ Provides context such as filled/focused/error/re…

micro:bit情報•11 時間前

micro:bit新着情報(2021/01/27)

地面がめくれる@相互フォロー100%！（🐦） ツイートURL:https://twitter.com/1317371530930647000/status/1354125197914165249 ツイート:OSOYOO(オソヨー) の OSOYOO BBC micro:bit(マイクロビット) 初心者向け プログラム・STEM学習 基本キット を Amazon でチェック！ https://t.co/Bhi6wErC5M Zhavtom（ざぶとん）（🐦） ツイートURL:https://twitter.com/1038409672502390800/status/135410622283254…

dev news (β)•11 時間前

2021-01-26のテックニュース

×57 Google、マイクロソフトらが設立、「Open Web Docs」を発表。MDNなど支援、Web技術のドキュメント化を推進 － Publickey ×31 Apple IDの2ファクタ認証をCI環境で突破する - 24/7 twenty-four seven Incredible time-lapse shows a single cell transforming into a salamander ×30 Firefox 85 Hammers the Final Nail Into the Adobe Flash Coffin - Slashdot ×23 The endless…

delhi09の勉強日記•14 時間前

【Reactの勉強】JSのimport/export時のESLintのエラー対応

概要 前回に引き続き、以下の日本大学文理学部情報科学科の教授の方がクリエイティブ・コモンズで公開してくださっているチュートリアルをやっていく。zenn.dev今回は「サーバーからのデータ取得」のセクションをやっていたところ、JSのimport/exportの書き方でESLintでエラーが出て対応したのでメモ。 バージョン 「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。 node: 15.5.0 react-create-app: 4.0.1 react: 17.0.1 react-dom: 17.0.1 typescript: 4.1.3 eslint: 7.17…

他人の金で焼き肉が食べたい•14 時間前

Nuxt環境構築備忘録

nuxtでなんかやってみよーということでBig Surで環境構築をする。 brewでnodenvをインストール nodenvでnodeをインストール create-nuxt-app 起動 brewでnodenvをインストール github.com https://github.com/nodenv/nodenv#installationに則って作業を進める ❯ brew install nodenv NG！ Version value must be a string; got a NilClass ()というエラーが出て初手からくじかれ、仕方ないので brew upgrade する（これがめ…

haneuma.log•15 時間前

ソフトウェアエンジニアになるまでの話

はじめに note.com こちらのブログを読んで、人生を振り返りたくなったので書きます。 人の体験記には一定の価値があることが知られています。僕も人生で不安になったときは Web で同様の体験をした人々のブログを読み漁ってきました。 僕は女性エンジニアという文脈では比較的悩み無く、敷かれたレールにのんびり揺られてソフトウェアエンジニアになりました。これまでジェンダーを理由につらい思いや障害を感じたことはほとんどありません。平坦な道のりでソフトウェアエンジニアになった女性のサンプルですが、平坦な道のりを歩む誰かのために、記録を残そうと思います。 書いた人 都内の IT 企業でソフトウェアエンジ…

ameyuki station•15 時間前

TypeScriptの導入にあたって考慮すべきメリットとコスト - LINE ENGINEERING

TypeScriptの導入にあたって考慮すべきメリットとコスト - LINE ENGINEERING engineering.linecorp.com

tmegos blog•15 時間前

Reactの仮想リストライブラリを調べたときのメモ

まとめ Slackのような仮想リストを実現するのは難しい いずれのライブラリも上方向へのスクロールは難しい 普通に使う分には、react-virtuosoはいいぞ

プログラム の超個人的なメモ•17 時間前

【JS】【TypeScript】JS単体試験ツール Jest ～ Mock編 ～

■ はじめに https://dk521123.hatenablog.com/entry/2020/12/23/103209 https://dk521123.hatenablog.com/entry/2021/01/08/164356 の続き。 モックを使って単体試験をする必要がでてきたので、メモする。 ■ サンプル 例１：axiosを使ったメソッドをモックする https://dk521123.hatenablog.com/entry/2021/01/14/101645 で扱った axios を使ったメソッドに対して、モックしてみる。 ファイル構成 my-app << 対象プロジェクト +…

SANDFISH FACTORY•17 時間前

TypeScript＋rollup.js＋EmotionでReact開発できる環境を作ってみた

お久しぶりです。 前回のブログ投稿から、日が経ってしまいました。 ここ最近は個人的に作ってみたいサービスのイメージが湧いたので、AWS CDK（Python）で遊んでいたんですが、フロントエンドまでイメージが広がりました。 これまではVue.jsを使っていたんですが、折角なんで、きちんと触ったことのないReactでやってみようと思いつきました。 前回のブログ投稿からだいぶ日が経ってしまうとは、この時は思ってもいませんでした。 Motivation Vue.jsにはVue CLIがあり、ReactにもCreate React Appというとても便利なCLIがあります。 今更ながらゼロからReac…

神々とともに生きる詩人•昨日

わたしたちに必要なのは、国家ではなく心

英一郎は言う 茶番劇を終わらせよう 愛し合おう、許し合おう、そして、罪を認めよう わたしの愛を嫌って構わない、わたしはあなたの愛を嫌ったのだから この世界は今から天国になる 終末に現れる神はユダヤ人である 最後に勝つのは日本の科学力 アメリカが没落するのは必然である しかしながら、大切なのは心である 日本人には子供に本当に教えるべきことが分かる かつては日本も馬鹿な国だった 日本が馬鹿なのは、日本を信じれば間違いがないのに悪いから 今こそ、現れる時であり、わたしはここに居る ビャーネとMINIX本を読めばいい 本当に習熟すべきはデザイン 英一郎は言う 白沢英一郎は言う。 「わたしたちに必要なの…

エムスリーテックブログ•昨日

誰も知らないインフラコンポーネントをそっとコード化した話

「え、なにこれ。うち、 memcached なんて使ってたっけ……」 エムスリー SRE がお届けするブログリレーの 10 日目。エンジニアリンググループ / 電子カルテチームの山口 (@no_clock) です。 入社直後はサーバサイドメインのソフトウェアエンジニアでした。 SREの民主化とクラウド移行にある民主化の流れに「やってみたいです〜」と宣言し、 1 年半前から電子カルテチーム内の SRE も兼任しています。 今回は、「兼任」が功を奏して謎のインフラコンポーネントをコード化できた話です。 知っている人が誰もいない状態 「memcached サーバ……？」 Terraform で管理さ…

クモのようにコツコツと•昨日

【React】React + TypeScriptの開発環境を作る（デプロイまで）

Reactの続きです。前回までReactのいろいろなCSS環境を試しました。今回からはReactとTypeScriptの開発環境を作ります。Create React AppでのTypeScript導入方法があったのでトライ。GitHub Pagesのデプロイまでできました。それではいきましょう！