tusbasaのブログ

業務や勉強中に調べたことを自分用にメモするブログ

2023-01-01から1ヶ月間の記事一覧

【TypeScript】部分型関係

SportsCar型はCar型の部分型と言える。 type Car = { price: number } type SportsCar = { price: number; speed: number; }

【TypeScript】関数の型定義

以下の2つの関数の型定義は同じ意味になる。 type calc: (a: number) => number; const calc = (a: number) => number; 参考 maku.blog zenn.dev

【TypeScript】関数宣言と巻き上げ

関数宣言より前に関数を使用することができる。 (同一スコープの場合) calc(2, 5) function calc(a: number, b: number): number{ return a + b; }

【Typescript】分割代入

オブジェクトのプロパティを簡単に変数に代入することができる。 変数に独自に型を与えることはできない。もともとのオブジェクトが持つ型が適用される。 const car = { price: 500, color: "red" } { price, color } = car console.log(price) // 500 conso…

【Nuxt.js】InjectionKey

provide,injectを使用する際の型の渡し方。 InjectionKey不使用 //親コンポーネント provide<型>(キー, 渡すデータ) ex) provide<string>("hoge", foo) //子コンポーネント const a = inject<型>(キー) ex) const a = inject<string>("hoge") InjectionKey使用 //親コンポー</string></string>…

【TypeScript】型引数

型定義をする場合に引数を渡せる。 抽象度の高いコードを書くことができる。 type Car<T> = { color: string; option: T; } const car: Car<number> = { color: "red", option: 30 }</number></t>

【Typescript】型推論とtypeof

typeof 変数がもつ型を取得する const foo: number = 1 //変数fooの型を取得してTに代入 type T = typeof foo //barはnumber型になる const bar: T = 2 型推論から型を取得して使いまわすことができる const obj = { color: "red", price: 200 } type S = ty…

【TypeScript】型定義と使用の順序

型の定義は型を使用するコードの後に書いても問題ない。 コンパイルされて動作する為。 const car: Toyota = { price: 300, color: "red" } type Toyota = { price: number; color: string; }

【TypeScript】as

型を上書きができる。型エラーが起こらないから使わない方が良い。 interface Test { foo: number } const test = {} as Test test.foo = 123 // OK!! 以下のようにいミューダブルなオブジェクトを作成する場合には使っても良い。 // resultの型が{}になって…

【Nuxt.js】provide, inject

provide 親コンポーネントで渡したいデータを指定 inject 子コンポーネントで受け取りたいデータを指定 孫コンポーネントに直接データを渡すことはできるが兄弟コンポーネントには直接渡すことはできない。 // TypeScriptで型を指定して渡す方法 // "fuag"と…

【Javascript】コールバック関数とは

コールバック関数とは、関数の呼び出し元に対して、特定の処理が完了した時に呼び出す関数を指定することで、非同期処理を行うために使用される関数です。 // callbackはsetTimeout関数の中で呼び出されるコールバック関数です。 setTimeout(callback, delay…

【Typescript】ReturnType、typeofの組み合わせで型定義

ReturnType、typeofの組み合わせで関数の戻り値を型として扱う書き方ができる const useNumber = () => { return { a: 'xxxx', .... } } const data = useNumber() type useNumerType = ReturnType<typeof useNumber> # 引数のdataに型定義ができる const processing = (data: </typeof>…

【vue.js】コンポーネント間の変数の受け渡し

親コンポーネント内(以下のコードが書かれているファイル)のcorporationsという変数をAreaコンポーネント内でentitiesという変数名で参照できる。 子コンポーネントではpropsで # 親コンポーネント内 <Area :entities="corporations" /> # 子コンポーネント内 export default { props: [enti</area>…

【vue.js】computedプロパティ

computedプロパティはデータの変更に対して自動的に再計算されるプロパティです。 一方、普通の関数は明示的に呼び出される必要があります。 computedプロパティは、それが依存しているデータが変更された場合にのみ再計算されます。

SimpleCovのテストカバレッジ測定について

ラインカバレッジ:その行が呼ばれているかを判断している。三項演算子等ワンライナーで書かれた場合その行が呼ばれていれば測定している事になる。 ブランチカバレッジ:条件分岐のみを対象としている。条件分岐のないファイルに関してはカバレッジが100パ…

【typescript】index.ts

まとめて関数をexportしている。 このファイルのみimportすればindex.ts でexportしているファイルの関数を全て利用することができる。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載することで利用できます。 参考 kakkoyak…