猿创征文|【Typescript】搭建TS的编译环境

news2025/7/17 11:13:28

🍳作者: 贤蛋大眼萌,一名很普通但不想普通的程序媛 \color{#FF0000}{贤蛋 大眼萌 ,一名很普通但不想普通的程序媛} 贤蛋大眼萌,一名很普通但不想普通的程序媛🤳

🙊语录: 多一些不为什么的坚持 \color{#0000FF}{多一些不为什么的坚持} 多一些不为什么的坚持

📝本文章收录于专栏:Typescript学习

💭 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂 o f f e r ,程序员的必备刷题平台 − − 牛客网 \color{#ff7f50}{眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台--牛客网} 眼过千遍不如手锤一遍:推荐一款模拟面试,斩获大厂offer,程序员的必备刷题平台牛客网

👉🏻点击跳转刷题网免费注册学习

搭建TS的编译环境

    • 🎈 认识Typescript
    • 💊 Typescript 的编译环境
    • 🚀 搭建TypeScript的运行环境
      • 🎯 项目环境的基本配置
      • 🏓 使用ts-node
      • 🥁 配置 webpack
    • 🍳 测试环境

🎈 认识Typescript

作为前端开发人员,我们都知道JavaScript是一门优秀的语言,并且在很多领域被大家广泛使用。但是随着用JavaScript的开发者越来越多,JavaScript 的缺点就被暴露出来了。例如ES5以及之前的使用的var关键字关于作用域的问题,最初JavaScript设计的数组类型并不是连续的内存空间等等。

随着ES6、7、8等的推出,每次都会让这门语言更加现代、更加安全、更加方便。但是JavaScript在类型检测上依然是毫无进展。

​ 如果JavaScript没有对我们传入的参数进行任何的限制,只能等到运行期间才发现这个 错误,有时候就是因为这个错误,导致整个项目崩溃。这个时候就萌生了Typescript

官方对Typescript的定义:

​ **Typescipt:**是拥有类型的JavaScript超集,它可以编译成普通、干净、完整的JavaScript代码。

​ 可以理解长是加强版的JavaScript。JavaScript所拥有的特性,TypeScript全部都是支持的,并且它紧随ECMAScript的标准,所以ES6、ES7、ES8等新语法标准,它都是支持的。并且在语言层面上,不仅仅增加了类型约束,而且包括一些语法的扩展,比如枚举类型(Enum)、元组类型(Tuple)等。并且TypeScript最终会被编译成JavaScript代码。

💊 Typescript 的编译环境

TypeScript最终会被编译成JavaScript来运行,所以我们需要搭建对应的环境

image-20220830162558236

我们需要先进行全局安装:

# 安装命令
npm install typescript -g
# 查看版本
tsc --version

image-20220830163418598

测试:

image-20220830170005698

🚀 搭建TypeScript的运行环境

上面介绍到的ts环境运行,但是这样每次都需要转换ts代码,很麻烦,下面我们介绍两种搭建Typescript的运行环境。

🎯 项目环境的基本配置

  • 直接配置webpack,让webpack对我们编写的代码进行一个编译,并且自动引入编译后的js文件;
  • webpack可以在代码修改后重新帮助我们进行编译,并且自动刷新浏览器,不需要手动操作
  1. 使用 npm 来初始化 package.json 文件:
npm init -y
  1. 安装本地TypeScript依赖
npm install typescript
  1. 初始化tsconfig.json文件

​ 在进行TypeScript开发时,我们会针对TypeScript进行相关的配置,而这些配置信息是存放在一个tsconfig.json文件中的。

tsc --init

image-20220830172206541

  1. 配置tslint来约束代码(推荐使用)
# 全局安装
npm install tslint -g
# 在项目中初始化tslint的配置文件:tslint.json
tslint -i

image-20220830172555223

🏓 使用ts-node

# 安装ts-node
npm install ts-node -g
# 安装ts-node需要依赖 tslib 和 @types/node 两个包
npm install tslib @types/node -g

测试代码:

image-20220830173235986

🥁 配置 webpack

  • 配置webpack 需要安装相关的依赖 webpack、webpack-cli、webpack-dev-server。从webpack 4 之后,在webpack环境下需要多配置webpack-cli。而webpack-dev-server则是可以在我们帮助我们开启本地服务,并且热更新
# 安装webpack 相关依赖
npm install webpack webpack-cli  webpack-dev-server -D

为了方便启动webpack,我们在package.json中添加如下启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  }

补充:如果我们需要区分开发的环境,则需要添加

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
}

并且安装 cross-env 依赖

npm install cross-env -D
  • 因为需要解析.ts文件,所以需要依赖对应的loader:ts-loader
npm install ts-loader -D
  • 编译后的代码需要对应的html模块作为它的运行环境,需要使用html-webpack-plugin来将它插入到对应的模板中
npm install html-webpack-plugin -D

最后:配置webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {},
  resolve: {
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
}

🍳 测试环境

在终端编写命令

npm run serve

在浏览器中打开:http://localhost:8080/

image-20220830181824957

PS:

求知无坦途,学问无捷径。👣 一步一个脚印,你走过的路,每一步都算数。 \color{#ff7f50}{一步一个脚印,你走过的路,每一步都算数。} 一步一个脚印,你走过的路,每一步都算数。 每一次进步都是对自己努力的肯定。如果读了文章有收获,不如一起来学习,一起进步吧。传送门🚪刷题神器

image-20220917104224568


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406307.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue修改 el-input 输入框默认背景色

vue修改 el-input 输入框默认背景色 实际项目需要修改默认的 输入框背景色 &#xff0c;因为原本的默认框背景色设置属性 :disabledtrue 之后显示不是很清晰&#xff0c;所以需要配置相应的规则 原本的不能修改的输入样式&#xff0c;显示的不是很清晰 加上样式之后的效果 <…

自学黑客,一般人我劝你还是算了吧

写在开篇 笔者本人 17 年就读于一所普通的本科学校&#xff0c;20 年 6 月在三年经验的时候顺利通过校招实习面试进入大厂&#xff0c;现就职于某大厂安全联合实验室。 我为啥说自学黑客&#xff0c;一般人我还是劝你算了吧。因为我就是那个不一般的人。 首先我谈下对黑客&…

十大经典排序算法(上)

目录 1.1冒泡排序 1. 算法步骤 3.什么时候最快 4. 什么时候最慢 5.代码实现 1.2选择排序 1. 算法步骤 2. 动图演示 3.代码实现 1.3 插入排序 1. 算法步骤 2. 动图演示 3. 算法实现 1.4 希尔排序 1. 算法步骤 2. 动图演示 3.代码实现 1.5 归并排序 1. 算法步骤 2…

Android: 彻底搞懂Lifecycle——使用篇

系列文章目录 第一章 Android: 彻底搞懂Lifecycle——使用篇 第二章 Android: 彻底搞懂Lifcycle——原理篇 文章目录系列文章目录前言一、Lifecycle是什么&#xff1f;1. 应用场景2. 示例二、Lifecycle使用1. 泳&#xff08;用&#xff09;裤&#xff08;库&#xff09;第一步…

PyQt5(一) PyQt5安装及配置,从文件夹读取图片并显示,模拟生成素描图像

目录 一、环境配置 1.1 安装PyQt5 1.2 安装Qt工具包 1.3 配置环境变量 1.4 测试PyQt5 1.5 配置PyCharm 二、QtDesigner 窗口简单介绍 2.1 初始界面 2.2 控件介绍 三、相关函数 3.1 读取文件函数 3.1.1 打开本地图片 3.1.2 保存图片到本地 3.1.3 打开文件夹 3.1.4 打…

微信小程序|基于小程序+C#制作一个考试答题小程序

基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题,使考试不用再局限与某个统一的场所,只要有设备,哪里都能考试。 一、小程序

【动态规划】最长上升子序列、最大子数组和题解及代码实现

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…

功能测试用例多次录制后,我丢掉了selenium,选择龙测AI-TestOps云平台

目录一、如何使用龙测AI-TestOps云平台1、进入龙测AI-TestOps云平台2、新建项目3、新建流程图4、创建任务5、查看任务状态6、查看报告、图片7、下载流程图、测试报告、excel用例二、龙测AI-TestOps云平台AI功能介绍1、NLP2、视频AI转流程图三、总结功能测试用例多次录制后&…

写着简单跑得又快的数据库语言 SPL

数据库语言的目标SQL为什么不行SPL为什么能行 数据库语言的目标 要说清这个目标&#xff0c;先要理解数据库是做什么的。 数据库这个软件&#xff0c;名字中有个“库”字&#xff0c;会让人觉得它主要是为了存储的。其实不然&#xff0c;数据库实现的重要功能有两条&#xf…

【微信小程序】按钮还能这样用?

目录 &#x1f353;button 按钮的基本使用 &#x1f349;各种神奇的按钮 &#x1f353;button 按钮的基本使用 按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能&#xff08;客服、转发、获取用户授权、获取用户信息等&#xff09;…

占有统治地位的Transformer究竟是什么

讲个有趣的小故事我高二那年从乙班考入了甲班&#xff0c;对于那时的我 偏科英语最高只有108班级平均英语成绩125暴躁难为人女英语老师&#xff0c;使我上英语课时战战兢兢。英语老师很时尚&#xff0c;喜欢搞花里胡哨的词语让我们放松&#xff0c;也很尊重我虽然暴躁但维护着我…

前端系列——vue2+高德地图web端开发(使用和引入)

vue2高德地图web端开发&#xff08;使用和引入&#xff09;前言基础准备工作高德地图的个人开发者注册高德api网址1.点击进行注册2.注册完之后进入控制台3.创建新应用4.添加高德 2.0 新增创建vue2的项目npm 引入高德官方文档1.安装2.进入项目3. NPM 方式安装使用 Loader4.在com…

【RabbitMQ】什么是RabbitMQ?RabbitMQ有什么用?应用场景有那些?

目录 一、什么是RabbitMQ&#xff1f; 二、RabbitMQ是干什么的&#xff1f; 三、RabbitMQ的常见作用有那些&#xff1f; 四、RabbitMQ的应用场景有那些&#xff1f; 场景一&#xff1a;用户订单&#xff0c;库存处理。【服务间解耦】 场景二&#xff1a;用户注册&#xf…

javaScript实现倒计时功能

目录 一、主要思路 二、css样式 三、html代码 四、js内容 五、完整代码展示 六、效果展示 一、主要思路 1.通过内置时间函数实例化日期对象获取当前时间 new Date。 2.因为时间无法减去时间&#xff0c;有可能生成负数&#xff0c;所以采用时间戳的方法得到毫秒数形式的…

(完整版)2022大厂Java八股文面试题库|附答案

Java基础 说下面向对象四大特性Java语言有些特点什么是Java程序的主类&#xff1f;应用程序和小程序的主类有何不同&#xff1f;访问修饰符public,private,protected,以及不写&#xff08;默认&#xff09;时的区别&#xff1f;float f3.4;是否正确&#xff1f;Java有没有goto…

Spring Boot(四):Spring Boot启动原理分析

文章目录 Spring Boot启动原理分析 一、依赖导入原理 二、Spring Boot包扫描原理 三、Spring Boot自动配置原理 Spring Boot启动原理分析 一、依赖导入原理 父项目版本控制 ctrl 点击spring-boot-starter-parent进入 继续点击&#xff0c;进入spring-boot-dependencies…

微前端-qiankun

概念 使用框架&#xff1a;qiankun 介绍&#xff1a; qiankun 是一个基于 single-spa 的微前端实现库&#xff0c;旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun官网&#xff1a;Go 当使用 iframe 整合系统时&#xff0c;假设我们有系统 A, 当我们…

MySQL+Navicat安装配置教程(超级详细、保姆级)

MySQLNavicat安装配置教程&#xff08;超级详细、保姆级&#xff09;一、 下载MySQL1. 选择想要安装的版本&#xff0c;点击Download下载二、安装MySQL1. 选择设置类型2. 选择安装的产品和功能3. 先选中“MySQL Server 5.7.31” &#xff0c;之后点击下方的蓝色“Advanced Opti…

Crontab表达式执行定时任务

Cron是一个Linux下的定时执行工具&#xff0c;可用于执行定时任务。 启动、关闭、查看Cron服务的语法&#xff1a; 启动&#xff1a;/sbin/service crond start 查看&#xff1a;/sbin/service crond status 停止&#xff1a;/sbin/service crond stop 重启&#xff1a;/sbin…

微信小程序 h5页面跳转小程序(超详细讲解)

h5跳转小程序 实战项目从无到完整的h5跳转小程序经验&#xff0c;跳转方式分为云函数跳转和开放性标签跳转。 开放性标签是针对微信里面浏览器使用的&#xff0c;而云函数跳转在外部以及微信里面都可以使用。 建议需要的同学先全部浏览一遍本文。内容较长较为啰嗦。 一、不…