<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>transpilacao Archives - Hiago Silva Souza</title>
	<atom:link href="https://www.hiago.me/tag/transpilacao/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.hiago.me/tag/transpilacao/</link>
	<description></description>
	<lastBuildDate>Sun, 16 Sep 2018 21:20:59 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.5.5</generator>

<image>
	<url>https://www.hiago.me/wp-content/uploads/2019/01/cropped-icon-hiagus-2-32x32.png</url>
	<title>transpilacao Archives - Hiago Silva Souza</title>
	<link>https://www.hiago.me/tag/transpilacao/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">147457425</site>	<item>
		<title>TypeScript: Interface ou Classes?</title>
		<link>https://www.hiago.me/2018/09/16/typescript-interface-ou-classes/</link>
					<comments>https://www.hiago.me/2018/09/16/typescript-interface-ou-classes/#comments</comments>
		
		<dc:creator><![CDATA[Hiago Souza]]></dc:creator>
		<pubDate>Sun, 16 Sep 2018 19:47:59 +0000</pubDate>
				<category><![CDATA[Angular]]></category>
		<category><![CDATA[Ionic]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[TypeScript]]></category>
		<category><![CDATA[angular]]></category>
		<category><![CDATA[dicas]]></category>
		<category><![CDATA[programação]]></category>
		<category><![CDATA[transpilacao]]></category>
		<category><![CDATA[typescript]]></category>
		<guid isPermaLink="false">https://www.hiago.me/?p=448</guid>

					<description><![CDATA[<p>Em aula o professor citou uma diferença bem importante entre o uso de interface e de classes no TypeScript. Então resolvi fazer um post para mostrar a vocês qual é essa diferença e como ela impactar seus aplicativos. TypeScript [wp_ad_camp_3] O TypeScript é uma linguagem criada pela microsoft para ajudar na criação de aplicações JavaScript &#8230;</p>
<p>The post <a href="https://www.hiago.me/2018/09/16/typescript-interface-ou-classes/">TypeScript: Interface ou Classes?</a> appeared first on <a href="https://www.hiago.me">Hiago Silva Souza</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Em aula o professor citou uma diferença bem importante entre o uso de interface e de classes no TypeScript. Então resolvi fazer um post para mostrar a vocês qual é essa diferença e como ela impactar seus aplicativos.</p>
<h1>TypeScript</h1>
<p><span style="display: inline !important; float: none; background-color: transparent; color: #333333; cursor: text; font-family: 'Source Sans Pro',Arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[wp_ad_camp_3]</span></p>
<p style="text-align: left;">O TypeScript é uma linguagem criada pela microsoft para ajudar na criação de aplicações JavaScript adicionando recursos poderosos como por exemplo: tipagem e propriedades estáticas. As classes foram introduzidas oficialmente no ecossistema do javascript no ES6 mas por razões de compatibilidade o TypeScript permite que você faça a transpilação para o ES5 para aumentar a compatibilidade do seu código.</p>
<h1>O que é transpilação?</h1>
<p>Transpilação nada mais é que pegar seu código e converter ele para outro em tempo de compilação ou seja, o programador escreve seu código em uma linguagem e após compilar ele converte esse código para um equivalente em outra linguagem de programação.</p>
<h1>Problema?</h1>
<p><span style="display: inline !important; float: none; background-color: transparent; color: #333333; cursor: text; font-family: 'Source Sans Pro',Arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[wp_ad_camp_2]</span></p>
<p>Geralmente quando desenvolvemos fazendo o uso do TypeScript seguimos a lógica de modelar todas as nossas informações (o que é sensacional e deve ser feito) e para isso geralmente seguimos nossos conhecimento de orientação a objetos e saímos criando nossas classes de modelos (as models). O problema é que o uso de classes gera um over head muito grande no código transpilado e isso aumenta o tamanho de nossos arquivos JS e com isso o tamanho de nosso aplicativo.</p>
<p>Abaixo deixo uma imagem de uma classe no TypeScript:</p>
<p><img fetchpriority="high" decoding="async" class="alignnone size-medium wp-image-449" src="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-typescript-300x186.png" alt="" width="300" height="186" srcset="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-typescript-300x186.png 300w, https://www.hiago.me/wp-content/uploads/2018/09/exemplo-typescript.png 504w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>O resultado do código acima após ser transpilado seria um código mais ou menos como esse na imagem abaixo:</p>
<p><img decoding="async" class="alignnone size-medium wp-image-450" src="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-gerado-js-300x217.png" alt="" width="300" height="217" srcset="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-gerado-js-300x217.png 300w, https://www.hiago.me/wp-content/uploads/2018/09/exemplo-gerado-js.png 604w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>É muito código para uma definição de uma classe não concordam?</p>
<h1>E a solução?</h1>
<p><span style="display: inline !important; float: none; background-color: transparent; color: #333333; cursor: text; font-family: 'Source Sans Pro',Arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[wp_ad_camp_1]</span></p>
<p>Em JavaScript a tipagem não existe ou seja o tipo da variável é o que tem dentro dela. O TypeScript ajuda no desenvolvimento implementando controles como esses minimizando erros e melhorando a performance no desenvolvimento. Ao criar uma interface o TypeScript faz o uso dela na compilação e após isso não faz a transpilação para o JavaScript. Já as classes são definições, elas possuem métodos com regras aplicadas e isso precisa ser transpilado.</p>
<p>Mas calma, não se apavorem! Muitas classes realmente precisam e devem ser implementadas dessa forma mas nas classes de modelo não tem essa necessidade, afinal de contas não é comum você implementar métodos em suas models não é mesmo? Para isso podemos simplesmente substituir nossas classes de modelos por &#8220;interfaces&#8221; assim ao transpilar elas não vão gerar esse código &#8220;desnecessário&#8221; em nossa aplicação.</p>
<p>Abaixo deixo o exemplo de definição para a mesma classe só que fazendo uso de interface:</p>
<p><img decoding="async" class="alignnone size-medium wp-image-451" src="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-typescript-300x134.png" alt="" width="300" height="134" srcset="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-typescript-300x134.png 300w, https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-typescript.png 581w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>O resultado do código transpilado é exatamente como na imagem abaixo:</p>
<p><img loading="lazy" decoding="async" class="alignnone size-medium wp-image-452" src="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-javascript-300x44.png" alt="" width="300" height="44" srcset="https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-javascript-300x44.png 300w, https://www.hiago.me/wp-content/uploads/2018/09/exemplo-interface-javascript.png 606w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>O resultado da transpilação não gera código JavaScript isso é importante porque diminui o tamanho do build e melhora o tempo de processamento para tarefas como concat e minify.</p>
<h1>Conclusão</h1>
<p>Uma simples mudança ajuda na diminuição de tamanho do build de nossos sistemas e melhora o seu tempo de compilação. O Angular é um exemplo que usa esse pensamento em suas bibliotecas, eles simplesmente exportam as interfaces para serem utilizadas nos projetos.</p>
<p>Deixo como dica o site <a href="http://www.typescriptlang.org/play/">http://www.typescriptlang.org/play/</a> entrem lá coloquem o conteúdo de todas as suas models e façam vocês mesmo os testes.</p>
<p>The post <a href="https://www.hiago.me/2018/09/16/typescript-interface-ou-classes/">TypeScript: Interface ou Classes?</a> appeared first on <a href="https://www.hiago.me">Hiago Silva Souza</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.hiago.me/2018/09/16/typescript-interface-ou-classes/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">448</post-id>	</item>
	</channel>
</rss>
