TypeScript でのインターフェイスタイプチェック
- TypeScript のタイプガード
-
TypeScript で
typeofを使用してタイプをチェックする -
TypeScript で
instanceofを使用する -
TypeScript で
inキーワードを使用してタイプを確認する
インターフェイスは、TypeScript の変数および要素に型を関連付けて、型の安全性を確保し、実行時エラーを回避するための TypeScript の重要な部分です。クラスやその他のインターフェースはインターフェースを実装できるため、これを実際のコードの動的な動作に使用できます。
したがって、Java の instanceof キーワードのように、型の安全性を確保するために実際のインターフェース型を知る必要がある場合があります。このチュートリアルでは、タイプの安全性を確保するためにインターフェイスのタイプをチェックする方法を示します。
TypeScript のタイプガード
タイプガードは、TypeScript に存在するさまざまなタイプをチェックして、タイプの安全性を確保します。これは、条件付きステートメントの形式です。
特定のタイプが 1つ以上のタイプの合成である場合に特に必要です。typeof、instanceof、in など、インターフェイスをチェックできるさまざまなキーワードを使用でき、カスタムタイプガードを作成することもできます。
interface Animal {
name : string;
legs : number;
eyes : number;
}
interface Dog extends Animal {
bark : () => void
}
interface Cat extends Animal {
meow : () => void;
}
function getAnimal() : Dog | Cat {
let choice = Math.random();
if ( choice > 0.5){
const dog : Dog = {
name : 'Labrador',
legs : 4,
eyes : 2,
bark : () => console.log("Woof")
}
return dog;
}else {
const cat : Cat = {
name : 'Labrador',
legs : 4,
eyes : 2,
meow : () => console.log("Meow")
}
return cat;
}
}
const animal = getAnimal();
// Property 'meow' does not exist on type 'Dog | Cat'.
animal.meow();
// Property 'bark' does not exist on type 'Dog | Cat'.
animal.bark();
上記の例では、プロパティ meow や関数 bark は解決できません。TypeScriptコンパイラは推論する内容が不明確であるためです。getAnimal 関数は Dog | Cat の2つの型のユニオンを返すため、コンパイラが混乱します。
コンパイラに適切な型を認識させるには、型ガードまたは型チェックを導入する必要があります。
if ( 'meow' in animal){
animal.meow();
} else if ( 'bark' in animal){
animal.bark();
}
上記は、型の安全性を確保するために型チェックを実施する方法の例です。meow 属性と bark 属性は、animal オブジェクトに存在するかどうかがチェックされ、それに応じて呼び出されます。
TypeScript で typeof を使用してタイプをチェックする
typeof キーワードを使用して、変数のタイプを判別できます。ただし、範囲は非常に限られています。プリミティブ型のチェックに使用できます。
typeof キーワードによって返される値は、string、number、bigint、boolean、symbol、undefined、object、または function のいずれかです。
typeof キーワードは、すべての複合型と null 値をオブジェクトとして返します。
const displayBill = ( amount : string | number ) => {
if ( typeof amount === 'string') {
amount = Number(amount);
}
let tax = (18.5 * amount) / 100;
console.log('Bill : '+ amount + " $");
console.log('Tax : '+ tax + " $");
console.log('Total Payable : '+ (amount + tax) + " $");
}
displayBill(23.5);
出力：
"String conversion being done!"
"Bill : 23.5 $"
"Tax : 4.3475 $"
"Total Payable : 27.8475 $"
したがって、上記の例では、typeof キーワードを使用して変数 amount のタイプをチェックし、チェック後に変換が行われました。このチェックは、tax 変数を計算するために必要です。この変数では、amount のタイプが number である必要があります。
TypeScript で instanceof を使用する
instanceof キーワードは、いくつかのクラスに対応する変数をチェックします。次のタイプガードは、クラスオブジェクトとしてインスタンス化される変数に使用されます。
class User {
name : string;
amountDue : number;
constructor( name : string, amount : number){
this.name = name;
this.amountDue = amount;
}
}
class UserCredit extends User {
constructor( user : User) {
super(user.name, user.amountDue);
}
generateCredit(amount : number) {
this.amountDue += amount;
return this.amountDue;
}
}
class UserDebit extends User {
constructor( user : User) {
super(user.name, user.amountDue);
}
settleDebt(){
this.amountDue = 0;
}
}
const TransactionSystem = () => {
const user : User = {
name : 'Alex',
amountDue : 0
}
const option = Math.random();
if ( option > 0.5) {
// settle debts
const userDebt = new UserDebit(user);
userDebt.settleDebt();
return userDebt;
} else {
// increase credit
const userCredit = new UserCredit(user);
userCredit.generateCredit(500);
return userCredit;
}
}
const UserTransaction = TransactionSystem();
if ( UserTransaction instanceof UserDebit) {
console.log('Credit balance successfully debited');
} else if (UserTransaction instanceof UserCredit) {
console.log("Credit limit increased")
}
TypeScript で in キーワードを使用してタイプを確認する
in を使用して、特定の属性が型またはインターフェイスに存在するかどうかを確認できます。したがって、if-else などの条件ステートメントとともに使用して、型を確認し、アクションを実行してさらにアクションを実行できます。以下に、これを実現する方法の例を示します。
interface Person {
name : string;
age : number;
}
const person : Person = {
name : "Alex",
age : 30
}
console.log("name" in person); // true
console.log("address" in person); // false
