TypeScript Tutorial: O que é, Interface, Enum, Array com Exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

O que é o TypeScript?

TypeScript é um superconjunto de JavaRoteiro. TypeScript é uma linguagem de programação orientada a objetos pura que suporta classes, interfaces, etc. É uma linguagem de código aberto desenvolvida por Microsoft que compila estaticamente o código para JavaScript. Pode ser facilmente executado em um navegador ou Nodejs.

Todos os recursos mais recentes lançados para ECMAScript são suportados em TypeScript e além disso TypeScript tem seus próprios recursos orientados a objetos, como interfaces, declaração de ambiente, herança de classe, etc., o que ajuda no desenvolvimento de um aplicativo grande que, de outra forma, seria difícil de fazer em JavaScript.

Como baixar e instalar TypeScript

Aqui está o processo passo a passo para baixar e instalar TypeScript:

Etapa 1) Baixe e instale Nodejs

Acesse o site oficial do nodejs: https://nodejs.org/en/download/ e baixe e instale o nodejs de acordo com seu sistema operacional. As instruções detalhadas sobre como baixar o nodejs estão disponíveis aqui: https://www.guru99.com/download-install-node-js.html

Etapa 2) Verifique a versão do Nodejs e do npm

Para verificar se o nodejs e o npm estão instalados basta verificar a versão no seu prompt de comando.

D:\typeproject>node --version
V10.15.1

D:\typeproject>npm --version
6.4.1

Então você tem o nodejs v10 e o npm 6 instalados.

Passo 3) TypeScript Instalação

Crie o diretório do seu projeto typeproject/ e execute npm init, conforme mostrado no comando abaixo:

npm init

Passo 4) Inicie a instalação

Agora, criaremos o pacote .json que armazenará as dependências do nosso projeto.

Depois de terminar, instale TypeScript como se segue:

npm -g install typescript

O comando acima cuidará da instalação TypeScript. Adicionar “-g” ao npm install irá instalar TypeScript globalmente. A vantagem de usar -g é que você poderá usar TypeScript tsc comando de qualquer diretório, pois é instalado globalmente. Caso você não queira instalar TypeScript use globalmente o comando abaixo:

npm --save install typescript

Crie a pasta src/ no diretório do seu projeto e na pasta src/ crie TypeScript arquivo test.ts e escreva seu código.

Exemplo: teste.ts

function add(x:number, y:number) {
	return x+y;
}

let sum = add(5,10);
console.log(sum);

Compilar TypeScript código para Javascript

Para compilar o código acima use o seguinte comando:

If TypeScript está instalado globalmente, use o comando abaixo:

tsc test.ts

If TypeScript está instalado localmente em seu projeto, você precisa usar o caminho de TypeScript de node_modules conforme mostrado:

node_modules/typescript/bin/tsc test.ts

O comando acima criará um arquivo test.js e terá o código compilado em javascript.

Exemplo: teste.js

function add(x, y) {
    return x + y;
}
var sum = add(5, 10);
console.log(sum);

Execute Javascript usando Nodejs

Neste curso TypeScript tutorial, executaremos test.js em nodejs da seguinte maneira:

D:\typeproject\src>node test.js
15

O valor consolado é exibido na execução de test.js

Execute JavaScript no navegador

Exemplo:

<html>
<head></head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

Execute Javascript usando Nodejs

Compilar TypeScript código para Javascript usando a versão EcmaScript

TypeScript suporta todos os recursos Ecmascript lançados, e os desenvolvedores podem usar o mesmo enquanto codificam. Mas nem todos os novos recursos suportam navegadores mais antigos, devido ao qual você precisa compilar o javascript para uma versão mais antiga do Ecmascript. TypeScript fornece opções de compilador que podem fazer isso.

Exemplo: teste.ts

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

Para compilar para a versão ES de sua escolha, você pode usar a opção target ou t em seu comando da seguinte maneira:

tsc --target ES6  test.ts

OR

tsc -t ES6 test.ts

Por padrão, o alvo é ES3. Caso queira alterá-lo, você pode usar o comando acima.

No momento usaremos ES6 neste TypeScript tutorial como alvo:

tsc --target ES6  test.ts

test.ts para test.js

var addnumbers = (a, b) => {
    return a+b;
}

addnumbers(10, 20);

O código permanece como está, pois a função de seta que você usou é um recurso do ES6 e a mesma quando compilada para ES6 não é alterada.

Por padrão, o destino é ES3, portanto, sem o destino, você obtém test.js como:

var addnumbers = function (a, b) {
    return a + b;
};
addnumbers(10, 20);

Então aqui, a seta gorda foi alterada para uma função anônima normal.

ARTIGOS RELACIONADOS

Variáveis ​​em TypeScript

Variáveis são usados ​​para armazenar valores, e o valor pode ser uma string, um número, um booleano ou uma expressão. Quando se trata de variáveis ​​em TypeScript, eles são semelhantes a JavaScript. Então vamos aprender a declarar e atribuir valor a variáveis ​​em TypeScript.

Variáveis ​​não podem ser usadas em código sem definição. Para declarar uma variável você pode usar

var palavra-chave,

deixar palavra chave

const palavra chave

Trabalhando com variáveis ​​em TypeScript é semelhante ao javascript, e usuários familiarizados com javascript acharão muito fácil. Apenas variáveis ​​como deixar const não são muito usados ​​em comparação com var.

Declarando variáveis ​​usando var

Sintaxe:

var firstname = "Roy";

Vamos dar uma olhada em alguns TypeScript exemplos para entender o funcionamento da palavra-chave var e também o escopo das variáveis ​​​​declaradas usando var palavra chave.

1 exemplo:

var  k = 1; // variable k will have a global scope

function test() {
    var c = 1; // variable c is local variable and will be accessible inside function test, it will not be available outside the function.
    return k++;
}

test(); // output as  1
test(); // output as 2
alert(c); // will throw error , Uncaught ReferenceError: c is not defined

2 exemplo: 

var t = 0; // variable t is declared in global scope.
function test() {    
    var t = 10; //variable t is again redeclared inside function with value 10, so here t is local to the function and changes done to it will remain inside the function.
    return t;
}
test(); // will return 10.
console.log(t); // will console 0.

3 exemplo:

var i = 0;
function test() {
    if (i>0) {
      var t = 1;
    }
    return t;
}

test(); // the value returned will be undefined. The if-block has the variable which gets executed when I> 0. Over here the if-block is not expected but you are still having a reference to the variable t, and it returns undefined, this is because var defined variables once defined inside a function will have reference to it inside the function.  
i++; // here value of i is incremented.
test(); // since i >0 the if block is executed and value returned is 1.

Declarando variáveis ​​usando let

A TypeScript a sintaxe para let é fornecida abaixo:

Sintaxe:

let name="Roy";

O trabalho de deixar variável é quase igual a var, mas com uma pequena diferença e entenderá o mesmo usando um TypeScript exemplo.

Exemplo:

let i = 1;
function test() {
    if (i>0) {
	  let t = 1;
    }
    return t;
}

test(); // throws an error : Uncaught ReferenceError: t is not defined.

Acima TypeScript exemplo gera um erro, mas o mesmo teria funcionado bem se fosse com o var palavra-chave. Variáveis ​​usando deixar estão disponíveis dentro do escopo do bloco declarado, por exemplo, a variável t está disponível apenas dentro do bloco if e não para toda a função.

Além disso, se acontecer de você declarar uma variável dentro de qualquer função, ou for-loop, while-loop, TypeScript bloco switch, ele estará disponível para você apenas dentro desse bloco e nenhuma referência a ele fora do bloco, e gerará um erro se a variável for usada fora do bloco. Esta é a principal diferença entre as variáveis ​​​​declaradas com palavras-chave var e let.

Declarando variáveis ​​usando const

Const significa variáveis ​​constantes. Elas são semelhantes às variáveis ​​let, com a única diferença é que, uma vez atribuído um valor a ele, ele não pode ser alterado.

Sintaxe:

const name;

Exemplo:

const age = "25"; 
age="30"; // will throw an error : Uncaught TypeError: Assignment to constant variable.

Portanto, os usuários podem usar variáveis ​​const apenas nos casos em que sabem que não precisam alterar os valores atribuídos a elas.

Tipos em TypeScript

TypeScript é uma linguagem fortemente tipada, enquanto javascript não é. Uma variável que tem um valor definido como uma string pode ser alterada para um número sem problemas em Javascript. O mesmo não é tolerado em TypeScript. em TypeScript, o tipo de uma variável é definido apenas no início e, durante a execução, ela deve manter o mesmo tipo. Qualquer alteração levará a um erro de compilação durante a compilação para JavaScript.

Seguem os tipos:

  • Sessão
  • Tanga
  • Booleano
  • Qualquer
  • vazio

Sessão

Aceita apenas números inteiros, flutuantes, frações, etc.

Sintaxe:

let a :number = 10;
let marks :number = 150;
let price :number = 10.2;

Aqui estão alguns métodos importantes que podem ser usados ​​em tipos de número:

toFixed () – converterá o número em uma string e manterá as casas decimais fornecidas ao método.

para sequenciar() – este método irá converter o número em uma string.

valor de() – este método retornará o valor primitivo do número.

paraPrecisão() – este método formatará o número em um comprimento especificado.

Exemplo: com todos os métodos String

let _num :number = 10.345;
_num.toFixed(2); // "10.35"
_num.valueOf(); // 10.345
_num.toString(); // "10.345"
_num.toPrecision(2); //"10"

Tanga

String: apenas valores de string

Sintaxe:

let str :string = "hello world";

Aqui estão alguns métodos importantes que podem ser usados ​​em tipos String:

  • divisão() – este método dividirá a string em um array.
  • charAt() – este método fornecerá o primeiro caractere do índice fornecido.
  • índice de() – este método fornecerá a posição da primeira ocorrência para o valor atribuído a ela.
  • Substituir () – este método leva 2 strings, primeiro o valor a ser pesquisado na string e se presente irá substituí-lo pelo 2º e devolverá uma nova string.
  • aparar () – este método removerá espaços em branco de ambos os lados da string.
  • substr() – este método fornecerá uma parte da string que dependerá da posição dada como início e fim.
  • substring() – este método fornecerá uma parte da string que dependerá da posição dada como início e fim. O caractere na posição final será excluído.
  • para Maiúsculas() -converterá a string para maiúscula
  • para Minúsculas() – converterá a string para minúscula.

Exemplo:

let _str:string = "Typescript";

_str.charAt(1); // y
_str.split(""); //["T", "y", "p", "e", "s", "c", "r", "i", "p", "t"]
_str.indexOf("s"); //4 , gives -1 is the value does not exist in the string.
_str.replace("Type", "Coffee"); //"Coffeescript"
_str.trim(); //"Typescript"
_str.substr(4, _str.length); //"script"
_str.substring(4, 10); //"script"
_str.toUpperCase();//"TYPESCRIPT"
_str.toLowerCase();//"typescript"

Booleano

Aceitará valores lógicos como verdadeiro, falso, 0 e 1.

Sintaxe:

let bflag :boolean = 1;
let status :boolean = true;

Qualquer

Sintaxe:

let a :any = 123
a = "hello world"; // changing type will not give any error.

Variáveis ​​declaradas usando qualquer type pode considerar a variável como string, número, array, booleano ou void. TypeScript não gerará nenhum erro em tempo de compilação; isso é semelhante às variáveis ​​declaradas em JavaScript. Use qualquer tipo de variável somente quando não tiver certeza sobre o tipo de valor que será associado a essa variável.

vazio

O tipo Void é usado principalmente como um tipo de retorno em uma função que não tem nada para retornar.

Sintaxe:

function testfunc():void{
 //code here
}

TypeScript Ordem

An Ordem in TypeScript é um tipo de dado em que você pode armazenar vários valores. Vamos aprender como declarar e atribuir valores para operações de Array em TypeScript.

Como TypeScript é uma linguagem fortemente tipada, você tem que dizer qual será o tipo de dado dos valores em um array. Caso contrário, ele irá considerá-lo como do tipo any.

Declarar e inicializar um array

Sintaxe:

let nameofthearray : Array<typehere>

Exemplo

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers

let month_year: Array<string | number> = ["Jan", 2015, "Feb", 2016]; //array with string and numbers mixed.

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; //array of all types boolean, string , number , object etc.

Diferentes maneiras de acessar elementos de um array

Para obter os elementos de um array, os valores começam do índice 0 até o comprimento do array.

Exemplo:

let years: Array<number> = [ 2016, 2017, 2018, 2019]; //array will all numbers			
years[0]; // output will be 2016			
years[1]; // output will be 2017			
years[2]; // output will be 2018			
years[3]; // output will be 2019

Você também pode obter os elementos de um array usando TypeScript for laço como mostrado abaixo:

utilização TypeScript para laço

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i=0;i<=years.length; i++) {
     console.log(years[i]);
}
Output:
2016
2017
2018
2019

Usando loop for-in

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let i in years) {
     console.log(years[i])
}

Output:
2016
2017
2018
2019

Usando loop for-of

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
for (let  i of years) {
     console.log(i)
}
Output:
2016
2017
2018
2019

Usando o loop foreach

let years: Array<number> = [ 2016, 2017, 2018, 2019]; 
years.forEach(function(yrs, i) {
  console.log(yrs);
});
Output:
2016
2017
2018
2019

TypeScript Métodos Array

TypeScript O objeto Array possui muitas propriedades e métodos que ajudam os desenvolvedores a lidar com arrays de maneira fácil e eficiente. Você pode obter o valor de uma propriedade especificando arrayname.property e a saída de um método especificando array name.method().

propriedade comprimento

=> Se você quiser saber o número de elementos em um array, você pode usar a propriedade length.

Revmétodo diferente

=> Você pode reverter a ordem dos itens em um array usando um método reverso.

Método de classificação

=> Você pode classificar os itens em um array usando o método sort.

Método pop

=> Você pode remover o último item de um array usando um método pop.

Shift método

=> Você pode remover o primeiro item de um array usando o método shift.

Método push

=> Você pode adicionar valor como o último item do array.

método concat

=> Você pode juntar dois arrays em um elemento de array.

Exemplo de propriedade de comprimento

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.length);  // 12

Exemplo para método reverso

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.reverse());  //  ["Dec", "Nov", "Oct", "Sept", "Aug", "July", "June", "May", "April", "March", "Feb", "Jan"]

Exemplo para método de classificação

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.

console.log(months.sort()); // ["April", "Aug", "Dec", "Feb", "Jan", "July", "June", "March", "May", "Nov", "Oct", "Sept"]

Exemplo para método pop

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.				

console.log(months.pop()); //Dec

Exemplo para método shift

let months: Array<string> = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; //array with all string values.			

console.log(months.shift()); // Jan

Exemplo para método push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019]; //array will all numbers			
console.log(years.push(2020)); 			
years.forEach(function(yrs, i) {			
  console.log(yrs); // 2015 , 2016,2017, 2018, 2019,2020				
});

Exemplo para método concat

let array1: Array<number> = [10, 20, 30]; 			
let array2: Array<number> = [100, 200, 300];			
console.log(array1.concat(array2)); //[10, 20, 30, 100, 200, 300]

Classe em TypeScript

TypeScript é um superconjunto de JavaScript, então tudo o que for possível fazer em JavaO script também é possível em TypeScript. Classe é um novo recurso adicionado do ES6 em diante, portanto, no início JavaO script da funcionalidade do tipo de classe foi tentado usando uma função com funcionalidade de protótipo para reutilizar o código. Usando a classe, você pode ter nosso código quase próximo de linguagens como java, c#, python, etc., onde o código pode ser reutilizado. Com o recurso de classe em TypeScript/JavaScript, torna a linguagem muito poderosa.

Definindo uma classe em TypeScript

Aqui está uma sintaxe básica de classe em TypeScript:

class nameofclass {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class
}

Exemplo: um exemplo prático em Class

class Students {
    age : number;
    name : string;
    roll_no : number;
    
    constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

    getRollNo(): number {
        return this.roll_no;
    }

    getName() : string {
        return this.name;
    }

    getAge() : number {
        return this.age;
    }
}

No exemplo acima, você tem uma classe chamada Alunos. Possui propriedades idade, nome e roll_no.

Construtor em um TypeScript Aula

O exemplo da classe Alunos que definimos acima tem um construtor conforme mostrado abaixo:

constructor(age: number, name:string, roll_no: number) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }

O método construtor possui parâmetros age, name e roll_no. O construtor se encarregará de inicializar as propriedades quando a classe for chamada. As propriedades são acessadas usando esse palavra-chave. Exemplo this.age para acessar a propriedade age, this.roll_no para acessar roll_no, etc. Você também pode ter um construtor padrão, conforme mostrado abaixo:

constructor () {}

Métodos dentro de um TypeScript Aula

No exemplo da classe Students existem métodos definidos, por exemplo getRollNo(), getName(), getAge() que são usados ​​para fornecer detalhes das propriedades roll_no, name e age.

getRollNo(): number {
        return this.roll_no;
}

getName() : string {
	return this.name;
}

getAge() : number {
	return this.age;
}

Criando Instância de Classe em TypeScript

Exemplo:

In TypeScript para criar uma instância de uma classe você precisa usar o operador new. Quando criamos uma instância de uma classe usando o operador new obtemos o objeto que pode acessar as propriedades e métodos da classe como mostrado abaixo:

let student_details = new Students(15, "Harry John", 33);
student_details.getAge(); // 15
student_details.getName(); // Harry John

Compilando TypeScript Classe para JavaScript

Você pode usar o comando tsc conforme mostrado abaixo para compilar para Javascript.

Command: tsc  Students.ts

A saída de Javascript o código na compilação é mostrado abaixo:

var Students = /** @class */ (function () {
    function Students(age, name, roll_no) {
        this.age = age;
        this.name = name;
        this.roll_no = roll_no;
    }
    Students.prototype.getRollNo = function () {
        return this.roll_no;
    };
    Students.prototype.getName = function () {
        return this.name;
    };
    Students.prototype.getAge = function () {
        return this.age;
    };
    return Students;
}());

In Javascript, a classe é convertida em uma função auto-invocada.

Herança de classe

As classes podem ser herdadas usando o estender palavra-chave em TypeScript.

Sintaxe de herança de classe:

class A {
     //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

class B extends A {
 //define your properties here

    constructor() {
     // initialize your properties here
    }
 
   //define methods for class

}

classe B será capaz de compartilhar classe A métodos e propriedades.

Aqui está um exemplo prático de uma classe usando Herança

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24);
_std1.getAge(); // output is 24
_std1.setMarks(500);
_std1.getMarks(); // output is 500

Você tem duas classes, Pessoa e Aluno. A classe Student estende Person, e o objeto criado em Student é capaz de acessar seus próprios métodos e propriedades, bem como a classe que ele estendeu.

Agora vamos adicionar mais algumas alterações à classe acima.

Exemplo:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }

    getAge(): number {
        return this.age;
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);
    }
    getMarks(): number {
        return this.tmarks;
    }

    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getAge(); // output is 24
_std1.getMarks(); // output is 500

A mudança que você adicionou em comparação com o exemplo anterior é que existe um construtor definido na classe Student. O construtor deve usar os mesmos parâmetros da classe base e adicionar quaisquer parâmetros adicionais próprios, se houver.

In TypeScript você precisa chamar super todos os parâmetros como os parâmetros básicos nele. Esta deve ser a primeira coisa a ser feita dentro do construtor. O super executará o construtor da classe estendida.

Modificadores de acesso em TypeScript

TypeScript suporta modificadores de acesso públicos, privados e protegidos aos seus métodos e propriedades. Por padrão, se os modificadores de acesso não forem fornecidos, o método ou propriedade será considerado público e será facilmente acessível a partir do objeto da classe.

No caso de modificadores de acesso privado, eles não estão disponíveis para serem acessados ​​a partir do objeto da classe e devem ser usados ​​apenas dentro da classe. Eles não estão disponíveis para a classe herdada.

No caso de modificadores de acesso protegidos, eles devem ser usados ​​dentro da classe e da classe herdada e não serão acessíveis a partir do objeto da classe.

Exemplo:

class Person {
    protected name: string;
    protected age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    private getName(): string {
        return this.name;
    }

    getDetails(): string {
        return "Name is "+ this.getName();
    }
}

class Student extends Person {
    tmarks: number;
    constructor(name: string, age: number, tmarks: number) {
        super(name, age);  
        this.tmarks = tmarks;    
    }
    getMarks(): number {
        return this.tmarks;
    }

    getFullName(): string {
        return this.name;
    }
    
    setMarks(tmarks) {
        this.tmarks = tmarks;
    }
}

let _std1 = new Student('Sheena', 24, 500);
_std1.getMarks(); // output is 500
_std1.getFullName(); // output is Sheena
_std1.getDetails(); // output is Name is Sheena
  • Privado: propriedades ou métodos não podem ser acessados ​​pelo objeto da classe e também pela classe derivada, eles devem ser usados ​​internamente dentro da classe.
  • Protegido: propriedades e métodos também não podem ser acessados ​​pelo objeto criado. Eles são acessíveis de dentro da classe e disponíveis para a classe que os estende.
  • Público: propriedades e métodos são declarados sem qualquer palavra-chave. Eles são facilmente acessados ​​usando o objeto da classe de fora.

Interface em TypeScript

Uma das principais características do TypeScript é interfaces. A interface é um conjunto de regras definidas que precisam ser implementadas pela entidade que a utiliza. A entidade pode ser uma classe, função ou variável. Uma interface pode ser composta de propriedades e métodos. Você pode definir propriedades como opcionais usando a sintaxe “?” para essa propriedade ou método. A interface adiciona uma verificação de tipo forte para qualquer função, variável ou classe que implemente a interface.

Sintaxe de uma interface em TypeScript

interface Dimension {
    width: string;
    height: string;
}

Você definiu uma interface chamada Dimension que possui propriedades largura e altura, e ambas possuem tipo como uma string.

Agora esta interface pode ser implementada por uma variável, uma função ou uma classe. Aqui está o exemplo de variável que implementa a interface Dimension.

Exemplo:

interface Dimension {
    width: string;
    height: string;
}

let _imagedim: Dimension = {
    width: "100px",
    height: "200px"
};

A assinatura da dimensão da interface possui largura e altura, e ambas são obrigatórias. Caso durante a implementação da interface alguma propriedade seja perdida ou o tipo seja alterado, ocorrerá um erro de tempo de compilação ao compilar o código para javascript.

O código acima, quando compilado em javascript, fica assim:

var _imagedim = {
    width: "100px",
    height: "200px"
};

Vamos agora ver como usar uma interface com uma função.

Usando Interface em uma função como tipo de retorno

Exemplo:

interface Dimension {
    width: string;
    height: string;
}

function getDimension() : Dimension {
    let width = "300px";
    let height = "250px";
    return {
        width: width,
        height: height
    }
}

No exemplo acima, a interface Dimension é implementada na função getDimension() como tipo de retorno. O tipo de retorno de getDimension() deve corresponder às propriedades e ao tipo mencionados para Interface Dimension.

O código compilado para Javascript será a seguinte:

function getDimension() {
    var width = "300px";
    var height = "250px";
    return {
        width: width,
        height: height
    };
}

Durante a compilação, se o tipo de retorno não corresponder à interface, ocorrerá um erro.

Interface como parâmetro de função

interface Dimension {
    width: string;
    height: string;
}

function getDimension(dim: Dimension) : string {
    let finaldim  = dim.width +"-"+ dim.height;
    return finaldim;
}

getDimension({width:"300px", height:"250px"}); // will get "300px-250px"

No exemplo acima, você usou Interface Dimension como parâmetro para a função getDimension(). Ao chamar a função, você precisa ter certeza de que o parâmetro passado para ela corresponde à regra de interface definida.

O código compilado para Javascript será a seguinte:

function getDimension(dim) {
    var finaldim = dim.width + "-" + dim.height;
    return finaldim;
}
getDimension({ width: "300px", height: "250px" });

Interface de implementação de classe

Para fazer uso da interface com uma classe, você precisa usar a palavra-chave implementa.

Sintaxe para classe implementando uma interface:

class NameofClass implements InterfaceName {
}

O exemplo a seguir mostra o funcionamento da interface com a classe.

interface Dimension {
    width : string,
    height: string,
    getWidth(): string; 
}

class Shapes implements Dimension {
    width: string;
    height: string;
    constructor (width:string, height:string) {
        this.width = width;
        this.height = height;
    }
    getWidth() {
        return this.width;
    }
}

No exemplo acima, você definiu a dimensão da interface com as propriedades largura e altura, ambas do tipo string e um método chamado getWidth() que tem valor de retorno como uma string.

O código compilado para Javascript será a seguinte:

var Shapes = /** @class */ (function () {
    function Shapes(width, height) {
        this.width = width;
        this.height = height;
    }
    Shapes.prototype.getWidth = function () {
        return this.width;
    };
    return Shapes;
}());

Funções em TypeScript

Funções são conjuntos de instruções executadas para realizar uma tarefa. Em Javascript, a maior parte do código é escrita na forma de funções e desempenha um papel importante. Em TypeScript, você tem classes, interfaces, módulos, namespaces disponíveis, mas ainda assim, as funções desempenham um papel importante. A diferença entre a função em javascript e TypeScript function é o tipo de retorno disponível com TypeScript função.

JavaFunção de script:

function add (a1, b1) { 
   return a1+b1;
}

TypeScript função:

function  add(a1 : number, b1: number) : number {
    return a1 + b1;
}

Nas funções acima, o nome da função é adicionado, os parâmetros são a1 e b1 ambos têm um tipo como número e o tipo de retorno também é um número. Se acontecer de você passar uma string para a função, ocorrerá um erro em tempo de compilação ao compilá-la para JavaRoteiro.

Fazendo chamada para a função: add

let  x = add(5, 10) ;  // will return 15
let  b = add(5); // will throw an error : error TS2554: Expected 2 arguments, but got 1.
let c = add(3,4,5); // will throw an error : error TS2554: Expected 2 arguments, but got 3.
let t = add("Harry", "John");// will throw an error :  error TS2345: Argument of type '"Harry"' is not assignable to parameter of type 'number'.

Os parâmetros a1 b1 são parâmetros obrigatórios e gerarão um erro se não forem recebidos dessa maneira. Além disso, o tipo de parâmetro e o tipo de retorno são muito importantes e não podem ser alterados depois de definidos.

Parâmetros opcionais para uma função

Em javascript, todos os parâmetros para as funções são opcionais e considerados como indefinidos se não forem passados. Mas o mesmo não é o caso com TypeScript, depois de definir os parâmetros você precisa enviá-los também, mas caso queira manter algum parâmetro opcional, você pode fazer isso usando? contra o nome do parâmetro, conforme mostrado abaixo:

function getName(firstname: string, lastname?: string): string {
    return firstname + lastname;
}

let a = getName("John"); // will return Johnundefined.
let b = getName("John", "Harry"); // will return JohnHarry
let c = getName("John", "H", "Harry"); // error TS2554: Expected 1-2 arguments, but got 3.

Observe que os parâmetros opcionais devem ser definidos apenas em uma função, você não pode ter o primeiro parâmetro como opcional e o segundo parâmetro como obrigatório. Quando você chamar a função com um compilador de parâmetro, ocorrerá um erro. Portanto é necessário manter os parâmetros opcionais no final.

Atribuir valores padrão aos parâmetros

Você pode atribuir valores padrão aos parâmetros conforme mostrado abaixo:

function getName(firstname: string, lastname = "Harry"): string {
    return firstname + lastname;
}

let a = getName("John"); // will return JohnHarry
let b = getName("John", "H"); // will return JohnH

Semelhante aos parâmetros opcionais, aqui também os parâmetros inicializados padrão devem ser mantidos no final de uma função.

Parâmetros de repouso

Você viu como TypeScript lida com parâmetros obrigatórios, parâmetros opcionais e parâmetros inicializados com valor padrão. Agora, daremos uma olhada nos parâmetros de descanso. Parâmetros restantes são um grupo de parâmetros opcionais definidos juntos e são definidos usando três pontos (…) seguido pelo nome do parâmetro, que é um array.

Sintaxe para parâmetros Rest:

function testFunc(a: string, ...arr: string[]) :string {
    return a + arr.join("");
}

Conforme mostrado acima, os demais parâmetros são definidos usando (…param-name); o parâmetro restante é uma matriz prefixada por três pontos. O array terá todos os parâmetros passados ​​para ele. Você pode chamar a função, conforme mostrado no exemplo abaixo:

Exemplo:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday"); // will get output as MondayTuesdayWednesdayThursday

Funções de seta

Uma função de seta é um dos recursos importantes lançados no ES6 e está disponível em TypeScript também. A sintaxe da função de seta contém uma seta grossa, devido à qual a função é chamada de função de seta.

Sintaxe da função de seta:

var nameoffunction = (params) => {				
 // code here			
}

Qual é a utilidade da função Arrow?

Vamos dar uma olhada no exemplo para entender o caso de uso da função Arrow:

Exemplo:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(function () {
            console.log(this.score);    // gives undefined.    
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Você criou uma função anônima que possui uma propriedade this. Score inicializa em 0 e um método getScore que possui internamente um setTimeout, e em 1 segundo consola this.score. O valor consolado fornece indefinido, embora você tenha this.score definido e inicializado. A questão aqui é comis palavra-chave. A função dentro de setTimeout tem o seu próprio this, e tenta referenciar a pontuação internamente, e como não está definido, dá indefinido.

O mesmo pode ser feito usando a função Arrow conforme mostrado abaixo:

var ScoreCard = function () {
    this.score = 0;

    this.getScore = function () {
        setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);
    }    
}

var a = new ScoreCard();
a.getScore();

Você alterou a função dentro de setTimeout para uma função de seta conforme mostrado abaixo:

setTimeout(()=>{
            console.log(this.score);   // you get  0
        }, 1000);

Uma função de seta não possui sua própria esse definido e compartilha seu pai esse, portanto, variáveis ​​declaradas externamente são facilmente acessíveis usando this dentro de uma função de seta. Eles são úteis por causa da sintaxe mais curta, bem como para retornos de chamada, manipuladores de eventos, funções internas de temporização, etc.

TypeScript Enums

TypeScript Enum é um objeto que possui uma coleção de valores relacionados armazenados juntos. Javascript não suporta enumerações. A maior parte linguagem de programação como Java,C, C++ suporta TypeScript Enum e também está disponível com TypeScript também. Enums são definidos usando a palavra-chave enum.

Como declarar um Enum?

Sintaxe:

enum NameofEnum {
   value1,
   value2,
    ..
}

Exemplo: Enum

enum Directions {
North,
South,
East,
West
}

No exemplo acima, você definiu uma enumeração chamada Directions. O valor fornecido é Norte, Sul, Leste, Oeste. Os valores são numerados de 0 para o primeiro valor na enumeração e posteriormente incrementados em 1 para o próximo valor.

Declare um Enum com um valor numérico

Por padrão, se um enum não receber nenhum valor, ele o considerará um número começando em 0. O exemplo a seguir mostra um enum com um valor numérico.

enum Directions {
North = 0,
South = 1, 
East =2,
West =3
}

Você também pode atribuir um valor inicial à enumeração e os próximos valores da enumeração obterão os valores incrementados. Por exemplo:

enum Directions {
North = 5,
South, // will be 6
East, // 7
West // 8
}

Agora, o valor enum Norte começa com 5, então Sul obterá o valor 6, Leste = 7 e Oeste = 8.

Você também pode atribuir valores de sua escolha em vez de usar os padrões. Por exemplo:

enum Directions {
North = 5,
South = 4,
East = 6,
West = 8
}

Como acessar um Enum?

O exemplo a seguir mostra como usar Enum em seu código:

enum Directions {
    North,
    South,
    East,
    West
}

console.log(Directions.North); // output is  0
console.log(Directions["North"]); // output is 0
console.log(Directions[0]); //output is North

O código compilado para javascript é o seguinte:

var Directions;
(function (Directions) {
    Directions[Directions["North"] = 0] = "North";
    Directions[Directions["South"] = 1] = "South";
    Directions[Directions["East"] = 2] = "East";
    Directions[Directions["West"] = 3] = "West";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Como Javascript não suporta enums, ele converte o enum em funções auto-invocadas, conforme mostrado acima.

Declare um Enum com um valor de string

Você pode atribuir valores de string de sua escolha, conforme mostrado no exemplo abaixo:

Exemplo:

enum Directions {
    North = "N",
    South = "S",
    East = "E",
    West = "W"
}

console.log(Directions.North); // output is N
console.log(Directions["North"]); // output is N
console.log(Directions[0]); // output is North

O código compilado para javascript é o seguinte:

var Directions;
(function (Directions) {
    Directions["North"] = "N";
    Directions["South"] = "S";
    Directions["East"] = "E";
    Directions["West"] = "W";
})(Directions || (Directions = {}));
console.log(Directions.North);
console.log(Directions["North"]);
console.log(Directions[0]);

Quais são os módulos em TypeScript?

Os arquivos criados em TypeScript possuem acesso global, o que significa que variáveis ​​declaradas em um arquivo são facilmente acessadas em outro arquivo. Essa natureza global pode causar conflitos de código e problemas de execução em tempo de execução. Você tem funcionalidade de módulo de exportação e importação que pode ser usada para evitar conflitos de variáveis ​​​​globais e funções. Este recurso está disponível em JavaScript com lançamento ES6 e também suportado em TypeScript.

Por que você precisa de módulos em TypeScript?

O exemplo a seguir mostra o problema sem módulos:

Exemplo test1.ts

let age : number = 25;

Você definiu uma idade variável do tipo número em test1.ts.

Exemplo test2.ts

No arquivo test2.ts você pode acessar facilmente a variável idade definido em test1.ts e também modifique-o conforme mostrado abaixo:

age = 30; // changed from 25 to 30.
let _new_age = age;

Portanto, o caso acima pode criar muitos problemas, pois as variáveis ​​estão disponíveis globalmente e podem ser modificadas.

Com Módulos, o código escrito permanecerá no local do arquivo e não poderá ser acessado fora dele. Para acessar qualquer coisa do arquivo, ele deve ser exportado usando a palavra-chave export. It é usado quando você deseja que a variável, classe, função ou interface seja usada em outro arquivo. Importar é usado quando você deseja acessar a variável, classe, interface ou função exportada também. Fazendo isso, o código escrito permanece intacto dentro do arquivo, e mesmo que você defina os mesmos nomes de variáveis, elas não se misturam e se comportam localmente no arquivo onde são declaradas.

Usando Exportar e Importar

Existem muitas maneiras de exportar e importar. Portanto, discutiremos aqui a sintaxe que é mais usada.

A sintaxe para importação e exportação 1:

export  nameofthevariable or class name or interface name etc

//To import above variable or class name or interface you have to use import as shown below:
 

Import {nameof thevariable or class name or interfacename} from "file path here without.ts"

Aqui está um exemplo prático usando exportação e importação.

Exemplo:

teste1.ts

export let age: number = 25;

A palavra-chave Export é usada para compartilhar a variável idade em outro arquivo.

teste2.ts

import { age } from "./test1"
let new_age :number = age;

A palavra-chave Import é usada para acessar o idade variável e você precisa especificar o local do arquivo conforme mostrado acima.

Sintaxe para importação e exportação 2:

Existe outra forma de exportar e importar e a sintaxe da mesma é mostrada abaixo:

export = classname;

import classname = require(“file path of modulename”)

Quando você estiver usando exportar = para exportar seu módulo, a importação deve usar require(“file path of modulename”) para importá-lo.

Aqui está um exemplo prático mostrando o caso acima:

Cliente.ts

class Customer {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    getName(): string {
        return this.name;
    }
}

export = Customer;

testeCustomer.ts

import Customer = require("./Customer");

let a = new Customer("Harry", 30);
alert(a.getName());

Carregador de módulo

Os módulos não podem funcionar sozinhos, então você precisa do carregador de módulos para localizar as dependências de importação, como você viu em TypeScript exemplos mostrados acima. O carregador de módulo disponível é CommonJS para nodejs e Require.js para execução no navegador.

Para compilar o código usando o módulo CommonJS, use o seguinte comando:

tsc --module commonjs testCustomer.ts

Para compilar o código usando o módulo Requirejs, use o seguinte comando:

tsc --module amd testCustomer.ts

Os arquivos dependentes serão convertidos em arquivo js com o comando acima.

Exemplo testCustomer.ts para testCustomer.js usando Requirejs

define(["require", "exports", "./Customer"], function (require, exports, Customer) {
    "use strict";
    exports.__esModule = true;
    var a = new Customer("Harry", 30);
    alert(a.getName());
});

Exemplo de Customer.ts para Customer.js usando Requirejs

define(["require", "exports"], function (require, exports) {
    "use strict";
    var Customer = /** @class */ (function () {
        function Customer(name, age) {
            this.name = name;
            this.age = age;
        }
        Customer.prototype.getName = function () {
            return this.name;
        };
        return Customer;
    }());
    return Customer;
});

Para testá-lo usando require.js, você precisa criar um arquivo chamado main.js, que tenha referência às dependências conforme mostrado.

Aqui está a estrutura de pastas:

src/
    Customer.js
    testCustomer.js
    main.js
    require.js  // you can get this file from github or npm install requirejs
    test.html

principal.js

define(function (require) {
    var customer = require("./Customer");
    var testCustomer = require("./testCustomer");
});

teste.html

<!DOCTYPE html>			
<html>			
<head>			
    <title>TypeScript Module testing using Requirejs</title>			
    <script data-main="main" src="require.js"></script>			
</head>			
<body>			
    <h3>Testing modules using Requirejs</h3>			
</body>			
</html>

Carregador de módulo

Namespaces em TypeScript

Namespace é basicamente uma coleção de classes, interfaces, variáveis ​​e funções juntas em um arquivo.

Sintaxe de namespace

namespace name{

export class {
}

export interface {
}

export const constname;

}

O código relacionado está disponível em um namespace.

Exemplo funcional de namespace: testnamespace.ts

namespace StudentSetup {

    export interface StudDetails {
        name: string;
        age: number;
    }

    export function addSpace(str) { // will add space to the string given
        return str.split("").join(" ");
    }

    export class Student implements StudDetails {
        name: string;
        age: number;

        constructor(studentdetails: StudDetails) {
            this.name = studentdetails.name;
            this.age = studentdetails.age;
        }

        getName(): string {
            return this.name;
        }
    }
}

O nome do namespace é Configuração do aluno, você adicionou uma interface StudDetails , função addSpace e uma classe chamada Student.

Acessando o Namespace

A seguir está o código onde você está usando o namespace Configuração do aluno.

testStudentSetup.ts

let a = new StudentSetup.Student({ name: "Harry", age: 20 });

console.log("The name is :" + StudentSetup.addSpace(a.getName()));

A classe, interface, uma função disponível dentro de um namespace deve ser referida usando o nome do exemplo de namespace StudentSetup.addSpace para acessar a função, StudentSetup.Student para acessar a aula.

Você pode compilar os dois arquivos em um js conforme mostrado abaixo:

tsc --outFile namespace.js testnamespace.ts  testStudentSetup.ts

Verifique a saída no prompt de comando usando o comando abaixo:

node namespace.js

Ele exibirá a saída como:

The name is: H a r r y

Declarações Ambientais em TypeScript

TypeScript permite que você use arquivos javascript de terceiros usando declaração de ambiente. A vantagem desse recurso é que você não precisa reescrever e ainda usar todos os recursos da biblioteca em TypeScript.

Sintaxe Ambiental

Para declarar o módulo ambiente:

declare module moduleName {
   //code here
}

O arquivo ambiente deve ser salvo como:

filename.d.ts

Para usar o arquivo nome do arquivo.d.ts no seu .ts você precisa referenciá-lo como:

/// <reference path="filename.d.ts"/>

A declaração do tipo de ambiente em TypeScript terá uma referência à biblioteca de terceiros e irá re-declarar as funções necessárias com seu próprio tipo. Por exemplo, considere que você tem uma pequena biblioteca javascript, como mostrado abaixo:

Terceiro JavaArquivo de script: testString.js

Exemplo: testString.js

var StringChecks = {
    isString: function (str) {
        return typeof str === "string";
    },

    convertToUpperCase: function (str) {
        return str.toUpperCase();
    },

    convertToLowerCase: function (str) {
        return str.toLowerCase();
    },

    convertToStringBold: function (str) {
        return str.bold();
    }
};

Você tem um objeto chamado StringChecks que possui funções como isString, convertToUpperCase, convertToLowerCase e converToStringBold.

Criação do Módulo Ambiente em TypeScript

Agora criaremos um módulo de ambiente que terá referência às funções js acima e também adicionará verificação de tipo conforme nossos requisitos.

Nome do arquivo: tstring.d.ts

declare module TestString {

    export interface StringsFunc {
        isString(str: string): boolean;
        convertToUpperCase(str: string): string;
        convertToLowerCase(str: string): string;
        convertToStringBold(str: string): string;
    }
}

declare var StringChecks: TestString.StringsFunc;

Você deve definir um nome de módulo como TestString e exportar a interface StringsFunc.

isString (str: string): booleano

=> Isso usará param como uma string e o tipo de retorno será booleano. Ao usar em seu arquivo .ts, caso você passe o parâmetro como um número ou qualquer coisa diferente de string, ocorrerá um erro de tipo de compilação.

convertToUpperCase(str:string): string

=> Isso pegará o argumento como string e retornará uma string. O mesmo vale para convertToLowerCase(str:string)
: corda; e convertToStringBold (str: string): string
;

Como no arquivo javascript você tem o nome do objeto como StringChecks, finalmente precisamos referir o mesmo no arquivo .d.ts que é feito como:

declare var StringChecks: TestString.StringsFunc;

Usando o módulo Ambiente em TypeScript

Agora aqui está o arquivo test.ts onde usaremos o arquivo ambiente tstring.d.ts

Exemplo: teste.ts

/// <reference path="tstring.d.ts"/>
let str1 = StringChecks.isString("Hello World");
console.log(str1);
let str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
let str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
let str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Compilar TypeScript tsc test.ts para test.js

/// <reference path="tstring.d.ts"/>
var str1 = StringChecks.isString("Hello World");
console.log(str1);
var str2 = StringChecks.convertToUpperCase("hello world");
console.log(str2);
var str3 = StringChecks.convertToLowerCase("HELLO");
console.log(str3);
var str4 = StringChecks.convertToStringBold("Hello World");
console.log(str4);

Agora você pode usar test.js no arquivo html e também no arquivo de biblioteca testString.js

<html>			
<head>			
    <title>Test TypeScript Ambient</title>			
    <script src="testStrings.js"></script>			
    <script src="test.js"></script>			
</head>			
<body>			
</body>			
</html>

Esta é a saída vista no console:

true			
HELLO WORLD			
hello			
<b>Hello World</b>

TypeScript História

Vamos ver marcos importantes da história de TypeScript:

  • Após dois anos de desenvolvimento interno na Microsoft. TypeScript 0.9, lançado em 2013
  • Suporte adicional para genéricos TypeScript 1.0 foi lançado na Build 2014
  • Em julho de 2014, um novo TypeScript veio um compilador cinco vezes mais rápido que a versão anterior.
  • Em julho de 2015, suporte para módulos ES6, palavra-chave namespace, para, claro, decoradores.
  • Em novembro de 2016, um recurso adicionado como tipos de chave e pesquisa de tipos mapeados e restante.
  • Em 27 de março de 2018, os tipos condicionais, a chave aprimorada com suporte a tipos de interseção adicionados no TypeScript.

Por que usar TypeScript?

Aqui estão vantagens/benefícios importantes do uso TypeScript

  • Projeto grande e complexo em JavaOs scripts são difíceis de codificar e manter.
  • TypeScript ajuda muito na organização do código e ainda elimina a maioria dos erros durante a compilação.
  • TypeScript suporta bibliotecas JS e documentação de API
  • É uma linguagem de script opcionalmente digitada
  • TypeScript O código pode ser convertido em simples JavaCódigo de Script
  • Melhor estruturação de código e técnicas de programação orientada a objetos
  • Permite melhor suporte à ferramenta de tempo de desenvolvimento
  • Ele pode estender a linguagem além dos decoradores padrão, async/await

Quem usa TypeScript?

Aqui estão algumas aplicações mais comuns de TypeScript:

  • A equipe angular usa TypeScript.
  • Instalação de NodeJS e NPM
  • TypeScript Instalação
  • Compilar TypeScript código para Javascript
  • Executar código usando Nodejs
  • Execute Javascript no navegador
  • Compilar TypeScript código para Javascript usando a versão EcmaScript
  • Você pode facilmente compilar código escrito em TypeScript para JavaScript usando NodeJS.
  • Então, para trabalhar com TypeScript você precisa primeiro baixar e instalar o NodeJS.

Resumo

  • TypeScript é um superconjunto de JavaRoteiro. TypeScript é uma linguagem de programação orientada a objetos pura que suporta classes, interfaces, etc.
  • TypeScript suporta todos os recursos do Ecmascript lançados e os desenvolvedores podem usá-los durante a codificação.
  • Variáveis ​​são usadas para armazenar valores, e o valor pode ser uma string, um número, um booleano ou uma expressão.
  • In TypeScript, o tipo de uma variável é definido apenas no início e, durante a execução, ela deve manter o mesmo tipo. Qualquer alteração levará a um erro de compilação durante a compilação para JavaScript.
  • Uma matriz em TypeScript é um tipo de dados onde você pode armazenar vários valores.
  • Classe é um novo recurso adicionado do ES6 em diante, portanto, no início JavaA funcionalidade do tipo de classe foi tentada usando uma função com funcionalidade de protótipo para reutilizar o código.
  • TypeScript suporta modificadores de acesso públicos, privados e protegidos aos seus métodos e propriedades.
  • Uma das principais características do TypeScript são interfaces. A interface é um conjunto de regras definidas que precisam ser implementadas pela entidade que a utiliza.
  • Funções são conjuntos de instruções executadas para realizar uma tarefa.
  • TypeScript Enum é um objeto que possui uma coleção de valores relacionados armazenados juntos.