Configurado nuestro proyecto

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 “–save-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> 

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

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

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 “ts-node”.
pueden instalarlo igual como

npm i ts-node -D

y luego con npx:

npx ts-node index.ts

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.

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

Yo lo hice con vite😁

.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

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

Amo gitignore.io

✅

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.
“GITIGNORE”:
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 “gnzh” (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