Tipos de Interseção em TypeScript
Este artigo explica os tipos de interseção em TypeScript.
YouTube Video
Tipos de Interseção em TypeScript
No TypeScript, tipos de interseção são uma forma de combinar vários tipos para criar um novo tipo.
O que são Tipos de Interseção?
Os tipos de interseção permitem que você combine vários tipos para definir um novo tipo com todas as propriedades desses tipos. Os tipos de interseção são definidos usando o símbolo & e exigem todas as propriedades de cada tipo constituinte.
Exemplo:
1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7 name: "John Doe",
8 age: 30
9};Neste código, ao definir type C = A & B, o tipo C torna-se um tipo de objeto com as propriedades name (tipo string) e age (tipo number).
Benefícios dos Tipos de Interseção
Ao usar tipos de interseção, você pode reutilizar tipos existentes e definir tipos mais flexíveis e compostos. Isso melhora a manutenibilidade e a extensibilidade do seu código. Além disso, os tipos de interseção podem aplicar restrições de vários tipos diferentes simultaneamente, melhorando assim a segurança de tipos.
Benefícios:
- Reutilização: Ao combinar vários tipos, você pode reduzir definições redundantes e reutilizar tipos existentes.
- Segurança de Tipos: Os tipos de interseção melhoram a verificação de tipos ao permitir apenas objetos que satisfaçam as condições de vários tipos.
Casos de Uso para Tipos de Interseção
Os tipos de interseção são extremamente úteis ao estender objetos ou interfaces. Em particular, é útil quando você deseja representar objetos com várias propriedades.
Caso de Uso 1: Objetos com Múltiplas Interfaces
1interface Drivable {
2 drive(): void;
3}
4
5interface Flyable {
6 fly(): void;
7}
8
9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12 drive() {
13 console.log("Driving on the road");
14 },
15 fly() {
16 console.log("Flying in the sky");
17 }
18};
19
20car.drive(); // "Driving on the road"
21car.fly(); // "Flying in the sky"
Neste exemplo, o tipo Vehicle é definido como um tipo de interseção que combina Drivable e Flyable. Um objeto do tipo Vehicle deve implementar os métodos drive() e fly().
Caso de Uso 2: Combinando Classes e Tipos de Interseção
Ao combinar classes e tipos de interseção, é possível criar objetos que possuem as propriedades de várias interfaces.
1interface Person {
2 name: string;
3}
4
5interface Employee {
6 employeeId: number;
7}
8
9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12 constructor(public name: string, public employeeId: number) {}
13
14 getDetails() {
15 return `${this.name}, Employee ID: ${this.employeeId}`;
16 }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"
Aqui, usamos o tipo de interseção PersonEmployee de Person e Employee para fazer com que a classe CompanyWorker tenha as propriedades de ambos.
Pontos a considerar com tipos de interseção
Um ponto importante ao usar tipos de interseção é estar ciente da possibilidade de conflitos de propriedades. Se propriedades com o mesmo nome tiverem anotações de tipo diferentes entre os tipos, pode ocorrer um erro.
Exemplo de atenção:
1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8 id: 1
9};Neste exemplo, as propriedades id de A e B entram em conflito, causando um erro ao definir um objeto com o tipo C. Nesses casos, é necessária uma revisão de design para evitar conflitos de propriedades.
Exemplo de código com anotações de tipo para tipos de interseção
Por fim, aqui está um exemplo de código real com anotações de tipo.
Exemplo 1: Exibindo detalhes do objeto
1type ContactInfo = { phone: string; email: string };
2type Address = { city: string; postalCode: string };
3
4type PersonDetails = ContactInfo & Address;
5
6const details: PersonDetails = {
7 phone: "123-4567",
8 email: "example@mail.com",
9 city: "New York",
10 postalCode: "10001"
11};
12
13console.log(details);Exemplo 2: Objeto com propriedades adicionais
1interface BasicInfo {
2 name: string;
3 age: number;
4}
5
6interface WorkInfo {
7 company: string;
8 position: string;
9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14 name: "Bob",
15 age: 28,
16 company: "Tech Corp",
17 position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);Conclusão
Os tipos de interseção do TypeScript são um recurso poderoso para combinar vários tipos em um novo tipo. Isso aumenta a reutilização e a segurança do código, permitindo definições de tipos complexas. Ao aproveitar efetivamente a flexibilidade do design enquanto toma cuidado com conflitos de tipos, é possível alcançar um código robusto e altamente legível.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.