一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
大家好,我是大帅子,今天我们来介绍一下我们该在react中使用ts呢,下面我们直接开始吧
创建项目命令
npx create-react-app 项目名 --template typescript
在命令行中，添加 --template typescript 表示创建支持 TS 的项目
项目目录的变化
-
多了一个文件：
tsconfig.json。在项目根目录下可以看到它，它就是TS 的配置文件 -
后缀名有变化。在 src 目录中，文件的后缀有变化，由原来的 .js 变为
.ts或.tsx.tsts 文件的后缀名.tsx是在 TS 中使用 React 组件时，需要使用该后缀。只要文件中使用了jsx模板，后缀名必须叫tsx
-
在 src 目录中，多了
react-app-env.d.ts文件
三个文件后缀名
没有使用ts前:
.js
.jsx
// ts
.ts： 不能包含模板-jsx
.tsx：包含模板的代码，名字不能取.ts
// .ts中可以有执行代码 + 类型声明
.d.ts .d.ts中只能出现类型声明
.d.ts 类型声明文件，用来指定类型文件类型
tsconfig配置文件
- tsconfig.json是typescript项目的配置文件，用于配置typescript
- tsconfig.json配置文件可以通过
tsc --init生成
- 说明：所有的配置项都可以通过鼠标移入的方式，来查看配置项的解释说明。
- tsconfig 文档链接
{
// 编译选项
"compilerOptions": {
// 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
// 命令行： tsc --target es5 11-测试TS配置文件.ts
"target": "es5",
// ts内置的库
// 如果删除了dom库，则无法使用document.getElementById
"lib": ["dom", "dom.iterable", "esnext"],
// 允许 ts 编译器编译 js 文件
// 允许 import js文件
"allowJs": true,
// 跳过类型声明文件的类型检查
"skipLibCheck": true,
// es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
"esModuleInterop": true,
// 即使模块没有显式指定 default 导出，也允许通过 import x from 'y'
"allowSyntheticDefaultImports": true,
// 开启严格模式
"strict": true,
// 对文件名称强制区分大小写 Demo.ts
"forceConsistentCasingInFileNames": true,
// 为 switch 语句启用错误报告
// 如果switch中没有break 或者 return 就报错
"noFallthroughCasesInSwitch": true,
// 生成代码的模块化标准
"module": "esnext",
// 模块解析（查找）策略
"moduleResolution": "node",
// 允许导入扩展名为.json的模块
"resolveJsonModule": true,
// 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件
"isolatedModules": true,
// 编译时不生成任何文件（只进行类型检查）
"noEmit": true,
// 指定将 JSX 编译成什么形式
"jsx": "react-jsx"
},
// 指定允许 ts 处理的目录
"include": ["src"]
}
类型声明-第三方库的类型声明文件
例如：axios
这种库无需做额外处理，可以直接使用代码提示功能
不带类型声明的库
例如：jquery, react....
这类库没有自带声明文件，需要我们单独去下载。
下载库声明文件
命令：npm i @types/库名
例如： npm i @types/jquery
参考
在www.typescriptlang.org/dt/search?s…中搜索
小结
- 并不是所有的第三方库都有提供ts的声明文件
- 没有类型声明文件只是没有代码提示，并不会导致功能不可使用
- 没有自带类型声明文件的库，我们要自己下载
好了,这边已经给大家介绍到这里,以上是我自己的理解,讲的不好, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!
