关于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 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
微信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实现的日历程序
2015/06/18 PHP
Yii2如何批量添加数据
2016/05/17 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
js使用eval解析json(js中使用json)
2014/01/17 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Vue基础配置讲解
2019/11/29 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
django实现日志按日期分割
2020/05/21 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
《学棋》教后反思
2014/04/14 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
师德师风自查总结
2014/10/14 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
付款证明格式范文
2015/06/19 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技