当前位置： 首页 > news >正文

04 # 第一个 TypeScript 程序

news 2026/1/18 22:31:49

初始化项目以及安装依赖

新建 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&#xff0c;就可以执行下面命令查看帮助信息 npm i typescript -g tsc -h创建配置文件&#xff0c;执行下面命令就会生成一个 tsconfig.json 文件 tsc --init使用 tsc 编译一个 js 文件 新…...

编程日记 2023/11/29 9:25:48

Android gradle 配置阿里镜像

要在Android Gradle中配置阿里镜像&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开项目中的 build.gradle 文件。 在 build.gradle 文件中添加阿里镜像的地址&#xff0c;如下所示&#xff1a; buildscript {repositories {maven { url https://maven.aliyun.com/re…...

编程日记 2023/11/29 9:24:47

Arduino驱动DHT20温湿度传感器（温湿度传感器）

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 DHT20温湿度传感器是DHT11的全新升级版。 DHT20采用全新的ASIC专用芯片、改进的MEMS半导体电容式湿度传感器元件和标准片上温度元件。所有传感器均经过工厂校准，具有低功耗、高精度和稳定性、响应…...

编程日记 2023/11/29 9:22:45

如何使用ArcGIS Pro制作一张北极俯视地图

地图的表现形式有很多种&#xff0c;经常我们看到的地图是以大西洋为中心的地图&#xff0c;还有以太平洋为中心的地图&#xff0c;今天要给大家介绍的地图是从北极上方俯视看的地图&#xff0c;这里给大家讲解一下制作方法&#xff0c;希望能对你有所帮助。 修改坐标系 制作…...

编程日记 2023/11/29 9:21:43

每天五分钟计算机视觉：经典架构的力量与启示

在深度学习和计算机视觉领域，卷积神经网络（Convolutional Neural Networks，简称CNN）无疑是最为经典的架构之一。近年来，随着研究的不断深入和新架构的不断涌现，许多初学者可能会忽视这些经典架构的重要性。然而，理解并学习这些经典架构，对于我们深入理解卷积神经网络的…...

编程日记 2023/11/29 9:20:42

element plus 使用细节

菜鸟一直在纠结这个写不写&#xff0c;因为不难&#xff0c;但是菜鸟老是容易忘记&#xff0c;虽然想想或者搜搜就可以马上写出来&#xff0c;但是感觉每次那样就太麻烦了&#xff0c;不如一股做气写了算了&#xff0c;后面遇见别的就再来补充&#xff01; 文章目录 table 表格…...

编程日记 2023/11/29 9:18:38

分析：为什么有些pdf打开之后无法编辑？

pdf文件大家应该都经常接触&#xff0c;但是不知道大家会遇到这种情况&#xff1a;有些PDF文件打开之后无法编辑&#xff1f;是什么原因呢&#xff1f;今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下&#xff0c;PDF文件中的内容是否是图片&#xff0c;如果确认…...

编程日记 2023/11/29 9:17:37

Django请求生命周期流程

浏览器发起请求。 先经过网关接口&#xff0c;Django自带的是wsgiref&#xff0c;请求来的时候解析封装&#xff0c;响应走的时候打包处理&#xff0c;这个wsgiref模块本身能够支持的并发量很少&#xff0c;最多1000左右&#xff0c;上线之后会换成uwsgi&#xff0c;并且还会加…...

编程日记 2023/11/29 9:16:36

C++学习 --string

目录 1&#xff0c; 什么是string 2&#xff0c; 创建string 3&#xff0c; 操作string 3-1&#xff0c; 赋值 3-1-1&#xff0c; 赋值() 3-1-1&#xff0c; 赋值(assign) 3-2&#xff0c; 修改 3-2-1&#xff0c; 拼接 3-2-1-1&#xff0c; 拼接() 3-2-1-2&#xff…...

编程日记 2023/11/29 9:15:34

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…...

编程日记 2023/11/29 9:13:32

Python中如何用栈实现队列

目录 一、引言 二、使用两个栈实现队列 三、性能分析 四、应用场景 五、代码示例 六、优缺点总结 一、引言 队列&#xff08;Queue&#xff09;和栈&#xff08;Stack&#xff09;是计算机科学中常用的数据结构。队列是一种特殊的线性表&#xff0c;只允许在表的前端进行…...

编程日记 2023/11/29 9:12:31

python模块pyDes，DES对称加密算法库

一、简介 pyDes是一个Python模块&#xff0c;用于进行DES&#xff08;Data Encryption Standard&#xff09;加密和解密操作。DES是一种对称密钥加密算法&#xff0c;广泛用于数据保密和传输。 优点&#xff1a; 1.简单易用&#xff1a;pyDes模块提供了简单的接口&#xff0c;…...

编程日记 2023/11/29 9:11:30

Centos7安装配置nginx

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;小编会及时修改&#xff09; Centos7安装配置nginx Nginx介绍 Nginx (engine x) 是一个高性能的 HTTP 和 反向代理 服务&#xff0c;也…...

编程日记 2023/11/29 9:10:28

9.Spring 整合 Redis

引入依赖&#xff1a;spring-boot-starter-data-redis配置 Redis&#xff1a;配置数据库参数、编写配置类&#xff0c;构造 RedisTemplate访问 Redis&#xff1a; redisTemplate.opsForValue() redisTemplate.opsForHash() redisTemplate.opsForList() redisTemplate.opsForSe…...

编程日记 2023/11/29 9:08:26

【Java学习笔记】73 - 正则表达式

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter27/src/com/yinhai/regexp 一、引入正则表达式 1.提取文章中所有的英文单词 2.提取文章中所有的数字 3.提取文章中所有的英文单词和数字 4.提取百度热榜标题 正则表达式是处理文本的利器…...

编程日记 2023/11/29 9:07:25

【算法】滑动窗口题单——1.定长滑动窗口⭐

文章目录 1456. 定长子串中元音的最大数目2269. 找到一个数字的 K 美丽值1984. 学生分数的最小差值&#xff08;排序&#xff09;643. 子数组最大平均数 I1343. 大小为 K 且平均值大于等于阈值的子数组数目2090. 半径为 k 的子数组平均值2379. 得到 K 个黑块的最少涂色次数1052…...

编程日记 2023/11/29 9:06:24

可观测性项目开发与学习ing

http1,2,3的区别 HTTP/1.0、HTTP/1.1、HTTP/2 和 HTTP/3 是不同版本的协议&#xff0c;它们在以下方面有所不同&#xff1a; HTTP/1.0: 是最早的版本&#xff0c;主要特点如下&#xff1a; 每个请求和响应都需要建立一个新的 TCP 连接。不支持持久连接&#xff08;Keep-Alive&…...

编程日记 2023/11/29 9:05:23

apache-poi

excel类型 excel分为03版本和07版本 03版本 new HSSFWorkbook(); 优点&#xff1a;速度快 缺点&#xff1a;只能写入65536行数据 文件类型&#xff1a;.xls07版本 new XSSFWorkbook(); 优点&#xff1a;不限制写入数量 缺点&#xff1a;容易造成内存溢出(OOM)&#xff0c;速度…...

编程日记 2023/11/29 9:04:22

TOD和PPS精确时间同步技术

介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术&#xff0c;它们在许多领域都有广泛的应用&#xff0c;总的来说&#xff0c;PPS和TOD被广泛应用于各种需要高度精确时间同步的领域&#xff0c;包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS&#xff08…...

编程日记 2023/11/29 9:02:19

通过一个例子理解pytest的fixture的使用

需求 希望编写登陆web后做一些操作的测试用例&#xff0c;使用pytest框架具体测试用例执行前&#xff0c;需要先拿到web的token&#xff0c;这个获取token的动作只执行一次 例一 先上测试用例代码 adminpc-1:~$ cat my_test.py import pytestclass TestWebLogin:pytest.fi…...

编程日记 2023/11/29 9:01:18

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/1/17 14:26:21

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/1/16 3:47:03

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/1/16 18:16:40

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/15 5:45:13

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/1/15 8:46:48

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/1/16 21:10:33

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/12/6 11:14:42

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

编程新知 2026/1/15 5:23:33