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

前言

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，这也是一个比较好的方法。

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

总结

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

赞 (0)

相关推荐

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

    前言 Typescript是微软内部出品的,用actionscript的语法在写js的一门新语言,最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束--当然这不是重点,重点可能还是 JS 没有接口,我没法靠 class 语法糖写的非常 OO--下面这篇文章想说的其实是在 ts 中如何正确的 import json 格式. 首先我使用了基本姿势 import * as variable from './fooooooo.json' 结果发现他提示我并没有这个 mod

  • mybatis3.4.6 批量更新 foreach 遍历map 的正确姿势详解

    好久没编码了!最近开始编码遇到一个问题 !一个批量修改的问题,就是mybatis foreach 的使用. 当时使用的场景 ,前端 传逗号拼接的字符串id, 修改id对应数据的数据顺序 ,顺序 就是id 的顺序. 就是一个条件(单个id值) 修改一个值(传入的id的顺序) , 1. 把条件作为Map 的key 修改值是value,用map入参 2.用List<Object> 或者数组 ,把条件和值封装成对象放进list集合或者array数组 3.代码使用for循环调用mapper方法 穿两个参

  • python中import reload __import__的区别详解

    import 作用:导入/引入一个python标准模块,其中包括.py文件.带有__init__.py文件的目录(自定义模块). import module_name[,module1,...] from module import *|child[,child1,...] 注意:多次重复使用import语句时,不会重新加载被指定的模块,只是把对该模块的内存地址给引用到本地变量环境. 实例: pythontab.py #!/usr/bin/env python #encoding: utf-8

  • TypeScript中定义变量方式以及数据类型详解

    TypeScript中定义变量方式以及数据类型详解

    目录 TypeScript定义变量 变量声明格式 变量类型推导 JS和TS的数据类型 TS中使用JS的数据类型 number类型 boolean类型 string类型 Array类型 Object类型 Symbol类型 null和undefined类型 TS自身特有的数据类型 any类型 unknown类型 void类型 never类型 tuple类型 总结 TypeScript定义变量 变量声明格式 我在前面强调过,在TypeScript中定义变量需要指定 标识符 的类型. 所以完整的声明格式

  • SpringBoot中@Import注解如何正确使用

    SpringBoot中@Import注解如何正确使用

    目录 简介 一.功能简介 二.示例 1.引入普通类 2.引入ImportSelector的实现类 (1)静态import场景(注入已知的类) (2)动态import场景(注入指定条件的类) 3.引入ImportBeanDefinitionRegister的实现类 简介 由于最近的项目需求,需要在把配置类导入到容器中,通过查询,使用@Import注解就能实现这个功能,@Import注解能够帮我们吧普通配置类(定义为Bean的类)导入到IOC容器中.该注解我们也能过在源码中经常看到,是框架层实现的重

  • TypeScript中import type与import的区别详析

    目录 背景 import type vs import 使用 import type 的好处 参考链接 总结 背景 这周遇到了一个比较奇怪的问题:如何在 TypeScript 中根据某个 enum 的取值来执行后续逻辑? 按理来说应该很简单,这是 enum 的定义: export enum MyEnum { DEFAULT = 0, SOME_VALUE = 1, SOME_OTHER_VALUE = 2, } 然后在另一个项目中,通过 import type 来引入: import type

  • 对pyqt5多线程正确的开启姿势详解

    如下所示: # -*- coding: utf-8 -*- import sys from PyQt5.QtCore import QThread, pyqtSignal from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QMessageBox, \ QPushButton, QLineEdit, QLabel, QToolTip, QComboBox, QTextEdit class MyBeautifulClass

  • Python中高效的json对比库deepdiff详解

    Python中高效的json对比库deepdiff详解

    目录 deepdiff是什么 deepdiff安装 案例1.对比txt文件 案例2.对比json 工作中我们经常要两段代码的区别,或者需要查看接口返回的字段与预期是否一致,如何快速定位出两者的差异?除了一些对比的工具比如Beyond Compare.WinMerge等,或者命令工具diff(在linux环境下使用),其实Python中也提供了很多实现对比的库,比如deepdiff和difflib,这两个的区别是deepdiff显示的对比效果比较简洁,但是可以设置忽略的字段,difflib显示的对

  • React TypeScript 应用中便捷使用Redux Toolkit方法详解

    目录 前言 背景 Redux-Toolkit 常规使用 优化方案 优化 useDispatch 和 useSelector 优化修改 redux 状态的步骤 总结 前言 本文介绍的主要内容是 Redux-Toolkit 在 React + TypeScript 大型应用中的实践,主要解决的问题是使用 createSlice 的前提下消费 redux 状态仍旧有点繁琐的问题. 阅读本文需要的前置知识:了解 React .Redux-Toolkit .TypeScript 的使用. 关于 Redux

  • 正则表达式中问号(?)的正确用法详解

    目录 1.直接跟随在子表达式后面 2.非贪婪匹配 3.非获取匹配 4.断言 参考资料: 正则表达式中“?”的用法大概有以下几种 1.直接跟随在子表达式后面 这种方式是最常用的用法,具体表示匹配前面的一次或者0次,类似于{0,1},如:abc(d)?可匹配abc和abcd 2.非贪婪匹配 关于贪婪和非贪婪,贪婪匹配的意思是,在同一个匹配项中,尽量匹配更多所搜索的字符,非贪婪则相反.正则匹配的默认模式是贪婪模式,当?号跟在如下限制符后面时,使用非贪婪模式(*,+,?,{n},{n,},{n,m})

随机推荐