Introducción a TypeScript y la configuración del entorno

Introducción a TypeScript

TypeScript fue lanzado oficialmente por Microsoft en 2012, y ahora se ha actualizado y mantenido continuamente durante 8 años. TypeScript ha crecido muy rápido y ahora se ha convertido en una habilidad imprescindible para el front-end. TypeScript es en realidad un superconjunto de JavaScript, lo que significa que TypeScript se basa en JavaScript y eventualmente se transformará en JavaScript. Esto es como el Iron Man en Marvel. Antes de usar armadura, era promedio. Aunque inteligente y rico, todavía estaba cerca de los humanos. Pero con armadura, es tan poderoso que incluso puede luchar con dioses.

Tal vez encuentres que lo que dije es demasiado exagerado. Cuando comencé a aprender, pensé de la misma manera, pero me tomó alrededor de 2 años, especialmente para proyectos a gran escala, y fue realmente fácil de usar. Por ejemplo, su sintaxis extendida, orientada a objetos y escritura estática. Si puedo tomar las decisiones en un proyecto de front-end, exigiré encarecidamente a todos que utilicen la sintaxis de TypeScript para la programación.

Use VSCode para escribir código

Enlace de descarga: https://code.visualstudio.com/

Si ya ha participado en el trabajo, creo que al menos el 80% de los front-end que lo rodean están utilizando este editor.

Usando VSCode para explicar, hay otra disposición principal de que todos son productos de Microsoft, por lo que tienen buena compatibilidad y soporte. VSCode tiene muchas adaptaciones de sintaxis específicamente para TypeScript, por lo que será fácil escribir Be happy.

Construcción del entorno de desarrollo de TypeScript

Si desea utilizar TypeScript para escribir código, primero debe instalar su entorno de desarrollo, lo cual no es complicado.

1. Instale el entorno operativo de Node

Puede Node.jsir al sitio web oficial para descargar Node para su instalación (https://node.js.org). Se recomienda que descargue la LTSversión, que es la versión de soporte a largo plazo. No voy a demostrar el proceso de instalación Este proceso es el mismo que instalar QQ sin ninguna dificultad.

Si ya lo ha instalado, puede abrir la herramienta de línea de comandos y usar el node -vcomando para ver la versión instalada, pero generalmente hay un comando que debe verificarse, es decir npm -v, si ambos comandos pueden generar el número de versión, significa que su instalación de Nodo no tiene ningún Problema.

2. Instale typeScript a nivel mundial

Si desea usar TypeScript, primero debe instalarlo globalmente en su sistema TypeScript. Aquí puede instalarlo directamente en VSCode. El comando de instalación puede usar npm o yarn

npm install typescript -g
yarn global add typescript

Puedes usar cualquiera de estos dos. Elige según tus preferencias. Usé el del video npmpara instalar.

3. Cree un directorio de proyecto y compile archivos TS

En algún lugar de su computadora para crear una nueva carpeta, guarde el código de ejercicios de typeScript y luego lo arrastre a VSCode, cree un nuevo Demo1.tsarchivo, escriba el código a continuación:

function test() {
    
    
  let web: string = "Hello World";
  console.log(web);
}

test();

En este momento node Demo1.ts, la ejecución de su uso no se ha realizado correctamente, porque Node no puede ejecutar el TypeScriptarchivo directamente , debe tsc Demo1.tsconvertirlo. Una vez completada la conversión, el typeScriptcódigo se compila en javaScriptcódigo y Demo1.jsse genera un nuevo archivo. En este momento, usted ingresa en la línea de comando y lo ingresa node Demo1.jsen la terminal.Los caracteres se pueden generar sin problemas.

4. Instalación y uso de ts-node

Pero la eficiencia de esta operación es demasiado baja. Puede usar un ts-nodecomplemento para resolver este problema. Con este complemento, no necesitamos compilar más y usarlo ts-nodepara ver directamente el resultado de la escritura.

Use el npmcomando para instalar globalmente, ingrese el siguiente comando directamente en la línea de comando:

npm install -g ts-node

Una vez completada la instalación, puede ingresar directamente los siguientes comandos en el comando para ver los resultados.

ts-node Demo1.ts

Bueno, aprende mucho hoy. ¡Enhorabuena por aprender nuevas habilidades de programación, amigos, vamos! ! !

Enlace original: http://www.jspang.com/detailed?id=63


Hay un diseño de curso de mini programa WeChat, necesidades de diseño completas, contacto personal QQ: 505417246

Preste atención a la siguiente cuenta pública de WeChat, puede recibir el subprograma de WeChat, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python y otros materiales prácticos de aprendizaje. El
resumen de conocimientos de front-end más reciente y completo y el código fuente del proyecto se lanzará al público de WeChat lo antes posible Número, preste atención, gracias

Después de prestar atención a la cuenta oficial , responda a las preguntas de la entrevista inicial y reciba una gran cantidad de preguntas de la entrevista inicial Resumen de datos en PDF
Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/m0_46171043/article/details/115263422
Recomendado
Clasificación