VueとTypeScriptとCMSでの開発

概要
最近お仕事でVueとTypeScriptを使ったので、大事そうなところをメモしとこうのnote
CMSで静的なhtmlを配信して動的な部分はVueとTypeScriptでちょろちょろっと実装する感じ

TypeScript
基本的には型をちゃんと定義して書いてれば動く感じ。
vscodeにtslintを入れておけば、基本的に良くない書き方も指摘してくれるので書きながら矯正されてく。
async,awaitとシャローコピーで何度もつまずいた。この辺ちゃんと理解してないと、あれこの変数いつの間にか変わってる！！的な現象に遭遇する

async
apiを非同期で呼び出して戻り値を用いて処理！的な展開で使えるこいつ。
以下のようにasyncをfunctionに定義しておくと非同期で呼び出せる。
※非同期メソッドの文字列は同期メソッドの後に呼び出される。

async function sample1(): Promise<string> {
    return "this is async method(resolve)";
}

async function sample2(): Promise<string> {
    throw "this is async method(reject)";
}

function sample3(): string {
    return "this is sync method";
}

sample1().then((text: string) => {
    console.log(text);
});

sample2().catch((text: string) => {
    console.log(text);
});

console.log(sample3());

# 以下順序で表示される
# this is sync method
# this is async method(resolve)
# this is async method(reject)

asyncの戻り値はPromise<T>になる。returnしたものを.then()で受け取り、throwしたものを.catch()で受け取る。

await
async宣言したメソッド内ではawaitを使える。await宣言した処理が終わるまで次の処理は実行されない。
しかもtry, catchでreturnとthrowの内容を受け取れるのでthen, catchでネストしなくて見やすいね！！！

async function sample1(): Promise<void> {
    try {
        const return2:string = await sample2();
        console.log(return2);
        console.log("this is sync function");
        await sample3();
    } catch (err) {
        console.log(err);        
    }
}

async function sample2(): Promise<string> {
    return "this is async method(resolve)";
}

async function sample3(): Promise<string> {
    throw "this is async method(reject)";
}

sample1();

# 以下順序で表示される
# this is async method(resolve)
# this is sync function
# this is async method(reject)

ちなみにreturnされたものは型チェックが効くけど、throwされたものはPromise<T>の型が効かず何でも受け取れてしまうので、TypeGuardとか使って型チェックすべし！

シャローコピー
TypeScriptはシャローコピー。これを意識しないと意図しない現象が結構起きる。
例えば以下のように定数を宣言したつもりが、処理を進めて行くうちにデータが更新されている的なこと。そんな時はメソッドで戻るようにしとくと良い。

interface Sample{
    id: number;
    name: string;
}

const Default: Sample = {
    id: 1,
    name: "hoge",
}

function getDefault(): Sample{
    return {
        id: 2,
        name: "fuga"
    }
}

const default1: Sample = Default;
default1.name = "piyo";

const default2: Sample = getDefault();
default2.name = "spam";

console.log(Default.name);
console.log(getDefault().name);

# 変数で定義したものは元のconstまで更新されちゃうー

jest
そういえばもう一個つまったとこだけど、javascriptの単体テストjestでawaitメソッド内のthrow new Error()を.toThrow()テストしようとしたら、うまくいかなかった。
そもそも.toThrow()がawaitに対応してなくて以下みたいに書けばうまくいった。

/** 実行 */
let error;
try {
    await App.exec();
} catch (e) {
    error = e;
}

/** 結果 */
// throwされていることの確認
expect(error).toEqual(new Error("throe error"));

まとめ
全然Vueの事書けなかったw
とりあえず初のnoteだしこの辺にしとこー