一、创建react typescript 项目
npx create-react-app xxxx --template typescript
二、配置项目
1.支持读取json 文件在ts.config中配置
"moduleResolution": "node",
"resolveJsonModule": true,
2.css module 模组化 按需加载, 配置支持css
类型声明 .d.ts方式
src下新建 custom.d.ts文件
declare module "*.css" {
const css : {[key: string]: string}
export default css
}
使用
import styles from './App.module.css'·
function App() {
return (
<div className={styles.app}>
<div className={styles.robotList}>
{robots.map((r) => (
<Robot id={r.id} name={r.name} email={r.email} />
))}
</div>
</div>
)
}
3.安装插件 npm install typescript-plugin-css-modules --save-dev
让 styles 也可以代码提示
安装完成后需要注册启用，在tsconfig中
"jsx": "react-jsx",
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
如果你是使用 vscode 开发的需要添加另外的配置如下：
根目录创建.vscode文件夹及settings.json
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
保存的时候vscode 会提示框，选择 allow 或者允许
之后在输入就会有提示了，是不是很爽
image.png
配置媒体资源和字体
图片资源一版要统一管理，在src下创建 assets 文件在创建分类 images 文件把文件放入其中就可以了
字体声明：
在index.css 中注册
@font-face {
font-family: 'Slidefu';
src: local('Slidefu'),
url(./assets/fonts/Slidefu-Regular-2.ttf) format('truetype');
}
全局使用：
在 App.module.css中
h1 {
font-family: 'Slidefu';
font-size: 72px;
}
4.解决在定义变量是提示隐式 any属性而报错问题
在tsconsig.json 中添加
"noImplicitAny": false,
这样设置，不需要我们指定对象为any 类型，解决报错，实际没什么用只是让编译器不报错而已
