TypeScript(零) —— 简介、环境搭建、第一个实例

简介: TypeScript(零) —— 简介、环境搭建、第一个实例

TypeScript 简介

TypeScript 是微软开发的一个开源的编程语言,通过在 JavaScript 的基础上添加静态类型定义构建而成。


TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码,可运行在任何浏览器,任何操作系统。

TypeScript 开发环境搭建

安装 node

可以去 node 官网自行下载所需要的版本

在 cmd 输入 node -v,输出版本号,则说明 node 已成功安装


  node -v

76fc1cea0c6945d38dc17c6f0a8481ef.png

安装 TypeScript

在 cmd 输入 npm i -g typescript,不报错则安装成功

  npm i -g typescript

c7d5d1cac83c4c64a318b42c35f2adb2.png

创建一个 TS 文件

创建一个文件夹,在文件夹里创建一个 .ts 文件

f8f5e2f388e24e5183516750c4c91160.png

使用 tsc 对 ts 文件进行编译

  1. 打开终端 (Ctrl + ~)
  2. 命令行键入:tsc xxx
  3. 6cd704a7e75e420ab92f30a8185db6b6.png
  4. 可以发现,ts 文件被编译并生成了对应的 js 文件
  5. 开启监视:让 ts 文件改变后自动编译
  tsc xxx -w

开启监视:


1503349207134098a302cd29b153d839.png

修改内容后自动编译:

a180c45755fc445c8266995b0af76b3e.png

在浏览器上运行文件

创建 index.html 文件,在 src 中写入 js 路径即可

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <script src="01_helloTS.js"></script>
  </body>
  </html>

不积跬步无以至千里 不积小流无以成江海

相关文章
|
1天前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
69 0
|
7月前
|
存储 JavaScript 安全
初识TypeScript:入门体验与简介
初识TypeScript:入门体验与简介
37 0
|
1天前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
75 0
|
1天前
|
JavaScript
TypeScript环境搭建 单步调试代码
TypeScript环境搭建 单步调试代码
26 0
|
1天前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
30 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
1天前
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(上)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
37 0
|
7月前
|
移动开发 资源调度
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
62 0
|
10月前
|
JavaScript 前端开发
TypeScript 简介及优缺点
TypeScript 简介及优缺点
136 0
|
JavaScript 前端开发 IDE
TypeScript入门之环境搭建
本文从三个方面讲述,首先说明了什么是TypeScript?然后介绍了使用TypeScript之后的优势,最后讲解了TypeScript的环境的搭建。
116 0
|
JavaScript
【TypeScript教程】# 10:继承简介
【TypeScript教程】# 10:继承简介
80 0
【TypeScript教程】# 10:继承简介