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

TypeScript

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

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

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

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

React TypeScript Material UI のインラインスタイルで型エラーにハマる

Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /> // => style={style} の箇所が型エラーになる } 環境 typescript@4.1.6 react@17.0.2 @mui/material@5.2.7 結論 通常の JSX にCSS のオブ…

#TypeScript#CSS#Material UI

ネットで話題

もっと見る
1785ブックマークTypeScript入門以前ガイド - mizchi's blogmizchi.hatenablog.com
1274ブックマークTypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に - エンジニアHub｜Webエンジニアのキャリアを考える！eh-career.com
938ブックマークsuin・読者1万人『サバイバルTypeScript』公開中！ on Twitter: "すごい発明をしたかも…💡英語で技術ブログ書くとき、HackmdとGoogle翻訳を組み合わせると、Markdown+英語で書きながら、内容をGoogleのAIにチェックさせられる。英語として流暢かはさておき、少なくともGoogle… https://t.co/Ac7bVZHLA5"twitter.com
905ブックマークGoogle TypeScript Style Guide// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/pap...google.github.io
877ブックマークTypeScript Deep Dive 日本語版について - TypeScript Deep Dive 日本語版typescript-jp.gitbook.io
707ブックマーク急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiitaqiita.com
600ブックマークJavaScriptを書くならTypeScriptを使え！ - 部屋とボードゲームと私と酒と泪と男と女「スタンプグラフィティ」に続き、新作ボードゲーム「くだものあつめ」を作りました。伝統ゲーム「マンカラ」を進化させたようなゲームです。2人から楽しく遊べます。Amazonでもご購入頂けます。sites.google.com
597ブックマークTypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiitaqiita.com
586ブックマークこの TypeScript が Hello, world! のくせに慎重すぎる - Qiitaqiita.com

関連ブログ

Mobile Factory Tech Blog•5 日前

「メリハリのある TypeScript」で運用しながら型安全性を高めやすい TypeScript リプレースを行う

こんにちは、21 卒エンジニアの id:d-kimuson です。 モバイルファクトリーでは、最近のプロダクトではフロントエンドに TypeScript を採用していますが、僕がアサインされているプロダクトは歴史が長く JavaScript で書かれていて、今回 TypeScript へのリプレースを行いました。 既存プロダクトの TS リプレースではしっかり型付けすることは難しいので、型チェックオプションを緩くしてリプレースすることが多いと思います。しかし、既存コードからリプレース後のコードまで全て型安全性が担保できなくなってしまうので、後からの strict 化は非常に大変になってしまいま…

#TypeScript
かもメモ•5 日前

React + TypeScript import 順をキレイにしたい

React のプロジェクトで import の並び順を揃えて見通しを良くしたい 前提 create-react-app --template typescript で作成したプロジェクトに ESLint と Prettier を導入してある "react-scripts": "^5.0.0" "react": "^17.0.2" "typescript": "~4.1.5" "eslint": "^8.6.0" "prettier": "2.5.1" 1. 使用してない import 自動削除する eslint-plugin-unused-imports を使用する $ npm i -D es…

#react#TypeScript#ESLint
Try T.M Engineer Blog•12 日前

「Clean Architecture 」を読んだ感想

いたるところで有名な Robert.C.Martin氏、いわゆるアンクル・ボブ (ボブおじさん Uncle Bob) の本。Cleanシリーズの3作目「Clean Architecture」を読んだので、その感想です。 Clean Architecture 達人に学ぶソフトウェアの構造と設計 (アスキードワンゴ)作者:Ｒｏｂｅｒｔ Ｃ．Ｍａｒｔｉｎ,角 征典,高木 正弘ドワンゴAmazon Clean Architecture 前提 エンティティ層（Entities） ユースケース層（Use Cases） インターフェースアダプター層（Interface Adapters） フレームワーク&ド…

#TypeScript#Clean Architecture
おじぞうバッヂx99•12 日前

【Vue.js / Typescript】画像一覧＋ページネーションを実装する（フロント側のみ）

ライブラリなどを利用せず自力でVueのページネーション処理を実装したのでその手順や考え方などを書いておく。 特にここでは、数十枚の画像がグリッド状に並んでいるような画面でのページネーションを想定しており、ページ番号ボタンなどをクリックすると表示される画像が切り替わるというものである。 なお、一覧表示対象のデータリストをバック側から取得する部分は省略し、すでにフロント側にデータリストがあるところからの実装となる。 完成イメージ 環境と画面構成 画像一覧のグリッド表示 ダミーのデータ配列を作成 画像の一覧表示 ページネーション ページネーション処理の実装 ページネーション用のボタンを表示する ペー…

#Vue.js#TypeScript#pagination
hagahiro blog•16 日前

React, TypeScriptでenvを読み込みたいが型がundefinedになる

create-react-app -- template typescript で作ったプロジェクトに環境変数を読み込んで使いたい時の対処法です。 下記のように環境変数を読み込ませたいのですが、この場合WEB_URLの部分はstring | undefinedと推論されます。 const hoge = process.env.WEB_URL; // const hoge: string | undefined process.envからコードジャンプを使って型を追っていくと、node_modules/@types/node/global.d.tsの中に、このような記述があることがわかります。 …

#TypeScript
開発覚書はてな版•先月

【TypeScript】Arrayからnull, undefinedを除外する拡張メソッドの実装

概要 今回は、Arrayにnull, undefinedを除外する拡張メソッドを実装します。

#TypeScript#NonNullable#Array#拡張メソッド
GrowthCodingのBlog•先月

【Typescript】!= null と !== null

「!= null」が推奨 nullとundefined TypeScript Deep Dive 日本語版の上記ページを見たら、以下の記載が。 == nullを使ってundefinedと nullを両方ともチェックすることを推奨します。 実際に確認してみると、==nullの判定は、undefinedと nullの両方を含んでいる。 もちろん、===nullは、nullしか含まない。 備忘録として残しておきます。 以上です。

#TypeScript#NULL#undefined
bnsgt's diary•先月

【TypeScript】モジュールの宣言ファイルが見つからない時の対応

npm packageをimportして使おうとしたら、以下のようなエラーが出ることがある。 モジュール '{package name}' の宣言ファイルが見つかりませんでした。〇〇〇は暗黙的に 'any' 型になります。 npm i --save-dev @types/{package name} で、インストールできない場合、 今回は、npx create-react-app app --template typescriptで環境構築したプロジェクトだったので、srcディレクトリ内に任意の名前の.d.tsファイルを置けば問題なかった。 src/{package name}.d.ts de…

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

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

更新日時 2022/01/22/07:00 Qiita Trends Daily 1位 ※前日1位 React Qiita Trends Daily 2位 ※前日2位 ポエム,teratail Qiita Trends Daily 3位 [New] Qiita,分析,ランキング Qiita Trends Daily 4位 [New] Qiita,英語,Webサービス,個人開発,英語学習 Qiita Trends Daily 5位 ※前日6位 TypeScript,Jest,便利技 Qiita Trends Daily 6位 ※前日3位 TypeScript,Typescript入門 Qiita…

超メモ帳（Web式）＠復活•15 時間前

仕事が暇な時は技術の勉強でもしていたい。

仕事が暇な時は技術の勉強でもしていたい。 あわせてよみたい 仕事が暇な時は技術の勉強でもしていたい。 なんか疲れてる。これ、何度も書いた覚えがあるなーと思って今週のブログを読み返してみると、たしかに何度も書いてるな。どうもバイオリズムなのか気圧の関係なのかもしくはトンガの噴火のせいなのか、体調が微妙にわるげである。ひとまず明日は休みであることだし、ブログを適当にぼちぼちと書いたあとはさっさと寝てしまうとする。 今日は何を書くかな。特にネタも無いんだよな。そういや、twitterでこんな事をつぶやいた。 最近はFlutterメインでやってるけど、TypeScriptも興味ある。ちょっとフロントエ…

deve.K•昨日

TypeScript とは 静的型システム JSの型との違い

本日はJavaScriptでのフロントエンド開発者には欠かせないTypeScriptについてとなります。 JavaScriptのデータ型 TypeScriptとは？ コンパイル 静的型システム 型の違いについて 型の定義 当ブログでのTypeScript学習入門はしばらく先になるかと思いますが、『TypeScriptとは何か』『静的型システムとは？』 そういった疑問をまず解消してもらいたく記事にしました。 まず、TypeScriptを学ぶにはJavaScriptでの『型』または『その他基礎』に精通している必要があります。 これは、同じエンジニアの方々は必ずこう言います 『JavaScriptか…

vivit engineering blog•昨日

【2022年1月】最近のvivit開発部の特徴は？

はじめに こんにちは、技術開発部 事業横断チーム ひよっこデータエンジニアの多田です。 前回の記事を書いてから1月ほどでしょうか。 前回は自称データエンジニアでしたが、今はひよっこデータエンジニアをしています。 vivit.hatenablog.com 最近分かったのですが、弊社の選考に進まれる方は結構このブログを見てくれるようです。 そのため、今後vivitに興味を持ってくれたエンジニアの方々に少しでもvivit開発部の特徴・雰囲気が伝わればいいなと思い、定量的にそれを解説してみます。 ということで、以下の項目を部内でアンケートを取ってみました。 せっかくなので業務委託の方にもご回答頂いてま…

ガースー日記•一昨日

データエンジニアとアナリストを両立するキャリアパスを考えてみる(エンジニア編)

はじめに ちょうど最近、上司とキャリアパスの話をする機会がありました。 その中で、データエンジニアとアナリストのどっちの道に進むか迷っている、という話をさせてもらいました。 またデータエンジニアとして吹っ切る、という考え方もあるとは思っています。 ただ現時点では、アナリスト要素をキャリアに取り入れたい、と何となく考えてます。 そこで、データエンジニアとデータアナリストとしてのキャリアを成功させる？ためにどんな要素が自分に足りないのか？をメモ書きとして残していこうと思います。 もうちょっとスペック的なことを書いた方が良いかもですが、分かっていること・分かってないことを書けば自明になるかなと思って…

エンジニアのはしがき•一昨日

リーダーブルコードを読み返した

www.amazon.co.jp 先日以前も読んだことのあるリーダブルコードを読み返しました。 実はエンジニアとして実務に携わる前から読んではいたのですが、中盤のページ以降から経験不足が故にきちんとした理解に落とし込めてはいませんでした。 実務を経験して3年半経った今読むと、なんとなく実践できているところや新たな気付きがありましたので、そういった部分を記事に書いていこうと思います。

Link and Motivation Developers' Blog•一昨日

色々なオブジェクト指向言語の型システムを比較してみた

はじめに オブジェクト指向言語を対象に、型に関する情報をまとめてみました。誤り、改善箇所がありましたらコメントいただけますと幸いです。 公開当時（2020/12）の情報を基に書いています。 比較表 言語名 登場年 ①検査タイミング ②指定方法 ③互換性の確認方法 Smalltalk 1980 動的 暗黙的 ダックタイプ的 Ada 1983 静的 明示的 名前的 C++ 1983 静的ときどき動的 明示的ときどき暗黙的 名前的ときどき構造的 Objective-C 1984 静的ときどき動的 明示的ときどき暗黙的 名前的ときどきダックタイプ的 Eiffel 1985 静的 明示的 名前的 Obj…

Islands in the byte stream•一昨日

GitHub Pull-ReqでCIの完了をデスクトップ通知するChrome拡張 "WatchRaptor" を作った

Chrome Web Store chrome.google.com 使い方ですが、GitHub PR pageに次のようにCI statusにcheckboxが現れるので、完了通知がほしいCI statusにチェックをつけるだけ。 チェックされたCI statusが完了（success or failure）になると、次のようなデスクトップ通知が出ます。この完了したときの通知をクリックすると該当のGitHub PR pageのタブをアクティブにします。 tab idごとにcheck状態をもっているので、リロードしてもtabごとのcheck状態は維持されます。 現在（v0.9.2）の機能はこれ…

nakamurakko’s blog•一昨日

Angular のプロジェクトに ESLint を設定して、 TypeScript っぽく書いているかチェックする

環境 Angular CLI 13 Visual Studio Code 参考にしたサイト @typescript-eslint/eslint-plugin eslintを最大限活用してTypeScriptの型安全を少しずつ高める方法 TypeScriptのプロジェクトでESLint+Prettierを活用する Angular のプロジェクト内で TypeScript らしくコーディングしているかチェックするには、 ESLint Plugin TypeScript を使うと良い。 (この設定は Angular に限らず、 TypeScript を使用するフレームワークで使えるはず。) パッケー…

deve.K•3 日前

React.jsを学ぶ前のJSでの演算子・条件分岐　基礎

※注意点 当ブログではJavaScriptにおける、多少の基礎的な知識は前提で必要とします。 この記事ではReact.js入門をする前にJavaScript初学者様に向けた『比較演算子』と『論理演算子』『条件演算子』での学習となります。 他の記事では、分かりやすく用語を言い換えたりしてるかと思いますが当ブログでは少ないのでご了承下さい。 出てきた単語などは別途こちらで解説致します。 バニラJavaScriptでのコード説明となります 外部ライブラリ・フレームワークの使用およびTypeScriptでの学習の場合は他の記事を参考に下さい。 近いうちに余裕があれば初学者様向けのTypeScriptで…

CLOVER🍀•3 日前

Node.js × TypeScriptのORM、PrismaをMySQLで試す

これは、なにをしたくて書いたもの？ Node.js＋TypeScript環境でのORMはどれを使ったらいいのかな？ということで。 このあたりみたいです。 Sequelize | Sequelize ORM v5以降、TypeScriptをサポート TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Brow…

Plan 9とGo言語のブログ•4 日前

業務端末としてLinuxデスクトップを使うために設定したこと

2021年の11月に、業務端末としてDELL XPS 13を購入して、Linuxデスクトップに移行しました。いまでは快適に使えるようになりましたが、Linuxデスクトップに慣れていないこともあって思ったように動かず困ったところがあったので、導入にあたって悩んだところをまとめました。 ディスクの暗号化 業務利用の要件にディスクの暗号化があるので、bootパーティションを除いて暗号化しました。手順は過去記事に追記しました。 blog.lufia.org GNOME KDE Plasmaの方がスタイルは好みですし、実際に業務端末でも2ヶ月ほど使っていましたが、Wayland環境ではタッチパッドの左右…

Rolling My Way•4 日前

退職エントリ的なあれ

みなさま、こんばんみ。タイトル通り退職エントリ的なあれです、本日、最終出社でした。現職では主にフロントエンジニアとしてNuxt.js/Firebaseを用いた、仮想通貨/NFT系のサービス開発に携わりました。約三年ほど。 なんで入ったのか 前の退職エントリ 参照 やってたこと 仮想通貨で翻訳依頼する漫画Viewer的なのや、NFTのマーケットプレイス的なやつを作りました。あとなぜか保険系のWEB受付サービスなんかも。最後の方はリードエンジニアっぽいことも若干やってました。リード(に繋がれた)エンジニア 技術要素的にはざっくり以下辺り。 Nuxt.js(2系) Node.js(backend) …

kakakakakku blog•4 日前

2021年の振り返りと2022年の抱負

2021年の振り返り 🎉 幅広く技術を語れるように学び続けた ⭕ 2019年から3年連続で「幅広く技術を語れるように学び続ける」を年間目標にしていた．直近3年ほど技術講師をしているため「教える」ことを軸に学ぶことが多く「語れる = 教えられる」という目標設定は自分自身に合っている．2021年も四半期ごとに以下の中目標を掲げていた． 1-3月 : Kubernetes を実践的に学ぶ 4-6月 : 機械学習に入門する 7-9月 : Kubernetes をセキュリティ観点で学ぶ 10-12月 : 機械学習を実践的に学ぶ 継続的にインプットをし続けて，後述するテックブログも中目標に沿って多く書けた…