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

在这里插入图片描述

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

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

相关文章

daima8资源网整站数据打包完整代码(集成了ripro9.1主题,开箱即用)

基于ripro9.1完全明文无加密后门版本定制开发&#xff0c;无需独立服务器&#xff0c;虚拟主机也可以完美运营&#xff0c;只要主机支持php和mysql即可。整合了微信登录和几款第三方的主题文件&#xff0c;看起来更美观一些。站长本人就是程序员&#xff0c;所以本站的代码资源…

PyCharm关闭很慢的解决办法

使用PyCharm2023.2.5的时候碰到了一个问题&#xff0c;每次关闭项目的时候都很慢很慢&#xff0c;在网上查了&#xff0c;有可能是因为缓存的问题&#xff0c;于是试着清除缓存&#xff0c;发现还是没有用&#xff0c;关闭的时候还是很慢&#xff0c;后面看到一种解决办法&…

算法:笛卡尔平面坐标系上,若干连接点形成线,剔除距离小于阈值的点,Kotlin

算法&#xff1a;笛卡尔平面坐标系上&#xff0c;若干连接点形成线&#xff0c;剔除距离小于阈值的点&#xff0c;Kotlin const val THRESHOLD 0.6f //距离小于这个点将被剔除。data class Point(val x: Float, val y: Float)fun removeNearbyPoint(points: List<Point>…

指针概念及应用

指针的相关概念 1.指针是什么&#xff1f; 指针是内存中的一个最小单元的编号&#xff0c;其实就是指地址&#xff0c;对于我们平时口中所讲述的指针&#xff0c;通常指的是指针变量&#xff0c;指针变量是用来存放内存地址的变量。 2.地址与指针 一个32位机器在一个进程中…

多线程原理和常用方法以及Thread和Runnable的区别

文章目录 &#x1f366;多线程原理&#x1f367;随机性打印&#x1f368;多线程内存图解 &#x1f369;Thread类的常用方法&#x1f36a;获取线程名称 getName()&#x1f382;设置线程名称 setName() 或者 new Thread("线程名字")&#x1f370;使当前正在执行的线程以…

python 交互模式和命令行模式的问题

python 模式的冲突 unexpected character after line continuation character 理论上 ide里&#xff0c;输入 python 文件路径\文件.py 就可以执行 但是有时候却报错 unexpected character after line continuation character 出现上述错误的原因是没有退出解释器&#x…

JMeter从入门到精通

1、 jmeter的介绍 jmeter也是一款接口测试工具&#xff0c;由java语言开发的&#xff0c;主要进行性能测试。 2、jmeter安装 jmeter官网下载链接&#xff1a; https://jmeter.apache.org/download_jmeter.cgi &#xff0c;查看是否安装成功【jmeter -v】 下载 java jdk1.8&…

计算一个4+4+1的队形变换问题

2 2 1 1 2 2 2 2 1 1 2 2 3 3 A A 3 3 4 4 A 12 4 4 4 4 12 A 4 4 2 2 1 1 2 2 操场上有4个人以4a1的结构在6*6的平面上运动&#xff0c;行分布是0&#xff0c;0&#xff0c;0&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;列分布…

[Android] c++ 通过 JNI 调用 JAVA函数

如何使用&#xff1a; Calling Java from C with JNI - CodeProject c里的 JNI 类型 和 JAVA 类型的映射关系&#xff1a; JNI Types and Data Structures Primitive Types and Native Equivalents Java TypeNative TypeDescriptionbooleanjbooleanunsigned 8 bitsbytejbyt…

局域网协议:以太网(Ethernet)详解

文章目录 Ethernet的组成以太网和 Wi-Fi以太网应用场景以太网的发展历程以太网数据链路层CSMA/CD (载波侦听多路访问/冲突检测)推荐阅读 以太网&#xff08;Ethernet&#xff09;是一种局域网&#xff08;LAN&#xff09;技术&#xff0c;用于在局域网范围内传输数据。它是最常…

【深度学习】gan网络原理生成对抗网络

【深度学习】gan网络原理生成对抗网络 GAN的基本思想源自博弈论你的二人零和博弈&#xff0c;由一个生成器和一个判别器构成&#xff0c;通过对抗学习的方式训练&#xff0c;目的是估测数据样本的潜在分布并生成新的数据样本。 1.下载数据并对数据进行规范 transform tran…

《ChatGPT实操应用大全》探索无限可能

&#x1f5e3;️探索ChatGPT&#xff0c;开启无限可能&#x1f680; 文末有免费送书福利&#xff01;&#xff01;&#xff01; ChatGPT是人类有史以来最伟大的发明。他能写作、绘画、翻译、看病、做菜、编程、数据分析、制作视频、解高等数学题…&#xff0c;他会的技能…

《2023开发者生态系统现状》:ChatGPT 是最常用的 AI 工具,60%开发者使用代码生成工具辅助编程

在前有编程语言历经 80 年的迭代&#xff0c;后有 GitHub Copilot、ChatGPT 等 AI 辅助编程工具的层出不穷&#xff0c;开发者的开发方式发生了什么样的变化&#xff1f;行业中领头的 Java IDE IntelliJ IDEA、Kotlin 编程语言背后的软件工具开发公司 JetBrains 基于全球 26,34…

【Java 基础】09 封装 继承 多态

我们都知道 Java 是以面向对象而著称&#xff0c;最著名的当然就是面向对象的三大特性啦&#xff0c;接下来就逐一举例说明一下。 1. 封装 封装指的是将类的内部细节隐藏起来&#xff0c;只对外提供必要的访问方式。 例如&#xff1a; 我们使用的计算器做一个乘法运算&#x…

[原创]Delphi的SizeOf(), Length(), 动态数组, 静态数组的关系.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XXQQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi…

SQL Sever 复习笔记【一】

SQL Sever 基础知识 一、查询数据第1节 基本 SQL Server 语句SELECT第2节 SELECT语句示例2.1 SELECT - 检索表示例的某些列2.2 SELECT - 检索表的所有列2.3 SELECT - 对结果集进行筛选2.4 SELECT - 对结果集进行排序2.5 SELECT - 对结果集进行分组2.5 SELECT - 对结果集进行筛选…

【前端】多线程 worker

VUE3 引用 npm install worker-loader 在vue.config.js文件的defineConfig里加上配置参数 chainWebpack: config > {config.module.rule(worker-loader).test(/\.worker\.js$/).use({loader: worker-loader,options: {inline: true}}).loader(worker-loader).end()}先在…

C语言错误处理之 “<errno.h>与<error.h>”

目录 前言 错误号处理方式 errno.h头文件 error.h头文件 参数解释&#xff1a; 关于的”__attribute__“解释&#xff1a; 关于“属性”的解释&#xff1a; 实例一&#xff1a; 实例二&#xff1a; error.h与errno.h的区别 补充内容&#xff1a; 前言 在开始学习…

后仿真 ERROR

后仿真 error ERROR (SFE-23): "input.scs" 252: The instance _57_D32_noxref is referencing an undefined model or subcircuit, parasitic_nwd. Either include the file containing the definition of parasitic_nwd, or define parasitic_nwd before running t…

VUE2+THREE.JS点击事件

THREE.JS点击事件 1.增加监听点击事件2.点击事件实现3.记得关闭页面时 销毁此监听事件 1.增加监听点击事件 renderer.domElement.addEventListener("click", this.onClick, false); 注:初始化render时监听 2.点击事件实现 onClick(event) {const raycaster new …