TypeScript 入門日記 03
前回
今回はこれをやった。
インターフェイス
オブジェクトの型に名前をつけることができる。多分この辺も C# とほぼ同じでメソッドとプロパティを宣言することができるが、中身は実装できない。
interface Employee {
firstName: string;
lastName: string;
fullName(): string;
}
使うときは「型」として呼び出せる。ちなみに関数の戻り値もコロンをつけて指定する。（ちょっと気持ち悪いかも）
let employee: Employee = {
firstName : "Emil",
lastName: "Andersson",
fullName(): string {
return this.firstName + " " + this.lastName;
}
}
// 例えば string 型に数値を入れようとするとエラー
employee.firstName = 10;
インターフェイスと型エイリアス type と似ているが、前者は継承が可能（いつでも再定義して上書きができる）、後者は継承は不可能。ただ、この時点ではこれらの違いが良くわからないので、色々試しながら感覚をつかんでいきたいところ。
インターフェイスの宣言
インターフェイスを構成するためにプロパティをいくつか定義していくが、つい買い方を指定していくことができる。
interface Hoge {
hogeData: string; // 通常の宣言
hugoData?: string; // 省略(null)可能
readonly hugeData: string; // 初回作成時以外は変更不可能
}
適当にインターフェイスを定義して使ってみる。
interface IceCream {
flavor: string;
scoops: number;
}
let iceCream: IceCream = {
flavor: 'vanilla',
scoops: 2
}
console.log(iceCream.flavor);
実行結果
vanilla
関数を作ってインターフェイスのプロパティを渡してあげることもできる。
interface IceCream {
flavor: string;
scoops: number;
}
let iceCream: IceCream = {
flavor: "vanilla",
scoops: 2
}
function tooManyScoops(dessert: IceCream){
if (dessert.scoops >= 4){
return dessert.scoops + " is too many scoops!";
} else {
return "Your order will be ready soon!";
}
}
console.log(tooManyScoops({flavor: "strawberry", scoops: 5}));
実行結果
5 is too many scoops!
インターフェイスの拡張
新しいインターフェイスを作った場合 extends キーワードを使って継承できる。
interface IceCream {
flavor: string;
scoops: number;
instructions?: string;
}
interface Sundae extends IceCream {
sauce: "chocolate" | "caramel" | "strawberry";
nuts?: boolean;
whippedCream?: boolean;
instructions?: string;
}
let iceCream: Sundae = {
flavor: "vanilla",
scoops: 2,
sauce: "caramel",
nuts: true
}
function tooManyScoops(dessert: Sundae){
if (dessert.scoops >= 4){
return dessert.scoops + " is too many scoops!";
} else {
return "Your order will be ready soon!";
}
}
console.log(tooManyScoops({flavor: "strawberry", scoops: 5, sauce: "caramel"}));
console.log(tooManyScoops(iceCream));
> node .\build\sample01.js 5 is too many scoops! Your order will be ready soon!
インターフェイスを継承した場合は必須パラメータなのかを確認する必要がある。
配列つきインターフェイス
インターフェイスの中に配列を宣言すればインデックスをつけることができる。
interface IceCreamArray {
[index: number]: string;
}
let iceCream: IceCreamArray;
iceCream = ['chocolate', 'vanilla', 'strawberry'];
let selectIce: string = iceCream[0];
console.log(selectIce);
実行結果
chocolate
インターフェースによる API
インターフェースを利用すれば、JavaScript API を記述して、ライブラリとして外部に提供できるようになる。例えば、showPost() という関数という API を提供する。これは指定した URL へリクエストしたときのレスポンス内容を JSON 形式で受けとって表示する機能を持つ。
const fetchURL = "https://jsonplaceholder.typicode.com/posts"
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
async function fetchPosts(url: string) {
let response = await fetch(url);
let body = await response.json();
return body as Post[];
}
async function showPost() {
let posts = await fetchPosts(fetchURL);
let post = posts[0];
console.log ("Post #" + post.id);
console.log("Author: " + (post.userId === 1 ? "Administrator" : post.userId.toString()));
console.log("Title: " + post.title);
console.log("Body: " + post.body)
}
showPost();
課題
最後に、MS Learn の課題問題をやってフィニッシュ。
interface Loan {
pricipal: number,
interestRate: number
}
interface ConventionalLoan extends Loan{
month: number;
}
function calcInterestOnlyLoanPayment(loanTerms: ConventionalLoan): string {
let interest: number = loanTerms.interestRate / 1200;
let payment: number;
payment = loanTerms.pricipal * interest / (1 - (Math.pow(1/(1 + interest), loanTerms.month)));
return "The interest only loan payment is " + payment.toFixed(2);
}
let interestOnlyPayment = calcInterestOnlyLoanPayment(
{
pricipal: 30000,
interestRate: 5,
month: 180
}
);
console.log(interestOnlyPayment);
実行結果
The interest only loan payment is 237.24
イベントのお知らせ
2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。 興味がある方は（社会人、学生問わず）ぜひご参加ください！ Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！
