Elm - sintaxe básica

Este capítulo discute como escrever um programa simples no elm.

Step 1 − Create a directory HelloApp in VSCode

Agora, crie um arquivo - Hello.elm neste diretório.

O diagrama acima mostra a pasta do projeto HelloApp e terminal aberto em VSCode.

Step 2 − Install the necessary elm packages

O gerenciador de pacotes em elm é elm-package . Instale o pacote elm-lang / html . Este pacote nos ajudará a exibir a saída do código do elm no navegador.

Atravessar para o HelloApp pasta do projeto clicando com o botão direito em Arquivo → Abrir no prompt de comando no VSCode.

Execute o seguinte comando na janela do terminal -

C:\Users\dell\Elm\HelloApp> elm-package install elm-lang/html

Os seguintes arquivos / pastas são adicionados ao diretório do projeto na instalação do pacote.

• elm-package.json (arquivo), armazena metadados do projeto
• elm-stuff (pasta), armazena pacotes externos

A mensagem a seguir aparecerá quando o pacote for instalado com sucesso.

Step 3 − Add the following code to the Hello.elm file

-- importing Html module and the function text
import Html exposing (text)

-- create main method
main =
-- invoke text function
text "Hello Elm from TutorialsPoint"

O programa acima exibirá uma mensagem de string Hello Elm from TutorialsPoint no navegador.

Para isso, precisamos importar a função text dentro do Htmlmódulo. A função de texto é usada para imprimir qualquer valor de string no navegador. O método principal é o ponto de entrada para um programa. O método principal invoca a função de texto e passa um valor de string para ela.

Step 4 − Compile the project

Execute o seguinte comando na janela do terminal VSCode.

elm make Hello.elm

A saída do comando acima é mostrada abaixo -

//update path to the proj folder in the command elm make
C:\Users\dell\elm\HelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html

O comando acima irá gerar um index.htmlArquivo. O compilador elm converte o arquivo .elm em JavaScript e o incorpora aoindex.html Arquivo.

Step 5 − Open the index.html in the browser

Abra o arquivo index.html em qualquer navegador. A saída será como mostrado abaixo -

Comentários no Elm

Os comentários são uma forma de melhorar a legibilidade de um programa. Os comentários podem ser usados ​​para incluir informações adicionais sobre um programa, como autor do código, dicas sobre a construção de uma função, etc. Os comentários são ignorados pelo compilador.

Elm suporta os seguintes tipos de comentários -

• Comentários de uma linha (-) - Qualquer texto entre um - e o final de uma linha é tratado como um comentário.

• Comentários multilinhas ({- -}) - Esses comentários podem abranger várias linhas.

Ilustração

-- this is single line comment

{- This is a
   Multi-line comment
-}

Linhas e recuo

Elm não fornece chaves para indicar blocos de código para definições de função ou controle de fluxo. Os blocos de código são denotados por recuo de linha, que é rigidamente aplicado. Todas as instruções dentro de um bloco devem ser indentadas com o mesmo valor. Por exemplo -

module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
   else
      "x is small"

No entanto, o bloco a seguir gera um erro -

-- Create file ModuleIf.elm
module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
         else --Error:else indentation not at same level of if statement
      "x is small"

Assim, em Elm, todas as linhas contínuas recuadas com o mesmo número de espaços formariam um bloco.

C:\Users\admin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
   :help for help, :exit to exit, more at 
   <https://github.com/elm-lang/elm-repl>
   ---------------------------------------
   -----------------------------------------

> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------

I need whitespace, but got stuck on what looks like a new declaration. 
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
   ^
I am looking for one of the following things:

   whitespace