TypeScript - Type Compatibility
TypeScript is a language that adds static typing to JavaScript, enabling developers to write more robust and maintainable code. However, TypeScript also has some features that make it more flexible and expressive than other statically typed languages, such as type compatibility.
Type compatibility is the ability of TypeScript to check whether two types are compatible with each other, based on their structure and members. This means that you can assign a value of one type to a variable of another type, as long as the value has all the required properties and methods of the target type.
For example, consider the following code:
interface Pet {
name: string;
}
class Dog {
name: string;
}
let pet: Pet;
pet = new Dog();
To check whether Dog can be assigned to Pet, TypeScript compares the members of both types, and sees that they both have a name property of type string. Therefore, TypeScript allows the assignment, as the value of type Dog has all the required properties of the type Pet.
Type compatibility is very powerful, as it allows you to write more generic and reusable code, and to use different types interchangeably. However, type compatibility is not based on the names or the inheritance relationships of the types, but only on their structure and members. This means that two types may be compatible even if they have different names or origins, as long as they have the same shape.
In this article, you will learn how TypeScript performs type compatibility checks, and how to use them effectively in your TypeScript projects. You will also learn the difference between subtype and assignment compatibility, and the rules and limitations of type compatibility.
How TypeScript performs type compatibility checks
TypeScript uses two main mechanisms to perform type compatibility checks: structural subtyping and structural assignment.
Structural subtyping
Structural subtyping is the mechanism that TypeScript uses to check whether a type is a subtype of another type, based on their structure and members. A subtype is a type that has all the properties and methods of another type, plus some additional ones. For example, Dog is a subtype of Pet, because it has all the properties and methods of Pet, plus some additional ones.
Structural subtyping is used in various places in TypeScript, such as:
To check whether a type A is a subtype of another type B, TypeScript compares the members of both types, and sees if A has at least the same members as B. For example, consider the following code:
interface Pet {
name: string;
makeSound(): void;
}
class Dog implements Pet {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Woof!");
}
fetch() {
console.log("Fetch!");
}
}
function greet(pet: Pet) {
console.log(`Hello, ${pet.name}!`);
pet.makeSound();
}
let dog = new Dog("Lassie");
greet(dog); // OK
To check whether Dog is a subtype of Pet, TypeScript compares the members of both types, and sees that Dog has all the members of Pet, plus an additional member fetch. Therefore, TypeScript allows the assignment of dog to pet, and the call of greet with dog as an argument.
Note that TypeScript does not care about the extra member fetch in Dog, as it is not required by Pet. Only the members of the target type (Pet in this case) are considered when checking for compatibility.
Structural assignment
Structural assignment is the mechanism that TypeScript uses to check whether a type can be assigned to another type, based on their structure and members. Assignment is a broader concept than subtyping, as it allows some operations that are not safe in a strict subtyping system. For example, assignment allows assigning to and from any, and to and from enum with corresponding numeric values.
Structural assignment is used in various places in TypeScript, such as:
To check whether a type A can be assigned to another type B, TypeScript compares the members of both types, and sees if A has at least the same members as B, with some additional rules and exceptions. For example, consider the following code:
interface Pet {
name: string;
}
let pet: Pet;
let dog = { name: "Lassie", owner: "Rudd Weatherwax" };
pet = dog; // OK
To check whether dog can be assigned to pet, TypeScript compares the members of both types, and sees that dog has all the members of pet, plus an additional member owner. Therefore, TypeScript allows the assignment, as the value of type Dog has all the required properties of the type Pet.
However, this assignment is only allowed because dog is not explicitly typed. If we add a type annotation to dog, TypeScript will report an error:
interface Pet {
name: string;
}
let pet: Pet;
let dog: { name: string; owner: string } = {
name: "Lassie",
owner: "Rudd Weatherwax",
};
pet = dog; // Error: Type '{ name: string; owner: string; }' is not assignable to type 'Pet'.
This is because TypeScript has a stricter rule for object literals: they can only specify known properties, and any extra properties will cause an error. This rule helps to prevent typos and bugs in object literals, and also allows TypeScript to infer more specific types for them.
Another example of structural assignment is the assignment of enum values to numeric values, and vice versa:
enum Color {
Red,
Green,
Blue,
}
let color: Color;
let number: number;
color = 1; // OK
number = Color.Green; // OK
This is because TypeScript treats enum values as numbers, and allows assigning to and from them. However, this may not be what you want, as you may lose some information or safety by doing so. To avoid this, you can use the const modifier to make the enum values immutable and incompatible with numbers:
const enum Color {
Red,
Green,
Blue,
}
let color: Color;
let number: number;
color = 1; // Error: Type '1' is not assignable to type 'Color'.
number = Color.Green; // Error: Type 'Color.Green' is not assignable to type 'number'.
How to use type compatibility effectively
Type compatibility is a useful feature, but it also requires some care and attention when using it. Here are some tips and best practices to help you use type compatibility effectively in your TypeScript projects.
Use interfaces to define contracts
One of the main benefits of type compatibility is that it allows you to define contracts between different parts of your code, using interfaces. An interface is a type that describes the shape of an object, without providing any implementation details. For example, consider the following code:
interface Pet {
name: string;
makeSound(): void;
}
function greet(pet: Pet) {
console.log(`Hello, ${pet.name}!`);
pet.makeSound();
}
class Dog implements Pet {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Woof!");
}
}
class Cat implements Pet {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Meow!");
}
}
let dog = new Dog("Lassie");
let cat = new Cat("Garfield");
greet(dog); // OK
greet(cat); // OK
The interface Pet defines a contract that any object that implements it must have a name property and a makeSound method. The function greet accepts any object that satisfies this contract, and calls its methods. The classes Dog and Cat implement the interface Pet, and provide their own implementations of the methods. The variables dog and cat can be passed to the function greet, as they are compatible with the interface Pet.
Using interfaces to define contracts is a good practice, as it makes your code more modular, reusable, and testable. You can also use interfaces to define generic types, which can accept any type that satisfies a certain contract. For example, consider the following code:
interface Comparable<T> {
compareTo(other: T): number;
}
function max<T extends Comparable<T>>(a: T, b: T): T {
return a.compareTo(b) > 0 ? a : b;
}
class Point implements Comparable<Point> {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
compareTo(other: Point): number {
return this.x * this.x + this.y * this.y - (other.x * other.x + other.y * other.y);
}
}
let p1 = new Point(1, 2);
let p2 = new Point(3, 4);
let p3 = max(p1, p2); // OK
The interface Comparable<T> defines a contract that any type that implements it must have a compareTo method that takes another value of the same type and returns a number. The function max accepts any type that extends this contract, and returns the maximum value based on the compareTo method. The class Point implements the interface Comparable<Point>, and provides its own implementation of the compareTo method. The variables p1 and p2 can be passed to the function max, as they are compatible with the interface Comparable<Point>. Use type aliases and intersections to combine types Another benefit of type compatibility is that it allows you to combine types using type aliases and intersections. A type alias is a name that you can use to refer to another type, without creating a new type. An intersection is a type that combines two or more types, and has all the properties and methods of all the types.
For example, consider the following code:
interface Pet {
name: string;
}
interface Animal {
makeSound(): void;
}
// Create a type alias for Pet & Animal
type PetAnimal = Pet & Animal;
// Create a class that implements PetAnimal
class Dog implements PetAnimal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Woof!");
}
}
// Create a variable of type PetAnimal
let pet: PetAnimal;
pet = new Dog("Lassie"); // OK
The type alias PetAnimal is a name that refers to the intersection of Pet and Animal. The intersection Pet & Animal is a type that has all the properties and methods of both Pet and Animal. The class Dog implements PetAnimal, and provides its own implementations of the properties and methods. The variable pet is of type PetAnimal, and can be assigned a value of type Dog, as it is compatible with PetAnimal.
领英推荐
Using type aliases and intersections to combine types is a good practice, as it makes your code more expressive and flexible. You can also use type aliases and intersections to create composite types, which are types that are composed of other types. For example, consider the following code:
interface Pet {
name: string;
}
interface Animal {
makeSound(): void;
}
interface Bird {
fly(): void;
}
// Create a type alias for Pet & Animal & Bird
type PetBird = Pet & Animal & Bird;
// Create a class that implements PetBird
class Parrot implements PetBird {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log("Squawk!");
}
fly() {
console.log("Fly!");
}
}
// Create a variable of type PetBird
let pet: PetBird;
pet = new Parrot("Polly"); // OK
The type alias PetBird is a name that refers to the intersection of Pet, Animal, and Bird. The intersection Pet & Animal & Bird is a type that has all the properties and methods of all three types. The class Parrot implements PetBird, and provides its own implementations of the properties and methods. The variable pet is of type PetBird, and can be assigned a value of type Parrot, as it is compatible with PetBird.
Use type guards and type assertions to narrow types
Type guards are a way to narrow down the type of a value within a conditional block, based on a runtime check. They provide a way to make more precise type distinctions and enable the compiler to infer the correct type in subsequent code blocks.
There are several ways to implement type guards in TypeScript:
typeof type guard
The typeof type guard is a built-in operator that checks the primitive type of a value, and returns a string. You can use the typeof type guard to check if a value is a string, number, boolean, bigint, symbol, undefined, or object.
For example, consider the following code:
function logLength(value: string | number) {
if (typeof value === "string") {
console.log(value.length); // Access string-specific property
} else {
console.log(value.toFixed(2)); // Access number-specific method
}
}
In this code, the typeof type guard is used to check if value is a string. If the check evaluates to true, the code block within the if statement is executed with the type narrowed down to string. Therefore, you can access the length property of value, which is specific to string type. Similarly, if the check evaluates to false, the code block within the else statement is executed with the type narrowed down to number. Therefore, you can call the toFixed method of value, which is specific to number type.
The typeof type guard is useful for checking the primitive types of values, and for avoiding errors when accessing type-specific properties or methods. However, the typeof type guard cannot check the complex types of values, such as classes, interfaces, or custom types.
instanceof type guard
The instanceof type guard is a built-in operator that checks if a value is an instance of a class, and returns a boolean. You can use the instanceof type guard to check if a value is an instance of a specific class, or a subclass of a class.
For example, consider the following code:
class Dog {
bark() {
console.log("Woof!");
}
}
class Cat {
meow() {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark(); // Access Dog-specific method
} else {
animal.meow(); // Access Cat-specific method
}
}
In this code, the instanceof type guard is used to determine if animal is an instance of Dog. If it is, the code block within the if statement is executed with the type narrowed down to Dog. Therefore, you can call the bark method of animal, which is specific to Dog class. Similarly, if it is not, the code block within the else statement is executed with the type narrowed down to Cat. Therefore, you can call the meow method of animal, which is specific to Cat class.
The instanceof type guard is useful for checking the class types of values, and for accessing class-specific properties or methods. However, the instanceof type guard cannot check the interface types of values, or the types that are not based on classes.
User-defined type guard
A user-defined type guard is a custom function that checks the type of a value at runtime, and returns a boolean. You can use a user-defined type guard to check any type of value, as long as you can write some logic to determine the type.
To define a user-defined type guard, you need to use a special return type syntax: parameterName is Type. This syntax tells TypeScript that the parameter is of the specified type if the function returns true.
For example, consider the following code:
interface Fish {
swim(): void;
}
function isFish(animal: any): animal is Fish {
return typeof animal.swim === "function";
}
function swim(animal: Fish | string) {
if (isFish(animal)) {
animal.swim(); // Access Fish-specific method
} else {
console.log("Not a fish!");
}
}
In this code, a user-defined type guard isFish is created to determine if animal has a swim method. The function uses a type assertion (animal as Fish) to access the swim property of animal, and checks if it is a function. The function also uses a special return type animal is Fish, which tells TypeScript that animal is a Fish if the function returns true.
The function swim uses the user-defined type guard isFish to check if animal is a Fish, and then calls the swim method of animal if the condition is true. TypeScript knows that animal is a Fish inside the if block, because the user-defined type guard returned true. Therefore, TypeScript allows the method call, and does not report any error.
User-defined type guards are useful for checking any type of value, and for writing custom logic to determine the type. However, user-defined type guards require more code and effort to implement, and may not be as reliable or accurate as built-in type guards.
How to use type assertions
Type assertions are a way to tell TypeScript to treat a value as a specific type, without checking it. They are similar to type casts in other languages, and provide a way to override the default type inference or to work with types that the compiler cannot determine automatically.
There are two syntaxes to use type assertions in TypeScript:
For example, consider the following code:
let value: any = "Hello";
let length: number = (<string>value).length; // Angle-bracket syntax
let length: number = (value as string).length; // As syntax
In this code, the value is of type any, which means that TypeScript does not know anything about its type. To access the length property of the value, which is specific to string type, you need to use a type assertion to tell TypeScript that the value is a string. You can use either the angle-bracket syntax or the as syntax to do so.
Type assertions are useful for working with types that the compiler cannot infer, such as any, unknown, or never. They are also useful for working with types that are not compatible with each other, such as number and string. However, type assertions are not recommended, because they can be unsafe and misleading. A type assertion does not perform any runtime check, and only affects the type system. If the value is not actually of the asserted type, the type assertion will not prevent the error, and may cause unexpected behavior or runtime exceptions.
Therefore, you should use type assertions only when you are sure about the type of the value, and when you have no other option to work with the type. You should also prefer the as syntax over the angle-bracket syntax, because the angle-bracket syntax can conflict with JSX syntax.
Conclusion
Here is a possible conclusion for the TypeScript type compatibility article:
Type compatibility is a key feature of TypeScript that allows you to assign values of different types to each other, as long as they have the same structure and members. This enables you to write more generic and reusable code, and to use different types interchangeably.
TypeScript uses two mechanisms to check type compatibility: structural subtyping and structural assignment. Structural subtyping checks whether a type is a subtype of another type, based on their members. Structural assignment checks whether a type can be assigned to another type, with some additional rules and exceptions.
TypeScript also provides several ways to narrow down the type of a value to a more specific type, using type guards and type assertions. Type guards are functions or expressions that check the type of a value at runtime, and return a boolean. Type assertions are syntaxes that tell TypeScript to treat a value as a specific type, without checking it.
Type compatibility is a powerful and flexible feature, but it also requires some care and attention when using it. You have to choose the appropriate technique and syntax for your scenario, and make sure that your code is readable, maintainable, and error-free. By understanding the rules and limitations of type compatibility, you can ensure that your code is type safe and error-free.
thank you for reading this long article, if you find it informative, please share it and tell me in the comments any note or feedback so i can modify these articles in the future.