<h2 id="h64cf7c492e">省略</h2><h3 id="h9a1a39a607">オブジェクト</h3><p>オブジェクトのプロパティに<code>?</code>を付けて宣言することで省略可能になります。</p><pre><code>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"
// } </code></pre><p><code>SampleObj</code> の<code>bar</code>に<code>?</code>がついているので、省略可能となっています。</p><p>最初に定義した<code>foo</code> だけしかないオブジェクトと、<code>foo</code>と<code>bar</code> を代入したオブジェクトは同じSampleObj型になります。</p><h3 id="hd56e4caf46">関数</h3><p>関数のパラメータに<code>?</code> をつけると引数が省略可能になります。</p><pre><code>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</code></pre><p>あるいは、パラメータ宣言の後に <code>= 'hello'</code>のようにしてデフォルト値の設定ができます。</p><p>関数を実行する時に、引数を指定しなかった場合にデフォルトの値が代入されます。</p><pre><code>function foo(bar: number, baz?: string = 'hello'): void {
    console.log(`bar: ${bar}, baz: ${baz}`);
}

foo(123);           // 123, hello
foo(123, 'world');  // 123, world</code></pre><h2 id="h11f6d98e0f">undefinedをチェックする</h2><p>JavaScriptでは存在しないプロパティにアクセスするとundefinedが返却されます。</p><p>省略したプロパティや引数の型は<code>string | undefined</code> のようにUnion型（ユニオン型）となります。</p><p>（stringなのは省略しているのがstring型のため）</p><p><code>?</code>で省略したプロパティや関数の引数を使用すると、undefinedの可能性があるのでエラーとなってしまいます。</p><p>そのため省略したプロパティや引数はundefinedのチェックをして使用する必要があります。</p><pre><code>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"</code></pre><h2 id="h27759c2fca">?で省略したのと「string | undefined」は同じ意味ではない</h2><p>前述したように<code>?</code>で省略すると<code>string | undefined</code> というようにUnion型に変換されます。</p><p>しかし、<code>?</code>を使用せずに <code>string | undefined</code> と自分で定義した場合は省略できず、同じ意味にはなりません。</p><p><code>?</code>を使わない場合は、たとえundefinedが許されていても、プロパティや関数の引数として宣言しないといけないのです。</p><pre><code>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)</code></pre><h2 id="h3de35099b3">参考</h2><ul><li><a href="https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a#-%E7%9C%81%E7%95%A5%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3" target="_blank" rel="noopener noreferrer">TypeScriptの型入門 - Qiita</a></li><li><a href="https://typescript-jp.gitbook.io/deep-dive/type-system/functions" target="_blank" rel="noopener noreferrer">関数の型 - TypeScript Deep Dive 日本語版</a></li></ul><h2 id="h691f93fa66">おすすめ参考書</h2><iframe frameborder="0" allowfullscreen="true" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=ykms1230e-22&amp;language=ja_JP&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=4873119049&amp;linkId=14a865142bfcc32bb4b97d9ec257ead6"></iframe><iframe frameborder="0" allowfullscreen="true" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=ykms1230e-22&amp;language=ja_JP&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=4297127474&amp;linkId=63d98f7462a4c7e3d3352c15bcb2b52e"></iframe><iframe frameborder="0" allowfullscreen="true" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=ykms1230e-22&amp;language=ja_JP&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=as_ss_li_til&amp;asins=B07T477V6G&amp;linkId=30581815f0afab804fcd699a25e5927b"></iframe><p><br></p>

【TypeScript】?の省略と「string | undefined」のユニオン型を一緒にしない