typescript导入image的正确姿势

项目尝试地址
用webpack对image等文件进行封装

1
import Test from "./test.jpg"

直接使用会报错的,最开始以为是webpack的设置中设置es6的语法模式的问题,索性全部研究一下

1.选择typescript,Typescript作为js的超集,提供了静态数据类型,这是Typescript的核心

Typescript也在跟进JavaScript的规范标准 ECMAScript 提案

2.Typescript的类型声明文件(*.d.ts),一般放在包目录的types文件夹中

3.babel 是将高级版本的 JavaScript 编译为目标版本的 JavaScript,TypeScript 是将 TypeScript 编译为目标版本的 JavaScript。它们的编译是重叠的

4.typescript的类型保护

1
2
3
4
5
6
7
8
// 类型保护(判断)
if (typeof foo === 'string') {
// dosomething
}
// 类型保护(判断)
if (foo instanceof String) {
// dosomething
}

5. typescript的类型检查

一些没有行为只需要类型检查的类型(没有方法的Models),可以使用Typescript声明文件(*.d.ts)

1
2
3
4
5
6
declare namespace Models {
interface GPS {
lat: number
lng: number
}
}