创建 Typescript react 项目基础配置（记录）

一、创建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 类型，解决报错，实际没什么用只是让编译器不报错而已