No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Configurado nuestro proyecto

3/24
Recursos

No vamos a instalar TypeScript de manera global, sino solo para el proyecto, ya que normalmente as铆 se hace en mundo real. Se trabaja por proyecto.

Realicemos los siguientes pasos:

  1. Creamos una carpeta para nuestro proyecto (el nombre que desees) e ingresamos a la misma. Mediante la terminal ser铆a lo siguiente:
mkdir ts-project
cd tsc --version
  1. Abrimos nuestro editor de c贸digo desde la ubicaci贸n de la carpeta del proyecto. Si usas Visual Studio Code, usando la terminal es as铆:
code .
  1. Crearemos los siguientes archivos:
  • Un archivo .gitignore en el editor o desde la terminal. Para su contenido, podemos utilizar la p谩gina gitignore.io. En nuestro programa necesitaremos las siguientes especificaciones:
    P谩gina de gitignore

Luego copiamos lo que nos genera la web y lo pegamos en nuestro gitignore desde nuestro editor de c贸digo.

  • Un archivo .editorconfig (opcional), si est谩s usando Visual Studio Code, con el fin de dar una configuraci贸n simple y sencilla a la hora de ejecutar c贸digo. Aqu铆 copia y pega lo siguiente:
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Para que funcione esta configuraci贸n debes tener instalado la siguiente extensi贸n en tu Visual Studio Code:
Extensi贸n EditorConfig

  1. Necistaremos tambi茅n tener creado una carpeta de nombre src dentro de nuestro proyecto
  2. Ahora crearemos nuestro archivo package.json de manera simple desde la terminal y dentro de la ruta del proyecto:
npm init -y

As铆 deber铆a estar quedando conformado nuestro proyecto previo al 煤ltimo paso
Archivos de configuraci贸n

  1. Finalmente, instalemos TypeScript 馃槉. Desde la terminal y dentro de la ruta del proyecto, ejecuta:
npm install typescript --save-dev

Para verificar la versi贸n instalada:

npx tsc --version

Contribuci贸n creada por: Mart铆n 脕lvarez.

Aportes 36

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cortaron donde genera el package.json.
Igual, lo pueden generar con una configuraci贸n est谩ndar :

npm init -y

Like si usas la bandera 鈥-D鈥 en lugar de 鈥溾搒ave-dev鈥-

Todos los cursos de Nicol谩s son brutales, se los recomiendo

Codigo de la clase

Recuerda que para installar typescript debes tener instalado Node.js

.
.editorconfig

<# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false> 

.gitignore

<
# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node
# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,linux,node

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node> 

Instalar Typescript de manera local, no local.

<npm install typescript --save-dev> 

Les dejo el comando para generar el package json, no viene en la clase:

npm init

Respondes las preguntas que hace el asistente (o solo enter y enter y enter) y con eso tienes tu package.json

No es aporte, es queja: La edici贸n de esta clase es terrible.

Si acaso necesitaras actualizar tu typescript global porque no est谩 al d铆a o lo que sea, te dejo el siguiente comando:

npm install -g typescript@latest

Esto porque a veces npm update nos dice que todo est谩 al d铆a, yo trabajar茅 con el typescript global y te dejo esto por si tambi茅n es tu caso.

Igual me estoy adelantando bastante, pero si quieren correr un archivo .ts sin compilarlo previamente con tsc, la dependency por excelencia es 鈥渢s-node鈥.
pueden instalarlo igual como

npm i ts-node -D

y luego con npx:

npx ts-node index.ts

Lo que se hizo fue instalar TS con este comando

npm install typescript --save-dev

Y con eso tenemos acceso al compilador de TS, el cual lo corremos de la siguiente manera

npx tsc

En este caso solo pintamos la version con la flag --version

El archivo 鈥.editorconfig鈥 es un archivo de configuraci贸n que se utiliza para mantener la consistencia en el estilo de codificaci贸n entre diferentes editores de texto y entornos de desarrollo. Proporciona una forma de especificar y aplicar reglas de formato de c贸digo en un proyecto, independientemente del editor utilizado por los desarrolladores.
.
El archivo 鈥.editorconfig鈥 contiene una serie de secciones y reglas que definen c贸mo debe formatearse el c贸digo en diferentes tipos de archivos. Aqu铆 hay una explicaci贸n de las reglas espec铆ficas en el archivo que has proporcionado:
.

  • root = true: Esta l铆nea indica que este archivo es la ra铆z de la configuraci贸n y se aplicar谩 a todo el proyecto. Es importante tener solo un archivo 鈥.editorconfig鈥 en la ra铆z del proyecto.

  • [*]: Esta secci贸n se aplica a todos los archivos sin importar su extensi贸n.

  • charset = utf-8: Esta regla establece que el juego de caracteres utilizado en los archivos debe ser UTF-8.

  • indent_style = space: Indica que el estilo de indentaci贸n debe ser con espacios en lugar de tabulaciones.

  • indent_size = 2: Establece el tama帽o de la indentaci贸n a 2 espacios.

  • insert_final_newline = true: Esta regla asegura que se inserte una l铆nea en blanco al final de cada archivo.

  • trim_trailing_whitespace = true: Indica que se deben eliminar los espacios en blanco al final de cada l铆nea.

  • [*.ts]: Esta secci贸n se aplica a los archivos con extensi贸n 鈥.ts鈥 (archivos de TypeScript).

  • quote_type = single: Establece que las comillas utilizadas en los archivos TypeScript deben ser comillas simples (鈥欌).

  • [*.md]: Esta secci贸n se aplica a los archivos con extensi贸n 鈥.md鈥 (archivos Markdown).

  • max_line_length = off: Desactiva la limitaci贸n de longitud de l铆nea para los archivos Markdown.

  • trim_trailing_whitespace = false: Evita eliminar los espacios en blanco al final de cada l铆nea en los archivos Markdown.

.
En resumen, el archivo 鈥.editorconfig鈥 se utiliza para definir y mantener la consistencia en la configuraci贸n del formato de c贸digo en un proyecto, lo que facilita la colaboraci贸n y la lectura del c贸digo en diferentes editores y entornos de desarrollo.

.gitignore para windows mac linux node contiene:

# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node
# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,linux,node

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

### Windows ###
# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk

# End of https://www.toptal.com/developers/gitignore/api/windows,macos,linux,node

Comando para iniciar el proyecto

npx tsc --init

editorconfig :


   
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Yo lo hice con vite馃榿

Para los que usan yarn solo es una alternativa a npm, yarn hace un poco m谩s r谩pido la instalaci贸n de paquetes, pero es la misma usen cualquiera y el tiempo dir谩 cual se queda o ambas, y para los que tengan dudas sobre la bandera -y solo es decir --yes a todas las preguntas al crear el init y sin -y te har谩 preguntas que en lo personal prefiero.

Aqui el enlace de TypeScript online: https://www.typescriptlang.org/play?#code/Q

Organizando el entorno de desarrollo:

  1. Visitar gitignore
  2. elegir So y lenguaje. Para ts o js es node.
  3. Copiar y pegar en el arachivo .gitignore.
  • Crear el archivo .editorconfig con lo siguiente:
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
  • Crear una carpeta vacia src.

  • En consola ejecutar lo siguiente:

npm install typescript --save-dev

otra formita:

npm install typescript -D

Por si no saben que es npx
Documentaci贸n

npm install typescript --save-dev
npx tsc --version

Si a alguno le sirve, yo uso este simulador de c贸digo para realizar pruebas r谩pidas, sobre todo para no hacer instalaciones de librer铆as y probar cosas sencillas. Sirve para Javascript, Typescript y React

playcode.io

Si tienen la version 5.x.x de typescript y la version de node 12.x puede generar un errror similar a este

typescript/lib/tsc.js:93 for (let i = startIndex ?? 0; i < array.length; i++) {

Mi solucion fue hacer dowgrade de la version de typesript a la 4.9.5

git init

Dos cosas maravillosas que aprend铆 en esta clase:

  1. La creaci贸n del archivo gitignore dependiendo de las necesidades que tenemos https://www.toptal.com/developers/gitignore
  2. La creaci贸n de package.json b谩sico con este comando npm init -y

Me encanta como explica el profesor es pausado y se le entiende el tema.

Buen desaf铆o inicial!!

Me invert铆 muchas horas buscando como configurar los gitignore, esta info no tiene precio.
鈥淕ITIGNORE鈥:
URL

Falta indicar en que momento debemos instalar git

npx ya viene junto con npm sino:

npm install -g npx 

su distintivo es que si quieres probar una librer铆a la puedes probar sin necesidad de instalar en local o global.

En mi caso prefiero usar yarn

yarn add typescript --dev

Instalaci贸n de TypeScript

npm install typescript --save-dev

Estamos instalando TS de forma local para solo trabajar en una carpeta (as铆 es un flujo profesional normal).

No es recomendable trabajar con TS de forma global.

npx

Con npx nosotros podemos ejecutar las utilidades que antes instalamos.

npx tsc --version

Ver la versi贸n de TS actual.

@Nicobytes ha mejorado mucho como profe!

Install typescript
NPM = npm typescript --save-dev
YARN = yarn add typescript --dev

Me encant贸 el tema de la terminal.
Creo que es el shell zsh con el tema 鈥済nzh鈥 (al menos en mi linux ubuntu).
Ya lo tengo instalado鈥 馃槈

Para instalar TS en nuestro proyecto: npm i typescript -D y luego -> npx tsc --version

gitignore.io

buen tip @oscarfuentes81