猿创征文｜【Typescript】搭建TS的编译环境

贤蛋大眼萌 2023-04-07 原文

🍳作者： $\color{#FF0000}{贤蛋大眼萌，一名很普通但不想普通的程序媛}$ 🤳

🙊语录： $\color{#0000FF}{多一些不为什么的坚持}$

📝本文章收录于专栏：Typescript学习

💭 $\color{#ff7f50}{眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台--牛客网}$

👉🏻点击跳转刷题网免费注册学习

搭建TS的编译环境

🎈 认识Typescript

作为前端开发人员，我们都知道JavaScript是一门优秀的语言，并且在很多领域被大家广泛使用。但是随着用JavaScript的开发者越来越多，JavaScript 的缺点就被暴露出来了。例如ES5以及之前的使用的var关键字关于作用域的问题，最初JavaScript设计的数组类型并不是连续的内存空间等等。

随着ES6、7、8等的推出，每次都会让这门语言更加现代、更加安全、更加方便。但是JavaScript在类型检测上依然是毫无进展。

如果JavaScript没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误，有时候就是因为这个错误，导致整个项目崩溃。这个时候就萌生了Typescript

官方对Typescript的定义：

**Typescipt:**是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。

可以理解长是加强版的JavaScript。JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，所以ES6、ES7、ES8等新语法标准，它都是支持的。并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等。并且TypeScript最终会被编译成JavaScript代码。

💊 Typescript 的编译环境

TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境

我们需要先进行全局安装：

# 安装命令
npm install typescript -g
# 查看版本
tsc --version

测试：

🚀 搭建TypeScript的运行环境

上面介绍到的ts环境运行，但是这样每次都需要转换ts代码，很麻烦，下面我们介绍两种搭建Typescript的运行环境。

🎯 项目环境的基本配置

直接配置webpack，让webpack对我们编写的代码进行一个编译，并且自动引入编译后的js文件；
webpack可以在代码修改后重新帮助我们进行编译，并且自动刷新浏览器，不需要手动操作

使用 npm 来初始化 package.json 文件：

npm init -y

安装本地TypeScript依赖

npm install typescript

初始化tsconfig.json文件

在进行TypeScript开发时，我们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的。

tsc --init

配置tslint来约束代码（推荐使用）

# 全局安装
npm install tslint -g
# 在项目中初始化tslint的配置文件：tslint.json
tslint -i

🏓 使用ts-node

# 安装ts-node
npm install ts-node -g
# 安装ts-node需要依赖 tslib 和 @types/node 两个包
npm install tslib @types/node -g

测试代码：

🥁 配置 webpack

配置webpack 需要安装相关的依赖 webpack、webpack-cli、webpack-dev-server。从webpack 4 之后，在webpack环境下需要多配置webpack-cli。而webpack-dev-server则是可以在我们帮助我们开启本地服务，并且热更新

# 安装webpack 相关依赖
npm install webpack webpack-cli  webpack-dev-server -D

为了方便启动webpack，我们在package.json中添加如下启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  }

补充：如果我们需要区分开发的环境，则需要添加

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
}

并且安装 cross-env 依赖

npm install cross-env -D

因为需要解析.ts文件，所以需要依赖对应的loader：ts-loader

npm install ts-loader -D

编译后的代码需要对应的html模块作为它的运行环境，需要使用html-webpack-plugin来将它插入到对应的模板中

npm install html-webpack-plugin -D

最后：配置webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {},
  resolve: {
    extensions: [".ts", ".js", ".cjs", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
}

🍳 测试环境

在终端编写命令

npm run serve

在浏览器中打开：http://localhost:8080/

PS:

求知无坦途，学问无捷径。👣 $\color{#ff7f50}{一步一个脚印，你走过的路，每一步都算数。}$ 每一次进步都是对自己努力的肯定。如果读了文章有收获，不如一起来学习，一起进步吧。传送门🚪刷题神器

征文 Typescript span class token typescript javascript 前端开发语言

有关猿创征文｜【Typescript】搭建TS的编译环境的更多相关文章

ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2
我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain
ruby - Sinatra set cache_control to static files in public folder编译错误 - 2
我不知道为什么，但是当我设置这个设置时它无法编译设置:static_cache_control，[:public，:max_age=>300]这是我得到的syntaxerror,unexpectedtASSOC,expecting']'(SyntaxError)set:static_cache_control,[:public,:max_age=>300]^我只想将“过期”header设置为css、javaascript和图像文件。谢谢。最佳答案我猜您使用的是Ruby1.8.7。Sinatra文档中显示的语法似乎是在Ruby1.
Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2
之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m
安卓apk修改(Android反编译apk) - 2
最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路
ruby-on-rails - ruby gem如何在rails环境下工作 - 2
我试图在rails中了解rubygems是如何变得可以自动使用的，而不是在使用required的文件中gem？最佳答案这是通过bundler/setup完成的:http://bundler.io/v1.3/bundler_setup.html.它在您的config/boot.rb文件中是必需的。简而言之，它首先将环境变量设置为指向您的Gemfile:ENV['BUNDLE_GEMFILE']||=File.expand_path('../../Gemfile',__FILE__)然后它通过要求bundler/setup将所有ge
ruby-on-rails - 我需要一个真正的 UNIX RoR 开发环境 - 2
从一开始，我就是一个Windows高手。我从MS-DOS开始。我安装了Windows2.1以及此后的所有Windows。现在，我家里有10台不同的Windows机器在运行，从Windows7Ultimate到各种版本的WindowsServer。我还没有完成Windows8，也不想去那里。我在服务器和各种软件方面都有UNIX经验，但它并不是我的首选环境。但是，我想我正在转换。我试图假装使用Cygwin和MSYS在Windows下运行UNIX。我的目的是搭建一个开发环境。两者都让我失望了。我花了比开发更多的时间来解决一系列技术问题。这是NotAcceptable。到目前为止，我的Ruby
.net - 是否有 Ruby .NET 编译器？ - 2
是否有适用于Ruby语言的.NETFramework编译器？我听说过DLR(动态语言运行时)，这是否将使Ruby能够用于.NET开发？最佳答案 IronRuby是Microsoft支持的项目，建立在动态语言运行时之上。关于.net-是否有Ruby.NET编译器？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/199638/
ruby-on-rails - 如果特定语言环境中缺少翻译，如何配置 i18n 以使用 en 语言环境？ - 2
如果特定语言环境中缺少翻译，如何配置i18n以使用en语言环境翻译？当前已插入翻译缺失消息。我正在使用RoR3.1。最佳答案找到相似的question这里是答案:#application.rb#railswillfallbacktoconfig.i18n.default_localetranslationconfig.i18n.fallbacks=true#railswillfallbacktoen,nomatterwhatissetasconfig.i18n.default_localeconfig.i18n.fallback
ruby-on-rails - 可移植 Ruby on Rails 环境 - 2
我给自己买了一个新的8gigUSBkey，我正在寻找一个合适的解决方案来拥有一个可移植RoR环境来学习。我在谷歌上搜索了一下，发现了一些可能性，但我很想听听一些现实生活中的经历和意见。谢谢! 最佳答案我喜欢InstantRails，非常容易使用，无需安装程序，也不会修改您的系统环境。关于ruby-on-rails-可移植RubyonRails环境，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/q
ruby-on-rails - 如何通过 URL 更改语言环境？ - 2
在我的双语Rails4应用程序中，我有一个像这样的LocalesController:classLocalesController用户可以通过此表单更改其语言环境:deflocale_switcherform_tagurl_for(:controller=>'locales',:action=>'change_locale'),:method=>'get',:id=>'locale_switcher'doselect_tag'set_locale',options_for_select(LANGUAGES,I18n.locale.to_s)end这有效。但是，目前用户无法通过URL更改