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

完整代码在页面顶部，下载后解压，终端输入  npm i   ,然后  npm run start 即可启动项目。

用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文件夹里面的内容就是项目编译后的文件，放到生产环境即可。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

单片机软件架构连载(2)-指针

单片机软件架构连载(2)-指针

我工作了10年&#xff0c;大大小小做过几十个项目&#xff0c;用指针解决过很多实际产品的痛点&#xff0c;比如写过小系统&#xff0c;数据结构(队列&#xff0c;链表)&#xff0c;模块化编程等等..... 今天贴近实际&#xff0c;给大家总结了c语言指针常用的知识点&#xff0c…
阅读更多...
用可视化的方式学统计学

用可视化的方式学统计学

本次分享一个统计学学习工具：看见统计。 看见统计致力于用数据可视化 (使用D3.js完成) 让统计概念更容易理解，源于布朗大学几位作者👇 看见统计共有6个章节， 下面来看看具体内容， 中心极限定理 对于一个（性质比较好的）分布，如果我们有足够大的独立同分布的样本，其…
阅读更多...
【C语言】刷题笔记 Day1

【C语言】刷题笔记 Day1

多刷题 多思考 【题目1】 实现字母的大小写转换&#xff0c;实现多组输入输出 1. getchar 为输入函数&#xff0c;EOF&#xff08;end of file&#xff09;为文件结束标志&#xff0c;通常为文件结束的末尾。 2. 题目中要求实现多组输入输出&#xff0c;那我们用 while 循…
阅读更多...
学习无人机飞行技术，有哪些就业方向？

学习无人机飞行技术，有哪些就业方向？

随着无人机技术的不断进步和应用领域的拓展&#xff0c;研发创新人才的需求也将不断增加&#xff0c;那就业前景还是很广阔的。学习无人机飞行技术后&#xff0c;有以下多个就业方向可供选择&#xff1a; 1. 无人机操作员&#xff1a; - 负责操控和监控无人机飞行&#xff0c;…
阅读更多...
支持混合模型的项目管理系统有哪些？PingCode 混合模型上线

支持混合模型的项目管理系统有哪些？PingCode 混合模型上线

众所周知&#xff0c;敏捷和瀑布是国内外研发项目管理的主流方法。然而&#xff0c;面对复杂性高、规模大、需要创新的项目&#xff0c;单一采用敏捷或瀑布方法往往难以完全满足需求。所以&#xff0c;国内许多企业趋向于结合多种管理模型的优势&#xff0c;形成一种混合管理模…
阅读更多...
第一后裔掉宝奖励有什么 怎么领取第一后裔掉宝奖励

第一后裔掉宝奖励有什么 怎么领取第一后裔掉宝奖励

第一后裔在今天就要正式上线了&#xff0c;虽然是一款刚刚上线的新游戏&#xff0c;但是其实很早就测试过了&#xff0c;而且测试过很多次&#xff0c;所以有很多已经体验过的小伙伴&#xff0c;这款游戏的玩法还是比较有意思的&#xff0c;第三人称刷宝射击加上MMORPG的玩法&a…
阅读更多...
力扣 用队列实现栈（Java）

力扣 用队列实现栈（Java）

核心思想&#xff1a;因为队列都是一端进入另一端出&#xff08;先进先出&#xff0c;后进后出&#xff09;&#xff0c;因此一个队列肯定是不能实现栈的功能的&#xff0c;这里就创建两个队列来模拟栈的先进后出&#xff0c;后进先出。 比如说如果是push操作我们肯定是要弹出栈…
阅读更多...
自动编码器简单理解及简单使用描述

自动编码器简单理解及简单使用描述

1. 什么是自动编码器&#xff1f; 自动编码器分为编码器和解码器&#xff0c;其中解码器只在训练阶段用到。具体过程就是&#xff1a; 首先&#xff0c;输入训练样本&#xff0c;编码器对输入样本进行编码&#xff0c;对其进行降维&#xff0c;直到到达某个瓶颈层&#xff1b…
阅读更多...
软件开发案例参考

软件开发案例参考

前言&#xff1a;基于平台现有需求进行新功能模块开发与实现&#xff0c;以下内容为部分源码解析&#xff0c;仅提供一些思路参考&#xff0c;不予以客观指导&#xff0c;毕竟条条大路通罗马嘛&#xff1b; 语言&#xff1a;C# 工具&#xff1a;visual studio 2017/visual st…
阅读更多...
WGAN(Wassertein GAN)

WGAN(Wassertein GAN)

WGAN E x ∼ P g [ log ⁡ ( 1 − D ( x ) ) ] E x ∼ P g [ − log ⁡ D ( x ) ] \begin{aligned} & \mathbb{E}_{x \sim P_g}[\log (1-D(x))] \\ & \mathbb{E}_{x \sim P_g}[-\log D(x)] \end{aligned} ​Ex∼Pg​​[log(1−D(x))]Ex∼Pg​​[−logD(x)]​ 原始 GAN …
阅读更多...
T4打卡 学习笔记

T4打卡 学习笔记

所用环境 ● 语言环境&#xff1a;Python3.11 ● 编译器&#xff1a;jupyter notebook ● 深度学习框架&#xff1a;TensorFlow2.16.1 ● 显卡&#xff08;GPU&#xff09;&#xff1a;NVIDIA GeForce RTX 2070 设置GPU from tensorflow import keras from tensorflow.keras…
阅读更多...
uniapp学习笔记

uniapp学习笔记

uniapp官网地址&#xff1a;https://uniapp.dcloud.net.cn/ 学习源码&#xff1a;https://gitee.com/qingnian8/uniapp-ling_project.git 颜色网址&#xff1a;https://colordrop.io/ uniapp中如何获取导航中的路由信息&#xff1f; onLoad(e){console.log(e)console.log(e.w…
阅读更多...
探索IT世界的第一步：高考后的暑期学习指南

探索IT世界的第一步：高考后的暑期学习指南

目录 前言1. IT领域概述1.1 IT领域的发展与现状1.2 IT领域的主要分支1.2.1 软件开发1.2.2 数据科学1.2.3 网络与安全1.2.4 系统与运维 2. 学习路线图2.1 基础知识的学习2.1.1 编程语言2.1.2 数据结构与算法 2.2 实战项目的实践2.2.1 个人项目2.2.2 团队项目 2.3 学习资源的利用…
阅读更多...
Vue入门-如何创建一个Vue实例

Vue入门-如何创建一个Vue实例

创建一个一个Vue实例总共分为四步&#xff1a; 1.创建一个容器 2.引包&#xff1a;地址栏搜索v2.cn.vuejs.org这是vue2的官网地址&#xff0c;把2去掉就是vue3的官网地址&#xff0c;我们的包分为开发版本和生产版本&#xff0c;开发版本包含完整的警告和调试模式生产版本删除…
阅读更多...
Axure原型工具速览：一分钟带你领略设计魅力！

Axure原型工具速览：一分钟带你领略设计魅力！

Axure曾经成为产品经理必备的原型设计工具&#xff0c;甚至被认为是专门为产品经理设计的工具。但事实上&#xff0c;软件Axure的应用场景并不局限于产品经理构建产品原型。UI/UX设计师还可以使用Axure软件构件应用APP原型&#xff0c;网页设计师也可以使用Axure软件构件网站架…
阅读更多...
Python中的并发编程（5）PyQt 多线程

Python中的并发编程（5）PyQt 多线程

PyQt 多线程 1 卡住的计时器 我们定义了一个计时器&#xff0c;每秒钟更新一次显示的数字。此外我们定义了一个耗时5秒的任务oh_no&#xff0c;和按钮“危险”绑定。 当我们点击“危险”按钮时&#xff0c;程序去执行oh_no&#xff0c;导致显示停止更新了。 import sys im…
阅读更多...
类和对象【上】【C++】

类和对象【上】【C++】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …
阅读更多...
泰勒展开式在Android系统或应用程序中的应用

泰勒展开式在Android系统或应用程序中的应用

泰勒展开式在Android系统或应用程序中的应用 引言 泰勒展开式（Taylor Series）是高等数学中的一个重要工具，它允许我们将一个复杂函数表示为一个无穷多项式的和，从而近似计算函数值。在Android开发中，理解和应用泰勒展开式有助于优化涉及复杂数值计算的算法，提高应用程序…
阅读更多...
感动的短视频：成都柏煜文化传媒有限公司

感动的短视频：成都柏煜文化传媒有限公司

感动的短视频&#xff1a;瞬间触动心灵的温暖力量 在这个快节奏、高压力的时代&#xff0c;我们常常在忙碌与喧嚣中穿梭&#xff0c;心灵深处那份最纯粹的感动似乎变得愈发珍贵而难得。然而&#xff0c;就在这样一个数字化盛行的今天&#xff0c;短视频以其独特的魅力&#xf…
阅读更多...
OpenSearch的演进与语义检索技术革新

OpenSearch的演进与语义检索技术革新

周末听了一场关于Open Search的技术分析&#xff0c;整理如下&#xff0c;供大家参考。OpenSearch&#xff0c;作为ElasticSearch的一个分支&#xff0c;不仅继承了其强大的搜索和分析能力&#xff0c;更在开源社区的驱动下&#xff0c;不断演进和创新。本文将介绍OpenSearch的…
阅读更多...
最新文章

Copyright @ 2022~2023