2021-06-10

【TypeScript】Objectsをマージしたい

TypeScript

結論

Object.assignでObjectsをマージできるらしいです。

  const target = { a: 1, b: 2 }
  const source = { b: 4, c: 5 }

  const returnedTarget = Object.assign(target, source)

  console.log(target)
  // expected output: Object { a: 1, b: 4, c: 5 }

  console.log(returnedTarget)
  // expected output: Object { a: 1, b: 4, c: 5 }

ちなみに、Object.assignの第一引数に設定したオブジェクトは、今回のreturnedTargetと同じように、オブジェクトがマージされた状態になるので、元のオブジェクトの状態を保持したい場合は、第一引数に空のオブジェクトを指定します。

  const target = { a: 1, b: 2 }
  const source = { b: 4, c: 5 }

  const returnedTarget = Object.assign({}, target, source)

  console.log(target)
  // expected output: Object { a: 1, b: 2}

  console.log(returnedTarget)
  // expected output: Object { a: 1, b: 4, c: 5 }

てな感じで本日も以上となります🍺

参考

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

その他の記事

yamato8010.hatenablog.com

2021-06-09

【React】動的にコンポーネントを追加するには

JSX React TypeScript

ボタンタップ時などに、動的にフォームを追加する方法がわからなかったので簡単にメモ。

結論

JSXでは{ }で囲んだコードは、JavaScriptとして認識されるので、動的にコンテンツを追加したい場合は下記のように記述することができます。

public render() {
  return (
    <div>
      {hogeItems.map((key, _index) => {
        <HogeItem key={key}>
      })}
    <div>
  )
}

てな感じで本日も以上となります🍺

その他の記事

yamato8010.hatenablog.com

2021-06-08

【TypeScript】Dictionaryをループ処理

TypeScript

TypeScriptでは、インデックスシグネチャと呼ばれる機能を使って下記のように、KeyとValueの型を明示的に指定したDictionaryを作成することができます。

    interface Dictionary<T> {
        [index: string]: T;
    }

今回は、このDictionaryに格納された配列をどのようにループ処理できるのか、知らなかったため簡単にメモをしておこうかと思います。

結論

下記のようにObject.keysメソッドを使用することで、Dictionaryのループ処理を実行できます。Object.keysメソッドは、オブジェクトがもつプロパティの名前を配列で返します。

    Object.keys(this.state.params).map((key, index) => {
    }

てな感じで本日は以上となります🍺

その他の記事

yamato8010.hatenablog.com

2021-06-07

【Git】untracked filesもstashしたい

git

結論

-u もしくは--include-untrackedオプションでuntracked filesもまとめてstashすることができます。(今までよく使わないで、ここまでやってこれたな🤔)

$ git stash -u

ちなみにステージングしていないかつ、untracked filesもまとめてstashしたい時は、--keep-indexオプションと合わせて使うこともできます。

$ git stash -k -u

てな感じで本日も以上となります🍺

その他の記事

yamato8010.hatenablog.com

2021-06-06

TypeScriptのunion型って便利ですね

TypeScript

TypeScriptのunion型に感動したので、簡単にメモ。

union型

union型とは、enumのように、型に入る値を定義できるもので、下記の例で、argに設定することができるのはa・b・cのいずれかの値になります。

function hoge(arg: 'a' | 'b' | 'c') {
  console.log(arg)
}
hoge('a')

例外となる値が入った場合は、下記のようにはじいてくれます。

function hoge(arg: 'a' | 'b' | 'c') {
  console.log(arg)
}
hoge('g') // Argument of type '"g"' is not assignable to parameter of type '"a" | "b" | "c"'

union vs enum

「enumじゃなくてunion使えや！」的な記事をよく見かけたので、その理由を調べてみました。

1.数値enumはtype safeではない

enum Hoge {
  A = 0,
  B = 1
}
const hoge: Hoge = 3
console.log(hoge) // error

2.文字列のenumの冗長性

enum Hoge {
  A = 'A',
  B = 'B',
  C = 'C'
}

const enum を使う場合では、Babelでトランスパイルできないなどの問題もある

またそのほかにも色々理由があるそうです👀（全ては理解してないが、とりあえずunionを使って行こうと思う）

https://www.kabuku.co.jp/developers/good-bye-typescript-enum https://engineering.linecorp.com/ja/blog/typescript-enum-tree-shaking/

てな感じで本日も以上となります🍺

その他の記事

yamato8010.hatenablog.com

2021-06-05

TypeScriptで型チェックってどうやるの？

TypeScript

結論

typeof演算子を使って下記のように分岐を行うことができます。

if (typeof value === 'number') {
  return (value as number).toString()
}

また、下記のような場合はundefinedは判定されますが、nullは許容されるので、nullをはじきたい場合はその下の例のように記述する必要があります。

if (typeof value !== 'undefined') {
  // valueがnullの可能性あり
}

if (typeof data !== 'undefined' && data !== null) {
  // valueはundefinedではなく、nullでもない
}

そもそもこのような場合は、typeof使わないで下記のようにかけるそうですね。

参照: https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined#dochiradearukawochekkusuru

if (arg != null) {
    // valueはundefinedではなく、nullでもない
}

ちなみにそれぞれの型は、typeofで下記のように出力されるらしい。

型	出力
undefined	'undefined'
null	'object'
boolean	'boolean'
number	'number'
symbol	'symbol'
string	'string'
function	'function'
参照などが解決できない場合	'undefined'
その他	'object'

てな感じで本日も以上となります🍺

参考

その他の記事

yamato8010.hatenablog.com

2021-06-04

【TypeScript】declareキーワードってなんぞや

TypeScript JavaScript

結論

アンビエント宣言というものらしい。

アンビエント宣言とは？

JavaScriptのライブラリをTypeScriptなどから利用する場合、TypeScriptは静的型付け言語なので、型の情報が必要になります。そのような場合、JavaScriptのオブジェクトをdeclareを使って宣言することで、型の情報を明示的にすることができます。ちなみに、この記述は型の情報を読み取ることが目的なので、JavaScriptにはコンパイルされません。

declare var x: number

てな感じで本日も以上となります🍺

参考

https://www.wakuwakubank.com/posts/501-typescript-declaration/

その他の記事

yamato8010.hatenablog.com

iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について１つぶやいています。まれに釣りについてつぶやく可能性があります。

【TypeScript】Objectsをマージしたい

結論

参考

その他の記事

【React】動的にコンポーネントを追加するには

結論

その他の記事

【TypeScript】Dictionaryをループ処理

結論

その他の記事

【Git】untracked filesもstashしたい

結論

その他の記事

TypeScriptのunion型って便利ですね

union型

union vs enum

その他の記事

TypeScriptで型チェックってどうやるの？

結論

参考

その他の記事

【TypeScript】declareキーワードってなんぞや

結論

アンビエント宣言とは？

参考

その他の記事