Interfaces em Typescript: O que são e como usá-las?

23 de fevereiro de 2022

13 de outubro de 2022

Pooja Sharma

Interfaces em Typescript: O que são e como usá-las?

O que é Typescript?

O texto datilografado é um “Digitado” da linguagem JavaScript cujo objetivo é introduzir a tipagem estática na linguagem. TypeScript adiciona tipos ao Código JavaScript para acelerar o desenvolvimento identificando problemas antes que o código JavaScript seja executado. No entanto, às vezes isso pode ficar confuso e essa é a razão pela qual também é odiado por alguns programadores.

Interfaces

Interfaces, nas palavras mais simples, descrevem a estrutura do objeto, o que significa que descreve como o objeto deve se parecer. Dentro TypeScript, podemos trabalhar com “Interfaces”. No TypeScript, uma interface contém apenas a definição de métodos e propriedades, não sua implementação. É a funcionalidade da classe que realiza a conexão entre a interface fornecendo a conexão com todos os parâmetros da interface.

Criando uma interface

Ao criar uma nova interface, o interface palavra-chave deve ser usada. Esta palavra-chave deve ser seguida pelo nome da interface. As chaves devem conter a forma de um objeto, as propriedades e os tipos. As propriedades e tipos são especificados como “valor chave” pares ao criar a Interface.

Abaixo está um exemplo de interfaces TypeScript simples. 

// Create an empty interface:
interface EmptyObject {}

// Create interface Person:
interface Person {
  name: string;
  age: number;
  hairColor: string;
  weight: number;
  height: number;
}

// Create interface Car:
interface Car {
  model: string;
  manufacturer: string;
  numberOfWheels: number;
  type: string;
}

// Create interface User:
interface User {
  name: string;
  pass: string;
  email: string;
}

Além disso, leia: Principais estruturas de desenvolvimento de aplicativos da Web para 2022: obtenha o máximo de escalabilidade com custos mais baixos

Propriedades Opcionais em Interfaces

A interface declarada também pode ter propriedades opcionais. Para declarar uma propriedade opcional, o ponto de interrogação (?) no final do nome da propriedade é usado durante a declaração.

Por exemplo, se pegarmos a Interface Pessoa que declaramos acima-

// Create interface Person:
interface Person {
  name: string;
  weight? : number;
  age: number;
  hairColor? : string;
   height: number;
}

No exemplo acima, a interface Pessoa tem duas propriedades opcionais com o “?”. isso é 'cor de cabelo' e 'peso,, enquanto as outras três propriedades são as propriedades necessárias.

Anotação de Interface em Componentes Funcionais

Uma vez que o Person interface foi definida, agora pode ser usada como um tipo, também pode ser anotado o parâmetro da função com o nome da interface:

Vejamos novamente a Interface da Pessoa que declaramos acima:

interface PersonData {
  name: string;
 weight? : number;
  age: number;
  hairColor? : string; 
  height: number;
}

function getPersonDetail(person: PersonData) {
    return `${person.name} ${person.age} ${person.height}`;
}

let johnDoe = {
    name: 'John Doe',
    age: 25,
    height: 170,
};

console.log(getPersonDetail(johnDoe));

Saída:

John Doe 25 170

No exemplo acima, o compilador TypeScript verifica os parâmetros ou propriedades que são passados ​​para o getPersonDetail() função.

Se o argumento tiver duas propriedades cujos tipos são números e uma propriedade cujo tipo é uma string, o compilador TypeScript passa na verificação. Caso contrário, ele lançará um erro.

Interface como funções

Objetos, incluindo classes, não são as únicas coisas que podem utilizar interfaces. As interfaces TypeScript também podem ser usadas para anotar funções. Você pode fazer isso fornecendo à interface uma assinatura de chamada. Isso significa que você atribui a interface à assinatura da função que contém a lista de parâmetros com tipos e tipos retornados.

Por exemplo:

interface multiplyFunc {
// Specify only parameters and return type:
    (a: number, b: number, c: number): string;  
}
// Annotate the "multiply" function
// with "MultiplyFunc" interface:
const multiply: multiplyFunc = (a, b, c) => {
  return a * b * c
}

Uma coisa sobre interfaces e funções. O nome dos parâmetros em uma interface não precisa corresponder ao nome dos parâmetros na função real. Você também pode usar um nome semelhante para o parâmetro de interface e para a declaração de função. Usando a ordem, o TypeScript relacionará adequadamente os argumentos aos seus tipos. Por exemplo:

interface myFunction {
// Specify only parameters and return type:
    (a: string, b: Boolean, c: number): string;  
}
const myFunc: myFunction = (x, y, z) => {
  return `x is ${x}, y is ${y}, z is ${z}`
}
// TypeScript will correctly infer "a" to be number,
// "b" to be string and "c" to be boolean.

Além disso, leia: Custo de desenvolvimento de aplicativos da web: a discriminação de preços de 2021

Interface como tipos de classe

Uma classe cria um plano de como um objeto deve aparecer e se comportar e, em seguida, implementa esse plano definindo métodos e inicializando atributos de classe. Como resultado, quando criamos uma instância da classe, obtemos um objeto com atributos especificados e funções acionáveis.

Interface com classes JavaScript também é possível com TypeScript. A implementação de classes, por outro lado, é um pouco diferente. A interface ainda é especificada após o nome, neste caso, o nome da classe. No entanto, você não usa dois pontos entre o nome da classe e a interface.

Em vez disso, você simplesmente atualiza os dois pontos com o implementa palavra-chave. Isso instrui o TypeScript a utilizar uma interface que vem após essa palavra-chave em cada classe.

// Create interface Person:
interface Person {
  // Define some class properties
  // of type string and number:  
  name: string;
  weight? : number; 
  age: number;
  height: number;
  hairColor? : string;
}
  // Define class method that returns a string:
  sayHello: () => string;
}

// Annotate the class "Myself" with the "Person" interface:
class Myself implements Person { 
   name: string;
   weight? : number;
   age: number;
   height: number;
  hairColor? : string;
}

  // Create constructor and assign existing properties:
  constructor(name: string, age: number, weight? : number,  hairColor? : string,    height: number) {
    this.name = name
    this.weight = weight
    this.hairColor = hairColor
    this.age = age
    this.height = height 
  }

  // Define required class method:
  sayHello() {
    return `Hello, my name is ${this.name}.`
  }
}

Propriedades somente leitura

Você pode querer restringir a atualização de alguns atributos durante a criação de um objeto. As interfaces TypeScript também podem ser usadas para indicar essa finalidade. O somente leitura palavra-chave é usada antes do nome da propriedade para fazer isso. Isso instrui o TypeScript que a próxima propriedade é uma propriedade somente leitura. Você só pode definir o valor para a propriedade readonly durante a inicialização se usar a interface para anotar um objeto. O compilador TypeScript gerará um erro se você tentar alterar o valor da propriedade posteriormente.

interface CarProperties {
    readonly length: number;
    readonly width: number;
    readonly wheelbase: number;
    readonly seatingCapacity: number;
}

As propriedades somente leitura não podem ser alteradas após serem inicializadas. Os atributos comprimento, largura, distância entre eixos e capacidade de assentos nunca podem ser alterados após serem inicializados com um valor definido.

Além disso, leia: Principais erros de desenvolvimento de aplicativos da web a serem evitados em 2022

Extensão de interfaces

As interfaces de extensão podem estender qualquer outra interface para importar as propriedades dessa interface. Isso ajuda na criação de componentes pequenos e reutilizáveis. Ao estender interfaces com várias interfaces, temos que separá-las com vírgulas. Usamos palavras-chave estendidas entre a primeira interface e a segunda interface para estender suas propriedades.

// Create "Person" interface:
interface Person {
  name: string;
}

// The "Male" interface created extends the "Person" interface:
interface Male extends Person {
  gender: 'Male';
}
// In terms of Interface, this means:
// interface Male {
//   name: string;
//   gender: 'Male';
// }

// Now the "Female" interface is created to extend the "Person" interface:
interface Female extends Person {
  gender: 'Female';
}
// This Interface mean:
// interface Female {
//   name: string;
//   gender: 'Female';
// }

// Now the "Boy" interface is created to extend both “Male” and "Person" interfaces:
interface Boy extends Person, Male {
  age: number;
}
// which usually mean:
// interface Boy {
//   age: number;
//   gender: 'Male';
//   name: string;
// }

// Now the "Girl" interface is created to extend both "Female" and "Person" interfaces:
interface Girl extends Person, Female {
  age: number;
}
// which converts to:
// interface Girl {
//   age: number; 
//   gender: 'Female';
//   name: string;
// }

const akshay: Person = {
  name: 'Akshay'
}

const suraj: Male = {
  name: Suraj,
  gender: 'Male'
}

const sarah: Female = {
  name: 'Sarah',
  gender: 'Female'
}

const ahmad: Boy = {
  name: ‘Ahmad’,
  gender: 'Male',
  age: 26
}

const aayat: Girl = {
  name: 'Aayat',
  gender: 'Female',
  age: 18
}

Tipos indexáveis

Objetos indexados são os objetos cujas propriedades podem ser acessadas usando uma assinatura de índice como obj[`propriedade']. Esta é a maneira padrão de acessar elementos de array, mas você também pode fazer isso para objetos. Por exemplo, podemos definir um tipo selecioneCarro como:

Interface selectCar{
[index: number]: string
}
let cars: selectCar = ['Hatchback', 'Sedan', 'Land Rover', 'Premium']
console.log('Element at position 1', cars[1])       // 'Sedan'

Vejamos outro exemplo:

A interface com o nome PessoaObjeto define a forma de um objeto com chaves usado como um tipo de string e os valores do objeto podem ser qualquer tipo de dados. Aqui o chave A propriedade é usada apenas como um espaço reservado porque está entre colchetes.

// declare indexable interface types
Interface PersonObject {
	[key: string]: any;
}

// declare few objects of type ‘PersonObject’
Let akshay: PersonObject = { name: “Akshay Bisht”, age: 27 };
Let ahmad: PersonObject = { name: “Ahmed”, 1: 26 };

// print values
console.log(‘akshay == > ’, akshay);	
--> akshay = = > { name : ‘Akshay Bisht’, age: 27 }
console.log(‘ahmed == > ’, ahmed);
--> ahmed = = > { name : ‘Ahmed’, 1: 26 }

Além disso, leia: Como chamar a API da Web com o gancho useEffect no React TypeScript?

Interfaces genéricas

O TypeScript também permite criar os chamados "interfaces genéricas". Essas interfaces permitem que você especifique o tipo de propriedade com base em um ou mais parâmetros que você disponibiliza para a interface ao usá-la. Os genéricos do TypeScript são usados ​​quando você precisa criar componentes genéricos que funcionam com vários tipos de dados.

Por exemplo, não queremos limitar uma função para aceitar apenas números como parâmetros de entrada. Ele precisa ser estendido com base em casos de uso para aceitar tipos distintos. A especificação das Interfaces genéricas é feita usando colchetes angulares (<>) conforme mostrado no exemplo abaixo.

let cars: CarSpecification<CarModels> = Stack
let carModels = [
    {
        company: 'Tata',
        modelid: 1,
        length: 112,
    },
]
let newCar = new cars(carModels)
console.log(newCar)        --- >   // prints the value of `carModels`

Using Generics in Asynchronous tasks: 
// Create interface for PersonObject:
interface PersonObject {
  name: string;
  email: string;
}

// Create a generic interface:
interface ApiData<T> {
  payload: T[];
  code: number;	
  date: Date;
}

// Create function to fetch API
async function fetchAPI() {
  // Use ApiData "interface" and pass the "UserData" interface as argument (for T argument):
  const data: ApiData<UserData> = await fetch('/URL_endpoints')

  // The "ApiData<UserData>" converts to:
  // interface ApiDatae<T> {
  //   code: number;
  //   date: Date;
  //   payload: UserData[];
  //  }
}

Por que usar interfaces?

Um exemplo específico: As interfaces são uma maneira produtiva de especificar os tipos que outros códigos devem atender. As Interfaces permitem que o JavaScript conheça a versão digitada dos objetos que serão usados ​​na biblioteca de código.

Suponha que estamos escrevendo algum tipo de código de biblioteca, o que significa que temos que escrever esse código, pois também é válido para objetos, os objetos que possuem um determinado conjunto de propriedades. A maneira mais eficaz é especificar essas propriedades em uma interface (sem implementação, apenas uma descrição) e usar as referências aos objetos para implementar a Interface em nosso código de biblioteca.

O que ele faz é permitir que qualquer pessoa aleatória crie uma classe que implemente essa interface, e para usar um objeto da classe criada e implementá-lo, nosso código precisa trabalhar com ele.

Conclusão

As interfaces são a maneira mais eficaz de definir tipos no TypeScript. Vejamos um pequeno resumo do que aprendemos neste tutorial:

• As interfaces definem as especificações das entidades, os tipos de objetos e a implementação usando funções ou classes. Podemos especificar propriedades opcionais em uma interface usando '?' e use a palavra-chave 'readonly' para as propriedades que não podem ser alteradas (propriedades readonly) no nome da propriedade.

• Além disso, o compilador TypeScript verifica as propriedades de abundância em um artigo e comete um erro assumindo que um item contém uma propriedade que já foi definida na Interface.

• Aprendemos como definir propriedades indexáveis, parâmetros opcionais, estendendo interfaces usando interfaces.

• Classes e Funções também podem ser implementadas com uma interface. A interface contém a definição apenas para as variáveis ​​de instância de uma classe.

• Interfaces também podem ser usadas para importar as propriedades de outras Interfaces, fazemos isso usando a palavra-chave extends.

• Também podemos construir os componentes reutilizáveis ​​que podemos usar repetidamente em nossa biblioteca de código usando os genéricos com as Interfaces.

[sc name = "Desenvolvimento da web"] [add_newsletter] [add_related_page_diff_contents blog_cat = "aplicativo da web"]