【TypeScript】?の省略と「string | undefined」のユニオン型を一緒にしない
省略
オブジェクト
オブジェクトのプロパティに?を付けて宣言することで省略可能になります。
type SampleObj = {
foo: string
bar?: string
}
let obj: SampleObj = {
foo: 'sample',
}
console.log(obj);
// {
// "foo": "sample"
// }
obj = {
foo: 'foo',
bar: 'bar',
}
console.log(obj);
// {
// "foo": "foo",
// "bar": "bar"
// } SampleObj のbarに?がついているので、省略可能となっています。
最初に定義したfoo だけしかないオブジェクトと、fooとbar を代入したオブジェクトは同じSampleObj型になります。
関数
関数のパラメータに? をつけると引数が省略可能になります。
function foo(bar: number, baz?: string): void {
console.log(`bar: ${bar}, baz: ${baz}`);
}
foo(123); // bar: 123, baz: undefined
foo(123, 'hello'); // bar: 123, baz: helloあるいは、パラメータ宣言の後に = 'hello'のようにしてデフォルト値の設定ができます。
関数を実行する時に、引数を指定しなかった場合にデフォルトの値が代入されます。
function foo(bar: number, baz?: string = 'hello'): void {
console.log(`bar: ${bar}, baz: ${baz}`);
}
foo(123); // 123, hello
foo(123, 'world'); // 123, worldundefinedをチェックする
JavaScriptでは存在しないプロパティにアクセスするとundefinedが返却されます。
省略したプロパティや引数の型はstring | undefined のようにUnion型（ユニオン型）となります。
（stringなのは省略しているのがstring型のため）
?で省略したプロパティや関数の引数を使用すると、undefinedの可能性があるのでエラーとなってしまいます。
そのため省略したプロパティや引数はundefinedのチェックをして使用する必要があります。
type SampleObj = {
foo: string
bar?: string
}
function func(obj: SampleObj): void {
// const bar = obj.bar.toUpperCase
// Error: Object is possibly 'undefined'.
// toUpperCaseはstringのメソッドなので、undefinedの可能性があるとエラーとなる
// 三項演算子でundefinedかをチェックする
const bar = obj.bar != null ? obj.bar.toUpperCase : '';
// Null合体演算子でも可能
// const bar = obj.bar ?? '';
// Optional Chainingでも可能
// const bar = obj.bar?.toUpperCase
console.log(bar)
}
let obj: SampleObj = {
foo: 'sample',
}
func(obj) // ""
obj = {
foo: 'foo',
bar: 'bar',
}
func(obj) // "BAR"?で省略したのと「string | undefined」は同じ意味ではない
前述したように?で省略するとstring | undefined というようにUnion型に変換されます。
しかし、?を使用せずに string | undefined と自分で定義した場合は省略できず、同じ意味にはなりません。
?を使わない場合は、たとえundefinedが許されていても、プロパティや関数の引数として宣言しないといけないのです。
type SampleObj = {
foo: string
bar?: string | undefined
}
let obj: SampleObj = {
foo: 'sample',
}
// Error
// let obj: SampleObj
// Property 'bar' is missing in type '{ foo: string; }' but required in type 'SampleObj'.
// : 'bar' is declared here.
// 以下のようにundefinedと宣言するとエラーにならない
// let obj: SampleObj = {
// foo: 'sample',
// bar: undefined
// }
function foo(bar: number, baz: string | undefined): void {
console.log(`bar: ${bar}, baz: ${baz}`);
}
foo(123)
// Error
// Expected 2 arguments, but got 1.(2554)
// : An argument for 'baz' was not provided.
// 以下のようにundefinedと宣言するとエラーにならない
// foo(123, undefined)