React Vite TypeScript 【TypeScript編】はじめてのTypeScript

React ＋　Vite ＋　TypeScriptで開発したい

自分はどの技術も触ったことがない。
まずはTypeScriptから勉強するぞ

javascriptやってたし多分いける

TypeScriptの！の使い方

まず環境構築を済ませて、生成されたファイルに目を通した

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

createRoot()の引数として記述されているtypescript:getElementById('root')
その後ろに！が付いている...

こんな記述は見たことがなかった。
コード内にある！は条件式などに使う演算子くらいif(!flag)しか見たことなかったのでどういう意図が全く分からなかった

結論

この！は非null アサーションというらしい。
値がnullやundefindではないと保証するために使うらしい

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

つまりrootというidの要素が見つからなくても処理を続ける

というわけではなく
null や undefindeを返す可能性があるけど
開発者が返す可能性はないと保証するために使うらしい。

なにがどう便利なのか想像がつかないが知識として持っておきます