TS_开发一个项目

目录

 一、编译一个TS文件

1.安装TypeScript

2.创建TS文件

3.编译文件

4.用Webpack打包TS

①下载依赖

②创建文件

③启动项目

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。

TS中文文档icon-default.png?t=N7T8https://ts.nodejs.cn/

 一、编译一个TS文件

1.安装TypeScript

npm install -g typescript

2.创建TS文件

在编辑器里新建一个文件，名为  file.ts  ,内容如下：

function greeter(person) {return "Hello, " + person;
}let user = "Jane User";document.body.innerHTML = greeter(user);

3.编译文件

JS的运行环境(浏览器和nodeJS)不认识TS代码，所以TS想运行，必须先转化为JS代码，这个转化就叫做编译。

TS官方提供了编译器，编译时会将类型声明和类型相关的代码全部删除，只留下能运行的JS代码，不会改变JS的运行结果。

TS官方提供的编译器叫做tsc，它可以将ts代码编译成js代码。

tsc file.ts

此时可以看到，编译出了一个js文件，file.js。

创建一个 file.html ,运行到浏览器:

<!DOCTYPE html>
<html><head><title>TypeScript Greeter</title></head><body><script src="file.js"></script></body>
</html>

在file.html文件里上右键：

浏览器运行结果如下：

4.用Webpack打包TS

用webpack对ts文件进行打包，这样就不用每次更改ts文件，都重复 tsc file.ts ,这个操作了。一旦对ts文件进行更改，他会自动编译为js,并更新浏览器展示。

如果你没接触过webpack,查看这个文章;

webpack基础知识点icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/139058499?spm=1001.2014.3001.5501

①下载依赖

首先新创建一个文件夹名为   webpack-ts  使用编辑器打开这个文件夹。

接下来在这个文件夹里打开终端：

分别执行以下六个命令：

        1.下载ts

npm i -g typescript

 然后执行

tsc --init

如果报错：

 那是因为npm i -g typescript ， 忘了加 -g 。重新下载即可。

        2.下载webpack以及命令行工具。webpack-cli 是一个命令行工具，用于通过命令行使用 webpack 进行构建和打包前端项目。它允许开发人员在终端或命令提示符中运行常用 webpack 命令，以更快捷、高效的方式使用 webpack。

npm i webpack webpack-cli

        3.下载webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务，可以为静态文件提供服务，也可以动刷新和热替换。

npm i webpack-dev-server

        4.html-webpack-plugin简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。clean-webpack-plugin是一个Webpack插件，用于在每次构建前清空输出目录。

npm i html-webpack-plugin clean-webpack-plugin

        5.ts-loader是一个专门为 Webpack 设计的 TypeScript 加载器，它让 TypeScript 和现代前端构建流程无缝对接。

npm i ts-loader

         6.cross-env 是一个运行跨平台设置和使用环境变量的脚本工具，它帮助开发人员在不同操作系统上设置和运行环境变量，确保代码的可移植性。

npm i cross-env

 此时webpack-ts文件夹内已经生成了三个文件和node_modules文件夹。

node_modules文件夹里面是存放的刚才下载的各种依赖包。

package.json的作用是记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位），默认为大版本也可以npm i xxx@x.x.x锁定版本，还有npm run的脚本，项目的基本信息等

package-lock.json文件会保存 node_modules 中所有包的信息（详细版本、下载地址、缓存地址）等，重新 npm install 的时候会通过记录的信息提示安装速度，如通过 integrity 查找本地缓存而不使用远程仓库。

tsconfig.json是 TypeScript 编译器的配置文件，用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。通过修改该文件，可以定制 TypeScript 编译器的行为，例如指定编译目标、启用或禁用特定的语言特性、设置代码检查规则等。

②创建文件

webpack-ts下新建文件夹build,添加以下四个文件：

webpack.config.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");module.exports = (env, argv) => {let config = argv.mode === "development" ? devConfig : proConfig;return merge(baseConfig, config);
};

webpack.base.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/index.ts",output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",environment: {arrowFunction: false, // 关闭webpack的箭头函数，可选},},resolve: {extensions: [".js", ".ts"],},module: {rules: [{test: /.ts$/,use: [{loader: "ts-loader",},],exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({template: "./src/index.html",}),],
};

webpack.dev.config.js

这是开发版的打包文件，会直接启动项目。

module.exports = {devtool: "inline-source-map",};

webpack.pro.config.js

这是生产环境的打包文件，会在build文件夹下自动生成dist文件夹，dist文件夹里面的内容就是项目编译后的文件，放到生产环境即可。

const { CleanWebpackPlugin } = require("clean-webpack-plugin");module.exports = {plugins: [new CleanWebpackPlugin()],
};

webpack-ts下新建文件夹src,并在src文件夹下创建两个文件，内容如下：

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TS & webpack</title>
</head><body><div id="app"></div>
</body></html>

index.ts

const box = document.querySelector('#app')
const hello: string = 'Hello ts'if (box !== null) {box.innerHTML = hello
}

此时项目结构：

③启动项目

终端执行命令，开发环境:

npm run start

此时可以看到浏览器页面：

此时在项目 index.ts 文件内进行更改，可以看到浏览器自动同步更改为最新的。

终端执行命令，生产环境：

npm run build

会在build文件夹下自动生成dist文件夹，dist文件夹里面的内容就是项目编译后的文件，放到生产环境即可。

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

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

相关文章

我在高职教STM32——时钟系统与延时控制（1）

我在高职教STM32——时钟系统与延时控制（1）

大家好&#xff0c;我是老耿&#xff0c;高职青椒一枚&#xff0c;一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次&#xff0c;同行应该都懂的&#xff0c;老师在课堂上教学几乎是没什么成就感的。正因如此&#xff0c;才有了借助 CSDN 平台寻求认同感和成就…
阅读更多...
6.26.4.3 条件生成对抗和卷积网络用于x射线乳房质量分割和形状分类

6.26.4.3 条件生成对抗和卷积网络用于x射线乳房质量分割和形状分类

一种基于条件生成对抗网络(conditional Generative Adversarial Networks, cGAN)的乳房肿块分割方法。假设cGAN结构非常适合准确地勾勒出质量区域&#xff0c;特别是当训练数据有限时。生成网络学习肿瘤的内在特征&#xff0c;而对抗网络强制分割与基础事实相似。从公开DDSM数据…
阅读更多...
【语言模型】深入探索语言模型中的神经网络算法：原理、特点与应用

【语言模型】深入探索语言模型中的神经网络算法：原理、特点与应用

随着人工智能技术的飞速发展&#xff0c;神经网络算法在语言模型中的应用日益广泛&#xff0c;为自然语言处理领域带来了革命性的变革。本文将深入探讨当前语言模型中常用的几种神经网络算法&#xff0c;包括全连接神经网络、卷积神经网络、循环神经网络、长短期记忆网络、门控…
阅读更多...
五线谱与简谱有什么区别 五线谱简谱混排怎么打 吉他谱软件哪个好

五线谱与简谱有什么区别 五线谱简谱混排怎么打 吉他谱软件哪个好

五线谱与简谱作为音乐记谱领域的两大主流系统&#xff0c;各自承载着深厚的历史渊源与独特的表现力&#xff0c;并在全球范围内被不同程度地接受和应用。尽管两者都是为了记录音乐作品中的音高和节奏信息&#xff0c;但其内在机制、适用范围以及学习曲线存在显著差别。下面我们…
阅读更多...
版本控制系统：Git

版本控制系统：Git

基本操作 ctrl上行键&#xff1a;上次代码 本地仓库&#xff1a;Git init 新建文件&#xff1a;touch xxxx.xxx 查看状态&#xff1a;Git status 文件从工作区——暂存区&#xff1a;Git add ./文件名(.是通配符代表所有) 暂存区——仓库&#xff1a;Git commit -m &…
阅读更多...
Spring企业开发核心框架-上

Spring企业开发核心框架-上

一、框架前言 1、总体技术体系 单一架构 一个项目&#xff0c;一个工程&#xff0c;导出为一个war包&#xff0c;在一个Tomcat上运行。也叫all in one. 单一架构&#xff0c;项目主要应用技术框架为&#xff1a;Spring&#xff0c;SpringMVC&#xff0c;Mybatis等 分布式架构…
阅读更多...
vue-cil搭建项目

vue-cil搭建项目

目录 一、使用 HbuilderX 快速搭建一个 vue-cli 项目 1.需要的环境——Node.js 2.搭建Vue-cil项目 二、组件路由 1.安装vue-router 2.创建router目录 3.使用路由 4.在main.js中配置路由 vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个 vue 的项目模板&#xff1b;…
阅读更多...
VsCode：配置TypeScript开发环境

VsCode：配置TypeScript开发环境

一、前提 电脑已经安装了npm 何如安装npm&#xff0c;请点击查看Node.js、npm常用命令、安装多个node版本 提醒&#xff1a;下文讲解操作是在mac 系统进行的&#xff0c;TypeScript简称&#xff1a;ts 二、安装TypeScript 在终端里执行命令&#xff1a;npm install -g typescr…
阅读更多...
1panel 搭建多个网站

1panel 搭建多个网站

1panel 部署多个网站&#xff0c;另外的域名&#xff0c;或无域端口搭建方法。 当我们已经部署好一个网站后&#xff0c;想再部署一个网站在我们的服务器上时&#xff0c; 步骤&#xff1a;&#xff08;另外的域名&#xff0c;部署在同一个服务器方法&#xff09; 运行环境里…
阅读更多...
六、资产安全—信息分级资产管理与隐私保护（CISSP）

六、资产安全—信息分级资产管理与隐私保护（CISSP）

目录 1.信息分级 2.信息分级方法 3.责任的层级 4.资产管理 5.隐私数据管理角色 6.数据安全控制 7.数据保护方案 8.使用安全基线 六、资产安全—数据管理（CISSP）： 五、身份与访问管理—身份管理和访问控制管理（CISSP）： 1.信息分级 信息分级举列： 2.信息分级方…
阅读更多...
K8S 角色/组件及部署方式的简单概述

K8S 角色/组件及部署方式的简单概述

1.宏观架构图 2.角色详情 2.1 Master(Controller Plane) 早期是叫 Master 节点&#xff0c;后期改名为 Controller Plane&#xff0c;负责整个集群的控制和管理 Master 不会干活的(当然你让它干也是会干的&#xff0c;涉及到污点容忍)&#xff0c;而是起到访问入口&#xff…
阅读更多...
天池大赛Higress插件官方demo详细部署+调试

天池大赛Higress插件官方demo详细部署+调试

天池大赛Higress插件官方demo详细部署调试 契机 ⚙ 使用Higress AI网关优化AI调用成本。就是基于向量召回相似问题的缓存&#xff0c;降低LLM API调用成本。就是开发一个网关插件做QA缓存嘛。前文已经成功复现了hello-world插件&#xff0c;这次结合官方提供的AI-Cache插件自…
阅读更多...
SecureBoost：一种无损的联邦学习框架

SecureBoost：一种无损的联邦学习框架

SecureBoost&#xff1a;一种无损的联邦学习框架 文章目录 SecureBoost&#xff1a;一种无损的联邦学习框架1 引言2 预备知识与相关工作3 问题描述4 联邦学习与SecureBoost5 联邦推理6 无损属性的理论分析7 安全讨论8 实验9 结论 摘要——用户隐私保护是机器学习中的一个重要问…
阅读更多...
LSS论文与代码详解

LSS论文与代码详解

本文首发于公众号【DeepDriving】&#xff0c;欢迎关注。 0. 前言 最近几年&#xff0c;BEV感知是自动驾驶领域中一个非常热门研究方向&#xff0c;其核心思想是把多路传感器的数据转换到统一的BEV空间中去提取特征&#xff0c;实现目标检测、地图构建等任务。如何把多路相机的…
阅读更多...
关于bim数字孪生threejs中使用glb文件大小优化及加载慢的说明(笔记)

关于bim数字孪生threejs中使用glb文件大小优化及加载慢的说明(笔记)

在用three.js开发的时候发现&#xff0c;稍微大一点的glb或者fbx文件加载的时候很慢很卡 一直不理解这个卡和慢取决于哪些条件&#xff0c;下面来详细说一下 1、关于模型 不是越大加载越卡顿&#xff0c;而是却决于三角面数量&#xff0c;当累计三角面数量达到3000万时会出现明…
阅读更多...
ASUS/华硕天选5 FX607J系列 原厂Windows11系统

ASUS/华硕天选5 FX607J系列 原厂Windows11系统

安装后恢复到您开箱的体验界面&#xff0c;带原机所有驱动和软件&#xff0c;包括myasus mcafee office 奥创等。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http:…
阅读更多...
LLaMA2模型训练加速秘籍：700亿参数效率提升195%！

LLaMA2模型训练加速秘籍：700亿参数效率提升195%！

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID &#xff5c; 计算机视觉研究院 学习群 &#xff5c; 扫码在主页获取加入方式 开源地址&#xff1a;https://github.com/hpcaitech/ColossalAI 计算机视觉研究院专栏 Column of Computer Vision Ins…
阅读更多...
Microsoft Defender防病毒怎么关闭！详细步骤看这里！

Microsoft Defender防病毒怎么关闭！详细步骤看这里！

Microsoft Defender是Windows系统中的防病毒软件&#xff0c;提供了实时的安全保护功能。但是&#xff0c;在某些情况下&#xff0c;用户想要关闭系统内的Microsoft Defender功能&#xff0c;但不知道要怎么操作才能关闭&#xff1f;接下来小编给大家带来详细的关闭步骤介绍。 …
阅读更多...
柔性数组(flexible array)

柔性数组(flexible array)

柔性数组从C99开始支持使用 1.柔性数组的概念 概念&#xff1a; 结构体中&#xff0c;结构体最后一个元素允许是未知大小的数组&#xff0c;这就叫[柔性数组]的成员 struct S {int n;char arr[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点&#xff1a; 结构体中柔性…
阅读更多...
VBA技术资料MF170：调整多个工作薄中签名位置

VBA技术资料MF170：调整多个工作薄中签名位置

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023