有一个需要使用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'
- 在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/**/*" 将声明文件也要引入
]
}
如有错误请批评指正
