TypeScript Tutorial: O que são Interface, Enum e Array?

O que é a TypeScript?

TypeScript é um superconjunto de JavaRoteiro. TypeScript É uma linguagem de programação orientada a objetos que suporta classes, interfaces e muito mais. É 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 em Node.js.

Todos os recursos mais recentes lançados para ECMAScript são suportados em TypeScripte além disso TypeScript Possui suas próprias características orientadas a objetos, como interfaces, declarações ambientais e herança de classes, que auxiliam no desenvolvimento.ping uma aplicação de grande porte que, de outra forma, seria difícil de construir em JavaScript.

A relação é unidirecional. Toda relação válida JavaO arquivo de script já é válido. TypeScript, mas o inverso não é verdadeiro, porque as anotações de tipo existem apenas em TypeScript e são apagados durante a compilação.

Por que usar TypeScript?

Aqui estão os principais benefícios de usar TypeScript:

• Projetos grandes e complexos em JavaOs scripts são difíceis de codificar e manter.
• TypeScript Isso ajuda bastante na organização do código e elimina a maioria dos erros durante a compilação, em vez de em tempo de execução.
• TypeScript Suporta bibliotecas JS e documentação de API.
• É uma linguagem de script com tipagem opcional, portanto os tipos podem ser adotados gradualmente.
• TypeScript O código pode ser convertido em texto simples. JavaCódigo de script para qualquer navegador.
• Isso proporciona melhor estruturação de código e técnicas de programação orientada a objetos.
• Isso permite um melhor suporte às ferramentas de desenvolvimento, incluindo autocompletar e refatoração segura.
• Ele pode estender a linguagem além do padrão, com recursos como decoradores.

A principal vantagem prática é o suporte do editor. Como o compilador conhece o formato de cada valor, um editor pode renomear uma propriedade em todo o projeto e informar cada local que não corresponde mais.

TypeScript História

Vejamos os marcos importantes da história de TypeScript:

• Após dois anos de desenvolvimento interno na Microsoft, TypeScript A versão 0.9 foi lançada em 2013.
• TypeScript A versão 1.0, com suporte adicional para genéricos, foi lançada na Build 2014.
• Em julho de 2014, um novo TypeScript Chegou um compilador cinco vezes mais rápido que a versão anterior.
• Em julho de 2015, foi adicionado suporte para módulos ES6, a palavra-chave namespace, for…of e decorators.
• Em novembro de 2016, foram adicionados os tipos mapeados, os tipos de chave e de pesquisa, bem como os tipos rest e spread de objetos.
• Em 27 de março de 2018, foram adicionados tipos condicionais e uma função keyof aprimorada com tipos de interseção.
• TypeScript A versão 5.0, lançada em março de 2023, modernizou os decoradores e reduziu o tamanho do pacote.
• TypeScript A versão 6.0 chegou em março de 2026 como a versão final baseada em JavaCódigo-fonte do script.
• TypeScript A versão 7.0 move o compilador para uma implementação nativa do Go, que Microsoft relata ser aproximadamente dez vezes mais rápido que a versão 6.0.

Quem usa TypeScript?

TypeScript Não é mais uma escolha de nicho. É a base de várias das ferramentas de front-end e back-end mais utilizadas, e a lista abaixo mostra onde um iniciante tem maior probabilidade de encontrá-la.

• Angular: O framework Angular é escrito em TypeScriptE espera-se também que o código da aplicação seja escrito nele.
• Projetos React e Vue: Ambos os ecossistemas enviam oficialmente TypeScript modelos, e a maioria dos modelos iniciais modernos o habilitam por padrão.
• Back-ends em Node.js: Frameworks de servidor como o NestJS são construídos em torno de TypeScript aulas e decoradores.
• Ferramentas do editor: Visual Studio Code é em si um grande TypeScript base de código, razão pela qual seu suporte a idiomas é tão completo.
• Interfaces de usuário para grandes empresas: Equipes que trabalham com muitos colaboradores adotam essa prática para detectar erros de integração antes da implantação.

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 Node.js. https://nodejs.org/en/download/Baixe e instale o Node.js para o seu sistema operacional. Instruções detalhadas estão disponíveis no guia. Como baixar e instalar o Node.js.

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

Para verificar se o Node.js e o npm estão instalados, verifique a versão no seu prompt de comando.

D:\typeproject>node --version
v22.14.0

D:\typeproject>npm --version
10.9.2

Qualquer versão LTS atual do Node funciona. TypeScript O próprio compilador requer apenas uma versão compatível do Node para ser executado.

Passo 3) TypeScript Instalação

Crie o diretório do seu projeto com o nome typeproject\ e execute o comando npm init, conforme mostrado abaixo:

npm init

Passo 4) Inicie a instalação

Isso cria o arquivo package.json, que armazenará as dependências do nosso projeto.

Após a conclusão, 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 o TypeScript tsc O comando pode ser executado a partir de qualquer diretório, pois está instalado globalmente. Caso não deseje instalá-lo, você pode fazê-lo. TypeScript Globalmente, utilize o comando abaixo:

npm install --save-dev typescript

Crie uma pasta src\ no diretório do seu projeto e, dentro de src\, crie o 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, utilize o seguinte comando.

If TypeScript Se estiver instalado globalmente, use o comando abaixo:

tsc test.ts

If TypeScript Se estiver instalado localmente no seu projeto, você precisa usar o caminho de TypeScript a partir de node_modules, como mostrado, ou execute-o através do npx:

node_modules\typescript\bin\tsc test.ts

OR

npx tsc test.ts

O comando acima criará um arquivo test.js que terá o código compilado para JavaRoteiro.

Exemplo: teste.js

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

Execute Javascript usando Nodejs

Agora vamos executar o arquivo test.js no Node.js da seguinte forma:

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

O valor passado para console.log é exibido quando test.js é executado.

Execute JavaScript no navegador

Exemplo:

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

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

TypeScript Suporta todos os recursos do ECMAScript lançados e os desenvolvedores podem usá-los durante a programação. No entanto, nem todos os novos recursos são compatíveis com navegadores mais antigos, portanto, pode ser necessário compilar para uma versão anterior do ECMAScript. TypeScript Oferece opções de compilador que fazem exatamente 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 para o compilador clássico. Caso queira alterá-lo, você pode usar o comando acima.

Atualmente, utilizaremos o ES6 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á, porque a função de seta que você usou é um recurso do ES6 e não é alterada quando compilada para ES6.

Por padrão, o alvo é ES3, portanto, sem um alvo definido, você obterá o arquivo test.js da seguinte forma:

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

Aqui, a seta grossa foi alterada para uma função anônima normal.

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 JavaScriptEntão, vamos aprender a declarar e atribuir valores a variáveis ​​em TypeScript.

As variáveis ​​não podem ser usadas no código sem serem definidas. Para declarar uma variável, você pode usar

var palavra-chave,

deixar palavra chave

const palavra chave

Trabalhando com variáveis ​​em TypeScript é similar a JavaScript e usuários familiarizados com JavaO script achará isso muito fácil. Em código moderno, deixar e const são preferidos sobre var, porque seu escopo de bloco impede toda uma classe de bugs.

Declarando variáveis ​​usando var

Sintaxe:

var firstname = "Roy";

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

1 exemplo:

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

function test() {
    var c = 1; // variable c is local and accessible only inside function test
    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; // t is redeclared inside the function, so changes stay local
    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(); // returns undefined. The if block did not run, yet t is still declared
        // because var declarations are hoisted to the whole function.
i++;    // value of i is incremented
test(); // since i > 0 the if block runs and the value returned is 1

Declarando variáveis ​​usando let

O TypeScript a sintaxe para let é fornecida abaixo:

Sintaxe:

let name = "Roy";

O trabalho do deixar A variável é quase a mesma que varMas com uma diferença importante, que o exemplo abaixo demonstra.

Exemplo:

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

test(); // throws an error: Cannot find name 't'

O referido TypeScript O exemplo gera um erro, mas o mesmo código teria funcionado com o var palavra-chave. Variáveis ​​declaradas usando deixar estão disponíveis apenas dentro do bloco em que são declaradas. Neste exemplo, t existe apenas dentro do bloco if, não em toda a função.

O mesmo se aplica dentro de qualquer função, laço `for`, laço `while` ou bloco `switch`. Uma variável `let` só está disponível dentro desse bloco, e referenciá-la fora dele gera um erro. Essa é a principal diferença entre `var` e `let`.

Declarando variáveis ​​usando const

`const` significa variáveis ​​constantes. Elas são semelhantes às variáveis ​​`let`, com a diferença de que, uma vez atribuído um valor, ele não pode ser alterado. Portanto, uma declaração `const` deve ser inicializada na mesma linha.

Sintaxe:

const name = "Roy";

Exemplo:

const age = "25";
age = "30"; // error: Cannot assign to 'age' because it is a constant

const total; // error: 'const' declarations must be initialized

Portanto, use `const` sempre que souber que o valor atribuído não será reatribuído. Observe que `const` impede a reatribuição da associação, não a modificação do objeto ao qual ela aponta.

Tipos em TypeScript

TypeScript é uma linguagem fortemente tipada, enquanto JavaO script não é. Uma variável cujo valor é definido como uma string pode ser alterada para um número sem qualquer problema em JavaRoteiro. O mesmo não é tolerado em TypeScript. em TypeScriptO tipo de uma variável é definido no início e deve manter esse tipo durante toda a execução. Qualquer alteração resulta em um erro de compilação. JavaRoteiro.

Os tipos básicos são os seguintes:

Sessão

Aceita apenas números inteiros, números de ponto flutuante, frações e valores numéricos semelhantes.

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 numéricos:

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

para sequenciar() – Este método 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 numéricos

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

Tanga

String: somente valores de texto.

Sintaxe:

let str :string = "hello world";

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

• divisão() – este método irá dividir a string em uma matriz.
• charAt() – este método retornará o caractere no índice fornecido.
• índice de() – este método fornecerá a posição da primeira ocorrência do valor fornecido.
• substituir() – este método recebe 2 strings. Ele procura o primeiro valor na string e, se presente, substitui-o pelo segundo, retornando uma nova string.
• aparar() – este método removerá o espaço em branco de ambos os lados da string.
• substr() – este método fornecerá uma parte da string, dependendo da posição inicial e do comprimento fornecido.
• substring() – este método retornará uma parte da string, dependendo das posições inicial e final. O caractere na posição final é excluído.
• para Maiúsculas() – irá converter a string para maiúsculas.
• 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 if the value does not exist
_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

Um tipo booleano aceita apenas os valores lógicos verdadeiro e falso. Ao contrário de um tipo simples. JavaEm script, os números 0 e 1 não são aceitos, pois são do tipo numérico.

Sintaxe:

let status :boolean = true;
let isDone :boolean = false;

let bflag :boolean = 1;
// error: Type 'number' is not assignable to type 'boolean'

Qualquer

Sintaxe:

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

Variáveis ​​declaradas usando o qualquer O tipo pode armazenar uma string, um número, uma matriz, um valor booleano ou um valor vazio. TypeScript não gerará nenhum erro de tempo de compilação, o que é semelhante às variáveis ​​em JavaScript. Utilize o tipo `any` somente quando não tiver certeza sobre o tipo de valor que será associado àquela variável, pois ele desativa todas as verificações daquele valor.

vazio

O tipo void é usado principalmente como o tipo de retorno de uma função que não retorna nada.

Sintaxe:

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

TypeScript Ordem

An Ordem in TypeScript é um tipo de dado no qual você pode armazenar múltiplos valores. Vamos aprender como declarar e atribuir valores para operações em arrays. TypeScript.

Como TypeScript Por ser uma linguagem fortemente tipada, você precisa especificar o tipo de dados dos valores em um array. Caso contrário, ele será tratado 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 with all numbers

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

let alltypes: Array<any> = [true, false, "Harry", 2000, { "a": "50", "b": "20" }]; // any type

Diferentes maneiras de acessar elementos de um array

Para obter os elementos de uma matriz, os valores começam no índice 0 e vão até o comprimento da matriz menos um.

let years: Array<number> = [2016, 2017, 2018, 2019];
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 uma matriz usando um TypeScript pela laço, como mostrado abaixo.

Utilizar painéis de piso ResinDek em sua unidade de self-storage em vez de concreto oferece diversos benefícios: TypeScript para laço

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

Saída:

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]);
}

Saída:

2016
2017
2018
2019

Usando loop for-of

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

Saída:

2016
2017
2018
2019

Usando o loop forEach

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

Saída:

2016
2017
2018
2019

TypeScript Métodos Array

O TypeScript O objeto array possui diversas propriedades e métodos que auxiliam os desenvolvedores a manipular arrays de forma fácil e eficiente. Você pode obter o valor de uma propriedade especificando `arrayname.property` e o resultado de um método especificando `arrayname.method()`.

Exemplo de propriedade de comprimento

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

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

Exemplo para método reverso

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

Exemplo para método de classificação

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

Exemplo para método pop

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

Exemplo para método shift

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

Exemplo para método push

let years: Array<number> = [2015, 2016, 2017, 2018, 2019];
console.log(years.push(2020)); // 6, the new length
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 JavaRoteiro, então tudo o que for possível em JavaO script também é possível em TypeScriptA classe é um recurso adicionado a partir do ES6. Anteriormente em JavaA funcionalidade de script, semelhante a uma classe, foi alcançada usando uma função com métodos protótipos para reutilizar código. Usando classes, seu código pode se aproximar de linguagens como... Java, C# e Python, onde o código pode ser facilmente reutilizado.

Definindo uma classe em TypeScript

Aqui está a sintaxe básica da 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. Ela possui as propriedades idade, nome e número_de_matrícula.

Construtor em um TypeScript Aula

A classe `Students` definida acima possui 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 os parâmetros idade, nome e número_de_matrícula. O construtor se encarrega de inicializar as propriedades quando a classe é instanciada. As propriedades são acessadas usando o esse Você pode usar palavras-chave, por exemplo, `this.age` para acessar a idade e `this.roll_no` para acessar o número de matrícula. Também é possível ter um construtor padrão, como mostrado abaixo:

constructor () {}

Métodos dentro de um TypeScript Aula

Na classe Students, existem métodos definidos, por exemplo, getRollNo(), getName() e getAge(), que retornam os valores das propriedades roll_no, name e age.

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

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

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

Criando uma instância de uma classe em TypeScript

In TypeScriptPara criar uma instância de uma classe, você usa o operador `new`. Ao criar uma instância com `new`, você obtém um objeto que pode acessar as propriedades e os 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 um TypeScript Classe para JavaScript

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

Command: tsc  Students.ts

A saída do JavaO código do script durante a 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 JavaNo script, a classe é convertida em uma função autoinvocada.

Herança de classe

As classes podem ser herdadas usando o se estende 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 funcional de uma classe que utiliza 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. Aluno estende Pessoa, e o objeto criado a partir de Aluno pode acessar seus próprios métodos e propriedades, bem como os da classe que estende.

Agora vamos adicionar 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);
        this.tmarks = tmarks; // the derived property must be assigned too
    }
    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 em relação ao exemplo anterior é um construtor definido na classe Student. O construtor recebe os mesmos parâmetros da classe base, além de quaisquer parâmetros adicionais próprios.

In TypeScript Você precisa chamar `super` com todos os parâmetros da classe base. Essa deve ser a primeira instrução dentro do construtor, pois `super` executa o construtor da classe estendida. Qualquer propriedade declarada pela classe derivada, como `tmarks`, deve então ser atribuída explicitamente; caso contrário, `getMarks` retornaria `undefined`.

Modificadores de acesso em TypeScript

TypeScript Suporta os modificadores de acesso público, privado e protegido em seus métodos e propriedades. Por padrão, se nenhum modificador de acesso for fornecido, o método ou propriedade é considerado público e é facilmente acessível a partir do objeto da classe.

No caso de modificadores de acesso privado, os membros não estão disponíveis para o objeto da classe e destinam-se a ser usados ​​apenas dentro da classe. Eles não estão disponíveis para uma classe que herda de ela.

No caso de modificadores de acesso protegidos, os membros devem ser usados ​​dentro da classe e da classe que herda dela, e não sã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

Interface em TypeScript

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

Sintaxe de uma interface em TypeScript

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

Você definiu uma interface chamada Dimension que possui as propriedades width e height, ambas do tipo string.

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

Exemplo:

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

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

A assinatura da interface Dimension possui largura e altura, e ambas são obrigatórias. Se alguma propriedade for omitida ou se um tipo for alterado, ocorrerá um erro de compilação ao compilar o código. JavaRoteiro.

O código acima, quando compilado para JavaO script tem a seguinte aparência:

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

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

Utilizando uma interface em uma função como tipo de retorno.

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 é usada como tipo de retorno da função getDimension(). O valor de retorno deve corresponder às propriedades e tipos declarados na interface.

O compilado JavaO código do script será o 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, será gerado 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"}); // "300px-250px"

No exemplo acima, você usou a interface Dimension como parâmetro para a função getDimension(). Ao chamar a função, o parâmetro passado para ela deve corresponder às regras definidas pela interface.

O compilado JavaO código do script será o seguinte:

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

Classe que implementa uma interface

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

Sintaxe para uma classe que implementa uma interface:

class NameofClass implements InterfaceName {
}

O exemplo a seguir mostra uma interface interagindo com uma 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 interface Dimension com as propriedades width e height, ambas do tipo string, e um método chamado getWidth() que retorna uma string.

O compilado JavaO código do script será o 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. JavaEm scripts, a maior parte do código é escrita na forma de funções, que desempenham um papel fundamental. TypeScript Você tem classes, interfaces, módulos e namespaces disponíveis, mas as funções ainda desempenham um papel importante. A diferença entre uma função em JavaRoteiro e TypeScript são os tipos de parâmetro e retorno disponíveis com um 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;
}

Na função acima, o nome da função é add, e os parâmetros são a1 e b1, ambos do tipo número, e o tipo de retorno também é um número. Se você passar uma string para a função, ocorrerá um erro de compilação durante a compilação para JavaRoteiro.

Fazendo uma chamada para a função: adicionar

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

Os parametros a1 e b1 São obrigatórios e causarão um erro se não forem fornecidos. Os tipos de parâmetro e o tipo de retorno são igualmente importantes e não podem ser alterados depois de definidos.

Parâmetros opcionais para uma função

In JavaEm scripts, todos os parâmetros das funções são opcionais e considerados indefinidos se não forem passados. O mesmo não se aplica em TypeScriptDepois de definir os parâmetros, você deve fornecê-los. Se quiser que um parâmetro seja opcional, adicione um ponto de interrogação após o nome do parâmetro, como mostrado abaixo:

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

let a = getName("John");              // returns Johnundefined
let b = getName("John", "Harry");     // returns 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 por último. Não é possível ter o primeiro parâmetro opcional e o segundo obrigatório, pois o compilador não saberia qual valor foi fornecido.

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

Assim como os parâmetros opcionais, os parâmetros inicializados por padrão também devem ser mantidos no final da lista de parâmetros.

Parâmetros de repouso

Você viu como TypeScript Lida com parâmetros obrigatórios, parâmetros opcionais e parâmetros com valores padrão. Agora vamos analisar os parâmetros REST. Os parâmetros REST são um grupo de parâmetros opcionais definidos em conjunto, usando três pontos (…) seguido pelo nome do parâmetro, que é uma matriz.

Sintaxe para parâmetros Rest:

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

Conforme mostrado acima, o parâmetro rest é uma matriz prefixada por três pontos. A matriz armazenará todos os argumentos restantes passados ​​para a função.

Exemplo:

let a = testFunc("Monday", "Tuesday", "Wednesday", "Thursday");
// output is 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 contém uma seta grande, que é de onde vem o nome.

Sintaxe da função de seta:

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

Qual a utilidade de uma função de seta?

Vejamos um exemplo para entender o caso de uso de uma função de seta.

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 com uma propriedade `score` inicializada com 0 e um método `getScore` que internamente usa `setTimeout` e, após um segundo, registra `this.score`. O valor registrado é `undefined`, mesmo que `this.score` esteja definido e inicializado. O problema está no... esse palavra-chave. A função dentro de setTimeout tem seu próprio this, e como score não está definido nele, o resultado é indefinido.

O mesmo pode ser feito usando uma função de seta, como 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();

Uma função de seta não possui sua própria esseEm vez disso, compartilha a variável do escopo pai, de modo que as variáveis ​​declaradas fora do escopo pai são acessíveis com `this` dentro de uma função de seta. Elas são úteis devido à sintaxe mais curta, bem como para funções de retorno de chamada, manipuladores de eventos e funções de temporização.

TypeScript Enums

A TypeScript Enum é um objeto que armazena uma coleção de valores relacionados. JavaO Script não oferece suporte nativo a enums. A maioria das linguagens de programação, como Java, C, e C++ suporte a enums e TypeScript também os torna disponíveis. 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` com os valores Norte, Sul, Leste e Oeste. Os valores são numerados a partir de 0 para a primeira entrada e aumentam em 1 para cada entrada subsequente.

Declare um Enum com um valor numérico.

Por padrão, se um membro de uma enumeração não receber um valor, ele assumirá um número a partir de 0. O exemplo a seguir mostra uma enumeração com valores numéricos explícitos.

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

Você também pode atribuir um valor inicial, e os membros seguintes receberão valores incrementais. Por exemplo:

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

Agora, o Norte começa no 5, então o Sul é 6, o Leste é 7 e o Oeste é 8.

Você também pode atribuir valores de sua escolha em vez dos valores padrão. Por exemplo:

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

Como acessar um Enum?

O exemplo a seguir mostra como usar um 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 compilado JavaO roteiro é 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 JavaO Script não suporta enums; o compilador converte o enum em uma função autoinvocável, como mostrado acima. A atribuição dupla é o que cria o mapa reverso.ping Do número de volta ao nome.

Declare um Enum com um valor de string.

Você pode atribuir valores de texto de sua escolha, como 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 undefined

O compilado JavaO roteiro é 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?

Arquivos criados em TypeScript O acesso global significa que variáveis ​​declaradas em um arquivo podem ser acessadas em outro. Essa natureza global pode causar conflitos de código e problemas de tempo de execução. A funcionalidade de exportação e importação de módulos pode ser usada para evitar conflitos de variáveis ​​e funções globais. Esse recurso foi introduzido na versão 2.0. JavaScript com a versão ES6 e também é compatível com 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 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;

Isso pode gerar muitos problemas, já que as variáveis ​​ficam disponíveis globalmente e podem ser modificadas de qualquer lugar.

Com módulosO código escrito permanece local ao arquivo e não pode ser acessado fora dele. Para compartilhar qualquer coisa de um arquivo, ele precisa ser exportado usando a palavra-chave `export`. Exportar É utilizado quando você deseja que uma variável, classe, função ou interface seja usada em outro arquivo. Importar É utilizado quando você deseja acessar um item exportado. Isso mantém o código intacto dentro do arquivo e, mesmo que você defina os mesmos nomes de variáveis, eles não serão misturados.

Usando Exportar e Importar

Existem muitas maneiras de exportar e importar dados. Abordaremos a sintaxe mais comumente utilizada.

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

export  nameofthevariable or class name or interface name etc

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

import {nameofthevariable or class name or interfacename} from "file path here without .ts"

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

teste1.ts

export let age: number = 25;

A palavra-chave export é usada para compartilhar a variável idade com 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 é a seguinte:

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(“caminho do arquivo do nome do módulo”).

Aqui está um exemplo prático que demonstra esse caso.

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 funcionam sozinhos, portanto você precisa de um carregador de módulos para localizar as dependências de importação, como visto no TypeScript Exemplos acima. Os carregadores de módulos disponíveis são CommonJS para Node.js e Require.js para execução no navegador.

Para compilar o código usando o formato de módulo CommonJS, utilize o seguinte comando:

tsc --module commonjs testCustomer.ts

Para compilar o código usando o formato de módulo RequireJS, utilize o seguinte comando:

tsc --module amd testCustomer.ts

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

Exemplo de conversão de 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 conversão 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 testar usando require.js, você precisa criar um arquivo chamado main.js que faça 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>

Namespaces em TypeScript

Um namespace reúne uma coleção de classes, interfaces, variáveis ​​e funções em um único arquivo.

Sintaxe de namespace

namespace name{

export class {
}

export interface {
}

export const constname;

}

O código correspondente está disponível em um único 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 alunoE você adicionou uma interface StudDetails, uma função addSpace e uma classe chamada Student.

Acessando um Namespace

Segue abaixo o código onde você utiliza 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 ou função disponível dentro de um namespace deve ser referenciada usando o nome do namespace, por exemplo. StudentSetup.addSpace para acessar a função e StudentSetup.Student para acessar a aula.

Você pode compilar ambos os arquivos em um único arquivo JS, como 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

Saída:

The name is :H a r r y

Declarações Ambientais em TypeScript

TypeScript permite que você use terceiros JavaArquivos de script que utilizam declarações ambientais. A vantagem desse recurso é que você não precisa reescrever a biblioteca e, ainda assim, pode usar todos os seus recursos com verificação de tipos. TypeScript.

Sintaxe Ambiental

Para declarar um módulo ambiente:

declare module moduleName {
   //code here
}

O arquivo de ambiente deve ser salvo como:

filename.d.ts

Para usar o arquivo nome do arquivo.d.ts No seu arquivo .ts, você precisa referenciá-lo da seguinte forma:

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

A declaração do tipo de ambiente em TypeScript refere-se à biblioteca de terceiros e redeclara as funções necessárias com seus próprios tipos. Por exemplo, considere o pequeno JavaBiblioteca de scripts mostrada abaixo.

Terceiro JavaArquivo de script: 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 as funções isString, convertToUpperCase, convertToLowerCase e convertToStringBold.

Criando um módulo ambiente em TypeScript

Agora vamos criar um módulo ambiente que faça referência ao JavaO script executa as funções acima e adiciona verificações de tipo conforme necessário.

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ê define um módulo chamado TestString e exporta a interface StringsFunc. Cada assinatura indica o que a função aceita e retorna:

• isString (str: string): booleano – Recebe uma string e retorna um valor booleano. Passar um número ou qualquer outro tipo de dado gera um erro de compilação.
• converterParaMaiúsculas(str: string): string – recebe uma string e retorna uma string.
• converterParaCaixaInferior(str: string): string – recebe uma string e retorna uma string.
• convertToStringBold (str: string): string – recebe uma string e retorna uma string.

Uma vez que o JavaO arquivo de script expõe o nome do objeto StringChecks, e finalmente nos referimos ao mesmo nome no arquivo .d.ts:

declare var StringChecks: TestString.StringsFunc;

Utilizando um módulo Ambient em TypeScript

Aqui está o arquivo test.ts que usa o arquivo ambiente tstring.d.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);

Compile com o comando `tsc test.ts` para gerar o arquivo `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 o arquivo test.js em um arquivo HTML juntamente com o arquivo de biblioteca testString.js.

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

Saída:

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

Para continuar, compare diretamente as duas línguas em TypeScript vs JavaScriptrevisitar JavaMétodos de matriz de script para os equivalentes não tipados usados ​​aqui, e estude loops em JavaScript e interno e externo JavaScript para os fundamentos do navegador nos quais a saída compilada se baseia.

Perguntas Frequentes