2023-01-01から1ヶ月間の記事一覧
SportsCar型はCar型の部分型と言える。 type Car = { price: number } type SportsCar = { price: number; speed: number; }
以下の2つの関数の型定義は同じ意味になる。 type calc: (a: number) => number; const calc = (a: number) => number; 参考 maku.blog zenn.dev
関数宣言より前に関数を使用することができる。 (同一スコープの場合) calc(2, 5) function calc(a: number, b: number): number{ return a + b; }
オブジェクトのプロパティを簡単に変数に代入することができる。 変数に独自に型を与えることはできない。もともとのオブジェクトが持つ型が適用される。 const car = { price: 500, color: "red" } { price, color } = car console.log(price) // 500 conso…
provide,injectを使用する際の型の渡し方。 InjectionKey不使用 //親コンポーネント provide<型>(キー, 渡すデータ) ex) provide<string>("hoge", foo) //子コンポーネント const a = inject<型>(キー) ex) const a = inject<string>("hoge") InjectionKey使用 //親コンポー</string></string>…
型定義をする場合に引数を渡せる。 抽象度の高いコードを書くことができる。 type Car<T> = { color: string; option: T; } const car: Car<number> = { color: "red", option: 30 }</number></t>
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…
型の定義は型を使用するコードの後に書いても問題ない。 コンパイルされて動作する為。 const car: Toyota = { price: 300, color: "red" } type Toyota = { price: number; color: string; }
型を上書きができる。型エラーが起こらないから使わない方が良い。 interface Test { foo: number } const test = {} as Test test.foo = 123 // OK!! 以下のようにいミューダブルなオブジェクトを作成する場合には使っても良い。 // resultの型が{}になって…
provide 親コンポーネントで渡したいデータを指定 inject 子コンポーネントで受け取りたいデータを指定 孫コンポーネントに直接データを渡すことはできるが兄弟コンポーネントには直接渡すことはできない。 // TypeScriptで型を指定して渡す方法 // "fuag"と…
コールバック関数とは、関数の呼び出し元に対して、特定の処理が完了した時に呼び出す関数を指定することで、非同期処理を行うために使用される関数です。 // callbackはsetTimeout関数の中で呼び出されるコールバック関数です。 setTimeout(callback, delay…
ReturnType、typeofの組み合わせで関数の戻り値を型として扱う書き方ができる const useNumber = () => { return { a: 'xxxx', .... } } const data = useNumber() type useNumerType = ReturnType<typeof useNumber> # 引数のdataに型定義ができる const processing = (data: </typeof>…
親コンポーネント内(以下のコードが書かれているファイル)のcorporationsという変数をAreaコンポーネント内でentitiesという変数名で参照できる。 子コンポーネントではpropsで # 親コンポーネント内 <Area :entities="corporations" /> # 子コンポーネント内 export default { props: [enti</area>…
computedプロパティはデータの変更に対して自動的に再計算されるプロパティです。 一方、普通の関数は明示的に呼び出される必要があります。 computedプロパティは、それが依存しているデータが変更された場合にのみ再計算されます。
ラインカバレッジ:その行が呼ばれているかを判断している。三項演算子等ワンライナーで書かれた場合その行が呼ばれていれば測定している事になる。 ブランチカバレッジ:条件分岐のみを対象としている。条件分岐のないファイルに関してはカバレッジが100パ…
まとめて関数をexportしている。 このファイルのみimportすればindex.ts でexportしているファイルの関数を全て利用することができる。 また、index.ts の場合、./ディレクトリ/index ではなく ./ディレクトリ と記載することで利用できます。 参考 kakkoyak…