首页 前端知识 TypeScript:搭建开发环境

TypeScript:搭建开发环境

2024-05-27 09:05:46 前端知识 前端哥 863 318 我要收藏

TypeScript 是 JavaScript 类型的超集,可以编译成纯 JavaScript 代码。是一种解决 JavaScript 缺点的编程语言。由微软发布,第一个正式版的发布时间为是2013年6月19日。详情

TypeScript 扩展了 JavaScript,并添加了类型。提供的类型系统只应用在开发阶段,只有在开发阶段开发者才需要借助它编写出更加健壮的程序。

  • TypeScript 不能在浏览器环境或 Node 环境直接运行,它在执行前必须先被编译为 JavaScript。

TypeScript.png

类型系统

TypeScript 是静态类型编程语言,即编译期间进行类型检测,变量、参数、返回值 等都必须有固定的类型。

  • 通过静态类型检查可以让开发者在编译时就发现错误而不是在代码运行时。
  • 类型系统为编辑器带来了更加精准的提示,提升开发体验。
# 语法格式
// TypeScript
let isShow: boolean = false;

// JavaScript
let isShow = false;

开发环境搭建

前提要下载 Node.js。

  1. 全局安装 TypeScript

    # 安装
    npm i -g typescript
    
    # 查看当前版本
    tsc -version
    
    # 查看最新版本
    npm view typescript version
    
  2. 静态编译 TypeScript 文件。

    • 创建一个 TypeScript 文件。

      console.log("Hello TS");
      
    • 使用 TypeScript 编辑器将 ts 文件编译为 js 文件。

      tsc 文件名.ts
      

优化工作流

监听 TypeScript 文件的变化,实现自动编译、自动执行代码。

  1. 安装 nodmonts-node

    tsc 和 ts-node 区别:tsc 根据 tsconfig 编译所有文件,ts-node 从入口文件开始,根据导入/导出逐步转译文件。

  2. 修改项目下的 package.json 的启动命令。

    {
        "scripts": {
            "start": "nodemon index.ts",
        }
    }
    
  3. 启动脚本命令,监听文件修改。

    npm start
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9634.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!