Angularでモックデータの作成とそのモックデータにtypescriptのデータ型を適用させる方法が知りたい…
この記事では上記の悩みを解決します。
今回実装する内容は以下です。
・mockの作成
・interfaceを作成し、上記のmockデータにtypescriptの型を適用させる
それでは実際に実装していきましょう。
実装内容は、yoteiPickerというアプリを参考にしています。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
typescriptの型をさらっとおさらい
まずは、typescriptの型をさらっとおさらいします。
export class SampleComponent implements OnInit {
public title: string;
public id: number;
public isDisabled: boolean;
public data: Array<number>;
public yotei: Yotei[];
constructor() {}
}こんな感じで、型を当てはめます。
titleに文字型(‘hoge’)ならstring、idが数字型(1)ならnumber、isDisabledがtrueかfalseならboolean、配列系で配列が[1,2,3..]のように数字が入るなら、Array<number>、特定のデータ型を当てはめるなら、例えばYotei[]のようにtypescriptの型を当てはめれば良いです。
より詳細に解説すると、以下になります。
export interface Company {
company_id: number;
company_name: string;
display_flg: boolean;
}export interface Store {
store_id: number;
store_name: string;
shop_time: ShopTime;
}
export interface ShopTime {
shop_from: number;
shop_to: number;
}import { Component, OnInit } from '@angular/core';
import { Company } from 'src/interface/company';
import { Store } from 'src/interface/store';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
// 文字列型
public name: string = 'hello';
// 数値型
public id: number = 0;
// 真偽型
public isDisabled: boolean = true;
// 配列<文字列>型
public item: Array<string> = ['angular', 'vue', 'react'];
// 配列<数値>型
public age: Array<number> = [20, 30, 40];
// データ型...例1
public company: Company = {
company_id: 1,
company_name: 'マクドナルド',
display_flg: true
}
// データ型...例2
public store: Store = {
store_id: 1,
store_name: '渋谷店',
shop_time: {
shop_from: 1000,
shop_to: 2100,
}
}
// any型
public hoge: any = 'hello';
constructor() { }
ngOnInit(): void {
}
}
データ型…例1とデータ型…例2にCompanyとStoreという型を定義していますが、その型にそれぞれinterfaceのファイルで定義した内容を当てはめています。
mockを作成する
angularでmockを作成していきます。
mockですが、mockを記載するファイルはそれぞれお好みですが私の場合はassets/mock/yotei.jsonというファイルを作成しそこのファイルに記載しています。
以下は一例ですが、データ型のmockになります。
{
"yotei": [
{
"id": 1,
"name": "東京国立博物館",
"category_id": 2,
"category": "芸術・教養",
"prefecture_id": 13,
"prefecture": "東京",
"recommend_point1": "貴重な日本文化財を見ることができる",
"recommend_point2": "日本の歴史や文化について深く学べる",
"recommend_point3": "無料で入場できる常設展示もある"
}
]
}interfaceを作成しmockにデータ型を適用させる
先ほど作成したmockにtypescriptのデータ型を適用させます。
export interface Yotei {
id: number,
name: string,
category_id: number,
category: string,
prefecture_id: number,
prefecture: string,
recommend_point1: string,
recommend_point2: string,
recommend_point3: string,
}上記のように、それぞれに型を適用します。
あとは、型をmockのデータに適用させいだけです。
import { Component, OnInit } from '@angular/core';
import { Yotei } from 'src/app/interface/yotei';
@Component({
selector: 'app-top',
templateUrl: './top.component.html',
styleUrls: ['./top.component.css']
})
export class TopComponent implements OnInit {
public yotei: Yotei[];
constructor() {}
ngOnInit(): void {}
}
interfaceをimportさせることもお忘れなく。
yoteiのデータが配列型で来る場合は、Yotei[]のようにし、配列ではない場合はyotei: YoteiとすればOKです。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント