TypeScript

@guiseek

/guiseek

Guilherme

Siquinelli

Engenheiro Web

na @betrybe

Co-fundador da comunidade

DevParana

O que é JavaScript?

Uma breve história

Maio de 1995

Tudo aconteceu em seis meses.

Marc Andreessen, fundador da Netscape Communications e parte da ex-equipe da Mosaic, tinha a visão de que a web precisava de uma forma de se tornar mais dinâmica.

Brendan Eich

Foi quando o pai do JavaScript  entrou em cena, contratado pela Netscape Communications para desenvolver um Scheme para o navegador.
Scheme é um dialeto Lisp e vem com muito pouco peso sintático.

Guerra

O Java, nascida na época, estava começando a ganhar força.

A Sun Microsystems fazia um grande esforço para isso e a Netscape estava prestes a colocar o Java no navegador.

IE

Embora o Netscape estivesse rapidamente se tornando o navegador preferido na época, o Internet Explorer também estava sendo desenvolvido pela Microsoft.

Algum tempo depois

Uma nova versão, ES4.

...ES5

...ES6

JavaScript

  • Linguagem de script para  simples trechos de código para navegadores da Web.
     
  • Cada dia mais popular, ajuda criar experiências interativas.

Novas tentativas de tipagem

  • Google Closure Compiler + JSDocs
     
  • ECMAScript proposal: Typed Objects Proposal
     
  • Web Assembly + SIMD.js
     
  • Microsoft TypeScript
     
  • Facebook Flow
     
  • ECMAScript proposal: Types as Comments

TypeScript

  • Superconjunto sintático estrito de JavaScript , ele adiciona tipagem estática.

  • Considerada pelo público a 2ª linguagem "mais amada" em 2020 no Stack Overflow.

Código aberto

Criado por Anders Hejlsberg

Arquiteto do C#, criou o Delphi e Turbo Pascal

TypeScript é JavaScript com sintaxe para tipos.

Fortemente tipada e se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.

O TypeScript foi usado por 78% dos entrevistados do State of JS de 2020 , com 93% dizendo que o usariam novamente.

O TypeScript recebeu o prêmio de “Tecnologia Mais Adotada” com base no crescimento ano a ano.

Adiciona sintaxe adicional ao JavaScript para oferecer suporte a uma integração concisa com o editor.

Detecte erros no início do seu editor.

O código TypeScript é convertido em JavaScript, que é executado em qualquer lugar que o JavaScript seja executado: em um navegador, em Node.js ou Deno e em seus aplicativos.

O TypeScript entende JavaScript e usa inferência de tipos para fornecer ótimas ferramentas sem código adicional.

Aprenda
Parquinho
Download

Pode ser adotado de forma gradual

Aplique tipos ao seu projeto JavaScript de forma incremental, cada etapa melhora o suporte do editor e melhora sua base de código.

function compact(arr: string[]) {
	if (arr.length > 10)
		return arr.slice(0, 10)
	return arr
}

Vamos pegar esse código JavaScript incorreto e ver como o TypeScript pode detectar erros em seu editor.

// @ts-check
 
function compact(arr) {
	if (orr.length > 10)
	// Cannot find name 'orr'.
		return arr.trim(0, 10)
	return arr
}

Também podemos usar @ts-check para validar código em JavaScript

interface Account {
	id: number
	displayName: string
	version: 1
}
 
function welcome(user: Account) {
	console.log(user.id)
}

Descreva a forma de objetos e funções em seu código.

type Result = "pass" | "fail"
 
function verify(result: Result) {
	if (result === "pass") {
		console.log("Passed")
	} else {
		console.log("Failed")
	}
}

Possibilitando ver documentação e erros ainda no editor.

{ts,js}config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "emitter.ts",
    "program.ts",
    "commandLineParser.ts",
    "tsc.ts",
    "diagnosticInformationMap.generated.ts"
  ]
}

Usando a propriedade

"files"
{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Usando a propriedade

"includes"
npm i typescript
tsc --init
code src/main.ts
tsc --init
Made with Slides.com