えぐろぐ

https://twitter.com/eggpogg

Typescript x ESLint で引数のみ使用を許可する方法

Javaでやってきた身としては、エラーではなく残しておいてほしかったので調べた。

// .eslint.js

  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
  },

オプションの詳しいのはここ乗っている。
eslint.org

Nuxt x TypeScriptでStoreで自作プラグインの使う方法

this.$zisakuに返す型を定義して、interface Storeに渡してあげれば良い

// plugins/zisaku.ts

import { Plugin } from '@nuxt/types'

export interface Zisaku {
  hoge: () => void
  fuga: string
}

const zisaku = {
  hoge: () => { console.log('hoge') },
  fuga: 'fuga'
} as Zisaku

const plugin: Plugin = (context, inject) => inject('$zisaku', zisaku)

export default plugin
// types/index.d.ts

import { Zisaku } from '~/plugins/zisaku'

declare module 'vuex/types/index' {
  interface Store<S> {
    $zisaku: Zisaku
  }
}

AndroidのTextInputLayoutが表示できなかった時の対応

Activityを持たないViewだけの生成で com.google.android.material.textfield.TextInputLayout を使おうと思った時に以下のエラーが発生した。

Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).

エラーの通りでテーマにTheme.AppCompatを指定しないといけないということだったけど Activityがない場合には、RootのViewGroupに設定を追加すればいいみたいだった。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:theme="@style/Theme.AppCompat.DayNight.NoActionBar" <--------- 追加
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        android:layout_width="match_parent"

設定したら問題なく表示された。

memo: ActivityやApplicationの追加はこちらのStackOverflowで確認できる。

stackoverflow.com

nuxt x TypeScripts で $axios を読み込ませる

$axiosを読み込ませたいだけならindex.d.tsに import を追加するだけで良い

// index.d.ts
import { NuxtAxiosInstance } from '@nuxtjs/axios'

あとは、以下のあたりが自動で読み込まれて設定される

github.com

もっと細か追加したい場合は、
以下を参考にすると良さそう! gist.github.com

TypeScriptsでnew URL をする時のエラー

以下のように書いていたら

import * as url from "url"
const url = new url.URL("https://google.com")

以下のエラーがコンソールに出力された

TypeError: undefined is not a constructor (evaluating 'new url__WEBPACK_IMPORTED_MODULE_9__["URL"]

調べてみると、lib.dom.d.ts に処理が追加されたとのことなので 
github.com

importは不要で以下だけで良かったみたい。

const url = new URL("https://google.com")

Nuxtのstoreのサンプル

// store/index.js
export const state = () => ({
  count: 0,
})

export const mutations = {
  increment(state) {
    state.count += 1
  },
  increment_async(state, payload) {
    state.count += payload.value
  },
}

export const actions = {
  async increment({ commit }) {

    const res = await fetch(
      'https://community-open-weather-map.p.rapidapi.com/weather?lat=0&lon=0&callback=test&id=2172797&lang=null&units=%2522metric%2522%20or%20%2522imperial%2522&mode=xml%252C%20html&q=London%252Cuk',
      {
        method: 'GET',
        headers: {
          'x-rapidapi-host': 'community-open-weather-map.p.rapidapi.com',
          'x-rapidapi-key': 'xxxxxxxxxxxxx',
        },
      }
    )

    commit('increment_async', { value: 2 })
  },
}

使い方

console.log(this.$store.state.count) // => 0

this.$store.commit('increment')
await this.$store.dispatch('increment')

console.log(this.$store.state.count) // => 3

思ったよりもサクッと出来て驚いた!

Evernoteのプレミアム会員になった

プレミアムプランが40%OFFだった(年\3129) と
独学の技法を読んで読んだ本ののClipをしていこうと思った。
あと、無駄にブックマークしていたブログなどもClipもしていく。

知的戦闘力を高める 独学の技法

知的戦闘力を高める 独学の技法

  • 作者:山口周
  • 発売日: 2017/11/17
  • メディア: Kindle版

先週、はてぶもプレミアムプランに戻したので定期的にブログ投稿も続けてみる。