TypeScript实践—关于json等非js文件的导入

有一个需要使用TypeScript 重构的项目，开始学习并研究TypeScript,并记录在此过程中遇到的一些问题及解决方式

问题1： json|css|jpg等文件的导入
方式一 —写声明文件的方式
操作过程：
1、在项目根目录下 ，与 src 文件夹同级，建立name.d.ts 文件，用于声明非js文件,也可以在一个Typings目录下，新建x.d.ts文件
声明文件的内容

declare module "*.json" 
declare module "*.png"

2、引入文件资源,按照正常的方式引入即可

import  *  as name  from '../package.json'
import { version } from '../package.json'
import  name  from '../package.json'
import { partname } from './package.json'

3. 在tsconfig 文件的 配置信息中

"include": './*.d.ts'  引入 声明文件

下面提到一些 对于导入非js 文件要引入的声明文件的写法：

• 官网推荐的方式

声明文件：

declare module "*!text" {
    const content: string;
    export default content;
}
// Some do it the other way around.
declare module "json!*" {
    const value: any;
    export default value;
}

官网对于允许导入非js内容的说明
Load a Json File with TypeScript
第二个链接文件需要翻墙，所以以下是其内容
声明文件和引入

// This will allow you to load `.json` files from disk

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

// This will allow you to load JSON from remote URL responses

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

然后需要在 使用的位置做出引入

import * as othername from './package.json'
import { version } from ''

• 方式二—require的方式

const Name = require('../../package.json');

还有注意的点，

就是需要在 tsconfig.json 中的配置项中加入typings

{
 "compilerOptions": {
 "outDir": "./dist/",
 "sourceMap": true,
 "noImplicitAny": true,
 "module": "commonjs",
 "target": "es5",
 "jsx": "react",
 "experimentalDecorators": true 实验性的装饰器语法使用报错
 },
 "include": [
 "./src/**/*",
 "./typings/**/*" 将声明文件也要引入
 ]
}

如有错误请批评指正