はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript(Reactなし)のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック(tipsレベルですが)をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
![【TypeScript】超実践的テクニック集【Reactなし】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5eb16e25b0688536468d92d2ab123e437a662bf7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwVHlwZVNjcmlwdCVFMyU4MCU5MSVFOCVCNiU4NSVFNSVBRSU5RiVFOCVCNyVCNSVFNyU5QSU4NCVFMyU4MyU4NiVFMyU4MiVBRiVFMyU4MyU4QiVFMyU4MyU4MyVFMyU4MiVBRiVFOSU5QiU4NiVFMyU4MCU5MFJlYWN0JUUzJTgxJUFBJUUzJTgxJTk3JUUzJTgwJTkxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05MzgxNzNkMWU3NDJkMzFjZTU3YmM1ZmJjOTVlNWMwNA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwbWVudF9SRSUyMGluJTIwJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFJUUzJTgzJThCJUUzJTgyJUI4JUUzJTgzJTlDJUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgyJUI5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wOGJjMjdlYzRjNzEwZTU0Mzc3MjNjODQ4MTFkYjQ4Ng%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd09b69d355a73a75bfa0006ffab47b14)