TypeScript（ts-loader，tsconfig.json及lodash）

已于 2022-07-14 19:05:15 修改
阅读量945 收藏 1
点赞数
分类专栏： 前端 基础 h5 文章标签： 前端 经验分享 移动端 vue.js 其他
于 2022-07-14 19:00:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c62387723sq/article/details/125790271
版权
基础 同时被 3 个专栏收录
69 篇文章 1 订阅
订阅专栏
前端
68 篇文章 1 订阅
订阅专栏
h5
22 篇文章 1 订阅
订阅专栏

在这里插入图片描述

ts-loader

可以把ts和webpack整合到一起

安装
npm typescript ts-loader -D

参数
exclude是配置排除，不使用
use：ts配置的ts去校验
resolve配置可解析的后缀名的文件
在这里插入图片描述
在这里插入图片描述

tsconfig.json

安装tsconfig.json
npx tsc - - init

在这里插入图片描述
把几个重要的配置打开
rootDir并把值改为当前文件夹下的src
在这里插入图片描述
outDir并把值改为当前文件夹下的dist
在这里插入图片描述

设置app.js的值
在这里插入图片描述

npx webpack 成功后
bundle.js中就会有解析过的代码了（var age = 18；）
在这里插入图片描述

lodash

可以访问typescriptlang.org
https://blog.csdn.net/Mingyueyixi/article/details/72782026
在这里插入图片描述
然后就可以搜索了

比如搜索lodash，找到后，复制右上角@types/lodash

安装lodash：
npm i @types/lodash -D
在这里插入图片描述
安装之前引入lodash 底部红色下划线 报错
在这里插入图片描述
安装完npm i @types/lodash -D

关闭app.js再打开或者稍等一会儿，引入lodash就不报错了

在这里插入图片描述

这样就可以使用lodash的方法了
比如_join（[]) 参数是数组，不写参数会报错
在这里插入图片描述

差不少
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ts-transform-paths:根据tsconfig路径加载节点模块
05-02
ts-transform-paths 使用它来加载其位置在tsconfig.json的path部分中指定的模块。 安装 yarn add ts-transform-paths -D 要求 打字稿> = 2.4.1 如何使用 不幸的是，TypeScript本身目前还没有提供使用自定义转换器的任何简便方法（请参阅 ）。 以下是自定义转换器的示例用法。 tsconfig.json { " compilerOptions " : { " paths " : { " @schema " : [ " ./src/schema " ], " @modules/* " : [ " ./src/modules/* " ] } } } webpack（使用ts-loader或awesome-typescript-loader） // webpack.con
ncc：将Node.js项目编译为单个文件。 支持TypeScript，二进制插件，动态要求
02-22
ncc 简单的CLI，用于将Node.js模块及其所有依赖项（gcc样式）编译到一个文件中。 动机 将最少的软件包发布到npm 仅将相关的应用程序代码运送到无服务器环境 不要浪费时间配置捆绑器 通常更快的启动时间和更少的I / O开销 编译过的类似语言的经验（例如go ） 设计目标 零配置 内置TypeScript 仅支持Node.js程序作为输入/输出 支持所有Node.js模式和npm模块 用法 安装 npm i -g @vercel/ncc 用法 $ ncc < cmd> < opts> 例如： $ ncc build input.js -o dist 将input.js的Node.js紧凑版输出到dist/index.js 。 注意：如果输入文件使用.cjs扩展名，则相应的输出文件也是如此。 这对于希望在package.json文件中使用"type": "modu
探秘 TypeScript 开发利器：ts-loader
最新发布
gitblog_00064的博客
03-22 523
探秘 TypeScript 开发利器：ts-loader 项目地址:https://gitcode.com/TypeStrong/ts-loader 在 JavaScript 的世界中，TypeScript 已经成为提升开发效率和代码质量的重要工具。而今天我们要介绍的 ts-loader 是一个专门为 Webpack 设计的 TypeScript 加载器，它让 TypeScript 和现代前端构建...
在TypeScript中使用第三方库：为你的代码增添一抹优雅
青轩桃李能几何，流光欺人忽蹉跎
08-02 1195
大多数流行的第三方库都有相关的类型定义文件可供使用，可以通过 npm 或 yarn 安装这些类型定义文件。类型定义文件通常以的形式命名。这将安装包，它包含了 lodash 库的类型声明。安装了类型定义文件后，TypeScript 编译器会自动使用它们。你无需手动导入类型定义文件，编译器可以根据你在代码中导入的第三方库自动关联相应的类型定义。// 输出：[[1, 2], [3, 4], [5]]在这个例子中，我们安装了 lodash 的类型定义文件，并使用import。
Cocos Creator + TypeScript项目中使用npm loadsh包
Wind not Stop！
12-18 2555
Cocos Creator在TypeScript中使用npm管理loadshCocos Creator + TypeScript + npm步骤1:创建新的工程步骤2:npm装包步骤3:代码中按需引入lodash函数步骤4:浏览器中运行看结果 Cocos Creator + TypeScript + npm 本篇主要讲Cocos Creator的TypeScript项目中使用npm管理包的一种使用...
TS 编译工具！从 ts-loader 到 Babel
iamxuqianqian的博客
04-23 7023
ts-loader 这是用于 webpack 的 TypeScript 加载器，将 TypeScript 编译成 JavaScript。 ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。 安装 yarn add ts-loader --dev or npm install ts-loader --save-dev 如果还没有安装 TypeScript，你需要先安装一下： yarn add typ
【TypeScript】怎样在TS中使用lodash?
纠缠AI的亮子
05-21 7365
lodash是一个广泛使用的JS库，怎样在TypeScript开发中使用它呢？ 首先安装： npm i lodash npm i -D @types/lodash 使用方法一： 在 tsconfig.json 中开启： "esModuleInterop": true 然后就可以这样引用： import _ from 'lodash' 使用方法二： 如果没有启用 esModuleInterop，则可以这样引用： import * as _ from 'lodash' ...
vue/vue3 项目中lodash函数的使用，提升工作效率的好帮手！
浩星
09-26 3132
分享下个人使用的一个好的js库，里面封装了大量的方法，比如数组根据对象某个属性去重，比如我们移动端中经常会有防抖节流的应用场景，拷贝对象的时候，修改他的值，老是影响源数据，等等系列的问题都可以有很便捷的方法来解决！
Typescript总结(一)
weixin_47450807的博客
02-25 1083
一、javascript的痛点 在javascript设计之初存在一些问题，但是随着现在的发展javascript的缺点已经不断的改正。但是到目前为止javascript仍然没有加入类型检测的机制。我们在开发过程中对于错误肯定是越早发现越好，能在写代码时发现错误，就不要再代码编译再发现。能在代码编译期间发现的，就不要在代码运行期间发现，能在开发期间发现错误，就不要再测试期间发现错误，能在测试期间发现错误就不要在上线后发现错误。 下面我们看一个例子： 上面一个函数，没有类型限制，当我们执行时才报错，此时后面
[Vue3]使用Ts在Vue3中引入Lodash库
Github☛arreychan
03-01 3358
[Vue3]使用Ts在Vue3中引入Lodash库 安装yarn add lodash -S & yarn add @types/lodash -S 在组件中引入import * as _ from 'lodash'
TS-ESNode：Node.JS Loader钩子可在节点加载TS-ESNode时转换打字稿源和文件。 用于ESNext和ESModule Node.JS的TS节点
02-09
TS-ES节点 这是Node.JS 13.9或更高版本的Node.JS Loader挂钩，可使用getFormat ， resolve和transformSource挂钩将TypeScript文件转换为JavaScript。 对于Node.JS，请使用npm install @k-foss/ts-esnode@latest用法...
typescript-lambda-bundle:使用webpack打包的TypeScript Lambda示例
04-09
Typescript-lambda-bundle 此示例说明了如何将打字稿... 我们正在利用ts-loader loader for webpack编译我们的TypeScript，并吐出一个JavaScript包，其中包含我们的转码以及lambda使用的任何外部依赖项，从而大大简化
react-typescript-setup-basic
05-13
开始一个新的React + Typescript应用程序npm init npm i-保存react-react-dom npm i -D打字稿npm i -D @ types / react @ types / react-dom @ types / node npm i -D webpack webpack-cli npm i -D ts-loader 设置...
typescript+react+webpack+react-bootstrap搭建
06-29
npm i -S typescript ts-loader source-map-loader npm i -S eslint eslint-plugin-react eslint-plugin-typescript typescript-eslint-parser npm i -S csstype npm i -S jquery bootstrap @types/jquery @types/...
parcel-plugin-typescript：:police_car_light:对Parcel的增强TypeScript支持
01-30
包裹插件打字稿 增强的Parcel TypeScript集成。 Parcel本机支持的差异 ...为了进行配置，您可以在tsconfig.json传递一个parcel-plugin-typescript tsconfig.json对象： { "compilerOptions" : { ... }
rc-config-loader:从。{product} rc。{json，yml，js}文件加载配置
05-10
一个package.json属性（如果需要） JSON或YAML，JS“ rc文件” .<product>rc或.<product>rc.json或.<product>rc.js或.<product>rc.yml ， .<product>rc.yaml TypeScript支持包括.d.ts区别使用 安全API rc在.js文件...
typescript-expect-plugin:la懒惰，在注释中编写简单的测试
03-19
快速开始npm install typescript-expect-plugin将插件添加到tsconfig.json ： { "compilerOptions" : { "plugins" : [ { "name" : "typescript-expect-plugin" } ] } ,}将VS Code打字稿更改为工作区版本：用法警告 :...
vue项目引入ts步骤(小结)
12-13
最近考虑到老项目代码的可维护性以及稳定性，决定引入ts做规范检测。...cnpm i typescript ts-loader --save-dev 3. 添加tsconfig.json文件 在项目根目录下添加 tsconfig.json 文件。tsconfig.jso
{ "name": "ts_base", "version": "1.0.0", "description": "", "main": "./src/index.ts", "scripts": { "start": "webpack-dev-server --mode development --config ./build/webpack.config.js", "build": "webpack --mode production --config ./build/webpack.config.js", "lint": "eslint src --ext .js,.ts", "test": "jest" }, "keywords": [ "TypeScript" ], "author": "liangxiao", "license": "ISC", "devDependencies": { "@types/jest": "^24.0.15", "@types/jquery": "^3.3.29", "@types/source-map": "^0.5.2", "@typescript-eslint/eslint-plugin": "^1.10.2", "@typescript-eslint/parser": "^1.10.2", "awesome-typescript-loader": "^5.2.1", "clean-webpack-plugin": "^3.0.0", "eslint": "^5.16.0", "fork-ts-checker-webpack-plugin": "^1.3.7", "html-webpack-plugin": "^3.2.0", "jest": "^24.8.0", "ts-jest": "^24.0.2", "ts-loader": "^6.0.2", "typescript": "^3.5.1", "webpack": "^3.6.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^2.6.9", "webpack-merge": "^4.2.1" }, "dependencies": { "jquery": "^3.4.1", "moment": "^2.24.0" } } 配置是否正确
07-20
此外，`awesome-typescript-loader`也不再推荐使用，而是建议使用更现代的`ts-loader`。 为了解决这个问题，可以尝试以下步骤： 1. 更新Webpack相关的依赖，在`devDependencies`中，将以下依赖项的版本更新为较新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值