关于TypeScript中import JSON的正确姿势详解


Posted in Javascript onJuly 25, 2017

前言

Typescript是微软内部出品的,用actionscript的语法在写js的一门新语言,最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束……当然这不是重点,重点可能还是 JS 没有接口,我没法靠 class 语法糖写的非常 OO……下面这篇文章想说的其实是在 ts 中如何正确的 import json 格式。

首先我使用了基本姿势

import * as variable from './fooooooo.json'

结果发现他提示我并没有这个 module(Cannot find module),咋回事呀大佬,明明 JavaScript 中我可以正常使用。

查了一下,找到了一个方法:

命名一个 typings.d.ts:

declare module "*.json" {
 const value: any;
 export default value;
}

接下来理论上你就可以愉快的使用了,比如

import * as variable from './fooooooo.json'
const data = (variable as any).data

当然在使用中由于我不小心写错了 config 文件的文件名所以没有生效于是……我又去找了别的方法。

比如可以使用 @types/node 加上 require 引入,如果你的服务中禁用 any,这也是一个比较好的方法。

甚至你可以手写读取文件,不过感觉上去还是比较智障……还是觉得前面两种方法更优雅一点

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JS中数据结构之栈
Jan 01 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 #Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 #Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 #Javascript
js事件委托和事件代理案例分享
Jul 25 #Javascript
基于JavaScript实现多级菜单效果
Jul 25 #Javascript
You might like
标准PHP的AES加密算法类
2015/03/12 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
深入研究React中setState源码
2017/11/17 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
layui使用label标签的方法
2019/09/14 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python+django实现简单的文件上传
2016/08/17 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python中open函数的基本用法示例
2019/09/07 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
python中turtle库的简单使用教程
2020/11/11 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
招商经理岗位职责
2013/11/16 职场文书
投标单位介绍信
2014/01/09 职场文书
建议书范文
2015/02/05 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android