TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するもの

TypeScriptの変数・引数宣言時のクエスチョンマークとビックリマークについてです。

まず結論から!以下の通りになります!

結論

クエスチョンマーク演算子:必須じゃないよ〜(省略可能だよ〜)という意味です。コンパイラにNULLの可能性があるかも〜と伝えているイメージです。

ビックリマーク演算子:必須だよ〜(省略不可だよ〜)という意味です。コンパイラにNULLの可能性はないよ〜と伝えている感じです。

スポンサーリンク

メンバ変数・引数の「?:」

// 例①メンバ変数
interface Props { className?: string; children?: string; }
// 例②引数
const test=(x?:number):void=>{console.log(x);}

メンバ変数・引数の?:(クエスチョンマーク+コロン)は、必須じゃないときにつけます。

省略可能ということです。

変数宣言時の「!:」

// 例①変数
let name!:string;

変数宣言時の!:(ビックリマーク+コロン)は必須のときにつけます。

省略不可(変数を使う時には、必ず変数に値が割り当てられている)ということです。

まとめ

まとめです!

まとめ

メンバ変数・引数の?:(クエスチョンマーク+コロン)は、必須ではないときに使う
→省略可能

変数宣言時の!:(ビックリマーク+コロン)は必須のときに使う
→省略不可(変数を使う時には、必ず変数に値が割り当てられている)

 

TypeScrpt公式ページはこちら

The starting point for learning TypeScript
Find TypeScript starter projects: from Angular to React or Node.js and CLIs.