TypeScriptでdoes not exist on typeと言われた時の対策

下記のようなコードを書いた所

Request("/path/to.json").then((hoge: Array<Object>) => {
hoge.forEach((str) => {
console.log(str);
});
});

オブジェクトなんだからforEachなんてだめでしょとWebpackが行った

TS2339: Property 'forEach' does not exist on type '{}'.

下記のように実際に渡ってくる値の型を宣言してあげたらコンパイルできるようになった

Request("/path/to.json").then((hoge: Array<String>) => {
hoge.forEach((str) => {
console.log(str);
});
});

IntelliJで書いているがIDEは何も言わないので混乱した。でも確かに型をしっかり書いてあげるべきだし、書いてあげることでIDEが強力な補完をしてくれるのでありがたい。もっと型を宣言する癖をつけたい。

TypeScript + vue-routerでmode:historyを使う方法

下記のようにすることでハッシュが付かないhistoryを用いたURLを使えるようにできるらしいのだが

const routerOption = {
mode: "history",
routes: [{ path: '/', component: RootComponent }]
};

下記の様なエラーが出る

ERROR in /src/ts/app.ts
[tsl] ERROR in /src/ts/app.ts(24,30)
TS2345: Argument of type '{ mode: string; routes: { path: string; component: VueConstructor<{ enthusiasm: any; } & { increm...' is not assignable to parameter of type 'RouterOptions | undefined'.
Type '{ mode: string; routes: { path: string; component: VueConstructor<{ enthusiasm: any; } & { increm...' is not assignable to type 'RouterOptions'.
Types of property 'mode' are incompatible.
Type 'string' is not assignable to type '"history" | "hash" | "abstract" | undefined'.

typescript.jsonをこちらの書き方に修正してみたが、下記のようなエラーが出る。

Type 'string' is not assignable to type 'RouterMode'.

どうしたものかといろいろ調べてみたらこちらの記事でCastする方法が書かれていたので下記のようにしてみた。

let hoge: RouterMode = "history";
const routerOption = {
mode: hoge,
routes: [{ path: '/', component: RootComponent }]
};

すると無事コンパイルできた。

{
mode: "history" as RouterMode,
routes: [{ path: '/', component: RootComponent }]
}

と書いたほうが綺麗かな。

vue.jsのvue-routerでArgument of type '{ routes: VueRouter; }' と言われる場合

下記のようなエラーが出てきた

ERROR in /src/ts/app.ts
[tsl] ERROR in /src/ts/app.ts(32,19)
TS2345: Argument of type '{ routes: VueRouter; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
Object literal may only specify known properties, and 'routes' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.

どこかからコピペして下記のようにしていたのだが

let v = new Vue({ routes }).$mount('#app');

実はroutesではなくrouterだった。後省略形は個人的にあまり好きではないので明示的にこのように書く。

let v = new Vue({ router: router }).$mount('#app');

参考

https://stackoverflow.com/questions/47098925/use-vue-router-in-a-mixin

vue.jsをtypescriptで使っていてcomponentをimportしようとしていたらhoge.vue.tsファイルを読みに行ってしまう事件

vue.jsをtypescriptで使っていてcomponentをimportしようとしていたらhoge.vue.tsファイルを読みに行ってしまう事件

下記のような簡易ファイルを作ってimportしてテストしようとしていたらなぜかvue.tsを読みにいってしまっていた。

<template>
<div>
hoge
</div>
</template>
<script lang="ts">
</script>
<style lang="scss">
</style>

テストのつもりで思考停止して簡易ファイルを作っていたが、一切は下記のようにVueをimportしてexportする必要があったのだった。

<template>
<div>
hoge
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
});
</script>
<style lang="scss">
</style>

JavaScriptでMySQLのDATETIME型に使える形式の時間を取得する

現在見ているページの情報をデベロッパーツール上で実行し取得してそのままSQLを生成する作業の時にDATETIME型の時間がほしい。下記のコードが一番シンプルで外部ライブラリも必要ない。

new Date().toISOString().slice(0, 19).replace('T', ' ');

参考

https://stackoverflow.com/questions/5129624/convert-js-date-time-to-mysql-datetime