04 # 第一个 TypeScript 程序
初始化项目以及安装依赖
新建 ts_in_action 文件夾
npm init -y
安装好 typescript，就可以执行下面命令查看帮助信息
npm i typescript -g
tsc -h
创建配置文件，执行下面命令就会生成一个 tsconfig.json 文件
tsc --init
使用 tsc 编译一个 js 文件
新建 src/index.ts
let kaimo:string = "hello typescript"
执行下面命令编译该 ts 文件
tsc ./src/index.ts
编译结果如下：
var kaimo = "hello typescript";
也可以使用 https://www.typescriptlang.org/play 查看
配置构建工具 webpack 环境
安装依赖
npm i webpack@4.35.2 webpack-cli@3.3.5 webpack-dev-server@3.7.2 -D
npm i ts-loader@6.0.4 typescript@3.5.2 -D
npm i html-webpack-plugin@3.2.0 clean-webpack-plugin@3.0.0 webpack-merge@4.2.1 -D
配置相应的环境
基础配置：
// 公共环境配置// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */const HtmlWebpackPlugin = require("html-webpack-plugin");const config = {entry: "./src/index.ts",output: {filename: "app.js"},resolve: {extensions: [".js", ".ts", ".tsx"]},module: {rules: [{test: /\.tsx?$/i,use: [{loader: "ts-loader"}],exclude: /node_modules/}]},plugins: [new HtmlWebpackPlugin({template: "./src/tpl/index.html"})]
};
module.exports = config;开发配置：
// 开发环境配置// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */const config = {devtool: "cheap-module-eval-source-map"
};module.exports = config;生产配置：
// 生产环境配置// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */const CleanWebpackPlugin = require("clean-webpack-plugin");const config = {plugins: [new CleanWebpackPlugin()]
};module.exports = config;webpack 文件入口配置：
// webpack 文件入口// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");const config = merge(baseConfig, process.NODE_ENV === "development" ? devConfig : proConfig);module.exports = config;package.json 脚本配置
"scripts": {"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js","build": "webpack --mode=production --config ./build/webpack.config.js"
},
启动服务并且打包测试
添加模板
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>TypeScript in Action</title></head><body><div class="app"></div></body>
</html>
添加功能
let kaimo:string = "hello typescript";document.querySelectorAll(".app")[0].innerHTML = kaimo;
启动服务 npm run start，访问 http://localhost:8080/
打包 npm run build
相关文章：
04 # 第一个 TypeScript 程序
初始化项目以及安装依赖 新建 ts_in_action 文件夾 npm init -y安装好 typescript，就可以执行下面命令查看帮助信息 npm i typescript -g tsc -h创建配置文件，执行下面命令就会生成一个 tsconfig.json 文件 tsc --init使用 tsc 编译一个 js 文件 新…...
Android gradle 配置阿里镜像
要在Android Gradle中配置阿里镜像，可以按照以下步骤进行操作： 打开项目中的 build.gradle 文件。 在 build.gradle 文件中添加阿里镜像的地址，如下所示： buildscript {repositories {maven { url https://maven.aliyun.com/re…...
Arduino驱动DHT20温湿度传感器（温湿度传感器）
目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 DHT20温湿度传感器是DHT11的全新升级版。 DHT20采用全新的ASIC专用芯片、改进的MEMS半导体电容式湿度传感器元件和标准片上温度元件。所有传感器均经过工厂校准，具有低功耗、高精度和稳定性、响应…...
如何使用ArcGIS Pro制作一张北极俯视地图
地图的表现形式有很多种，经常我们看到的地图是以大西洋为中心的地图，还有以太平洋为中心的地图，今天要给大家介绍的地图是从北极上方俯视看的地图，这里给大家讲解一下制作方法，希望能对你有所帮助。 修改坐标系 制作…...
每天五分钟计算机视觉：经典架构的力量与启示
在深度学习和计算机视觉领域，卷积神经网络（Convolutional Neural Networks，简称CNN）无疑是最为经典的架构之一。近年来，随着研究的不断深入和新架构的不断涌现，许多初学者可能会忽视这些经典架构的重要性。然而，理解并学习这些经典架构，对于我们深入理解卷积神经网络的…...
element plus 使用细节
菜鸟一直在纠结这个写不写，因为不难，但是菜鸟老是容易忘记，虽然想想或者搜搜就可以马上写出来，但是感觉每次那样就太麻烦了，不如一股做气写了算了，后面遇见别的就再来补充！ 文章目录 table 表格…...
分析：为什么有些pdf打开之后无法编辑？
pdf文件大家应该都经常接触，但是不知道大家会遇到这种情况：有些PDF文件打开之后无法编辑？是什么原因呢？今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下，PDF文件中的内容是否是图片，如果确认…...
Django请求生命周期流程
浏览器发起请求。 先经过网关接口，Django自带的是wsgiref，请求来的时候解析封装，响应走的时候打包处理，这个wsgiref模块本身能够支持的并发量很少，最多1000左右，上线之后会换成uwsgi，并且还会加…...
C++学习 --string
目录 1， 什么是string 2， 创建string 3， 操作string 3-1， 赋值 3-1-1， 赋值() 3-1-1， 赋值(assign) 3-2， 修改 3-2-1， 拼接 3-2-1-1， 拼接() 3-2-1-2ÿ…...
Spark SQL,DF,RDD cache常用方式
RDD中的cache 调用cache方法 val testRDD sc.parallelize(Seq(elementA, elementB, elementC)).map(x > (x._1, x._2)).setName("testRDD")testRDD.cache() dataframe中的cache 利用catalog以表的形式对数据进行缓存 import org.apache.spark.SparkConf impo…...
Python中如何用栈实现队列
目录 一、引言 二、使用两个栈实现队列 三、性能分析 四、应用场景 五、代码示例 六、优缺点总结 一、引言 队列（Queue）和栈（Stack）是计算机科学中常用的数据结构。队列是一种特殊的线性表，只允许在表的前端进行…...
python模块pyDes，DES对称加密算法库
一、简介 pyDes是一个Python模块，用于进行DES（Data Encryption Standard）加密和解密操作。DES是一种对称密钥加密算法，广泛用于数据保密和传输。 优点： 1.简单易用：pyDes模块提供了简单的接口，…...
Centos7安装配置nginx
快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解（如有不正确的地方欢迎各位小伙伴在评论区提意见，小编会及时修改） Centos7安装配置nginx Nginx介绍 Nginx (engine x) 是一个高性能的 HTTP 和 反向代理 服务，也…...
9.Spring 整合 Redis
引入依赖：spring-boot-starter-data-redis配置 Redis：配置数据库参数、编写配置类，构造 RedisTemplate访问 Redis： redisTemplate.opsForValue() redisTemplate.opsForHash() redisTemplate.opsForList() redisTemplate.opsForSe…...
【Java学习笔记】73 - 正则表达式
项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter27/src/com/yinhai/regexp 一、引入正则表达式 1.提取文章中所有的英文单词 2.提取文章中所有的数字 3.提取文章中所有的英文单词和数字 4.提取百度热榜标题 正则表达式是处理文本的利器…...
【算法】滑动窗口题单——1.定长滑动窗口⭐
文章目录 1456. 定长子串中元音的最大数目2269. 找到一个数字的 K 美丽值1984. 学生分数的最小差值（排序）643. 子数组最大平均数 I1343. 大小为 K 且平均值大于等于阈值的子数组数目2090. 半径为 k 的子数组平均值2379. 得到 K 个黑块的最少涂色次数1052…...
可观测性项目开发与学习ing
http1,2,3的区别 HTTP/1.0、HTTP/1.1、HTTP/2 和 HTTP/3 是不同版本的协议，它们在以下方面有所不同： HTTP/1.0: 是最早的版本，主要特点如下： 每个请求和响应都需要建立一个新的 TCP 连接。不支持持久连接（Keep-Alive&…...
apache-poi
excel类型 excel分为03版本和07版本 03版本 new HSSFWorkbook(); 优点：速度快 缺点：只能写入65536行数据 文件类型：.xls07版本 new XSSFWorkbook(); 优点：不限制写入数量 缺点：容易造成内存溢出(OOM)，速度…...
TOD和PPS精确时间同步技术
介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术，它们在许多领域都有广泛的应用，总的来说，PPS和TOD被广泛应用于各种需要高度精确时间同步的领域，包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS（…...
通过一个例子理解pytest的fixture的使用
需求 希望编写登陆web后做一些操作的测试用例，使用pytest框架具体测试用例执行前，需要先拿到web的token，这个获取token的动作只执行一次 例一 先上测试用例代码 adminpc-1:~$ cat my_test.py import pytestclass TestWebLogin:pytest.fi…...
高性能无人机飞控系统源码：基于Cesium+Vue3+Vite的三维可视化平台
温馨提示：文末有联系方式1. 基于CesiumVue3Vite的现代化前端架构 采用轻量高效的技术栈构建——CesiumJS提供高精度地理空间渲染能力，Vue3带来响应式数据绑定与组合式API优势，Vite作为极速构建工具显著提升开发与部署体验，确保平台…...
遥感目标检测数据预处理避坑：AIR-SARShip-1.0数据集裁剪中的重叠率、零像素与标注同步难题
遥感目标检测数据预处理实战：AIR-SARShip-1.0数据集裁剪的三大核心挑战与解决方案 处理大尺寸遥感图像数据集时，数据预处理环节往往成为项目成败的关键分水岭。以AIR-SARShip-1.0这类典型SAR舰船检测数据集为例，30003000像素的原始图像尺寸直…...
WinISO：解决光盘镜像编辑与制作的三大实际问题
在日常工作中，你是否遇到过这样的场景：下载了一个 ISO 镜像文件，想往里面添加几个补丁或删除一个无用文件，却只能解压后再重新打包；或者你有一个旧版 Windows 安装盘，想替换其中的 install.wim 文件来制作集…...
非标三菱PLC伺服六轴程序实战解析：成熟可靠案例，适用于三菱FX3U系列PLC电气爱好者参考
非标三菱PLC伺服六轴程序 此程序已经实际设备上批量应用，用了六个伺服电机，程序成熟可靠，借鉴价值高，程序有注释，用的三菱FX3U系列plc。 是入门级三菱FX3U PLC电气爱好从业人员借鉴和参考经典案列。最近在车间调试一套…...
终极指南：如何用FanControl免费软件完美控制Windows电脑风扇
终极指南：如何用FanControl免费软件完美控制Windows电脑风扇 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trend…...
D3KeyHelper终极指南：5步轻松掌握暗黑3智能按键操作
D3KeyHelper终极指南：5步轻松掌握暗黑3智能按键操作 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面，可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 你是否在暗黑破坏神3的高强度战斗中感…...
K8s面试官最爱问的5个冷门知识点，答对直接加薪！
K8s面试官最爱问的5个冷门知识点，答对直接加薪！ 在Kubernetes技术面试中，大多数候选人能够流畅回答Pod、Deployment、Service等基础概念，但当面试官深入追问一些冷门却关键的设计机制时，往往成为区分普通工程师与高级专…...
【Debug】从 cv2 导入失败到 numpy + BLAS 根因：一次 conda 虚拟环境重建实录
从 cv2 导入失败到 numpy BLAS 根因：一次 conda 虚拟环境重建实录 表面上看，这是一次 cv2 导入失败的问题；真正追到最后，根因却落在 numpy 初始化底层 BLAS 运行库的阶段。更重要的是，这个问题并不是简单的“环境脏了…...
3D图像处理（二）——主流库STL转点云性能与效果深度评测
1. STL转点云的核心需求与技术背景 在工业检测、逆向工程和三维重建领域，STL文件向点云数据的转换是基础且关键的预处理步骤。STL作为三维建模的通用格式，采用三角面片描述物体表面，而点云则是离散空间点的集合，更适合特征提取、配…...
＜实战指南＞从RSOD数据集到YOLO模型：遥感图像目标检测全流程解析
1. RSOD数据集初探：遥感目标检测的黄金样本库 第一次接触遥感图像目标检测时，我和大多数初学者一样，面对五花八门的数据集不知从何下手。直到遇见RSOD这个"小而美"的经典数据集，才真正打开了正确的研究方式。这个包含93…...