React与TypeScript的一些配置相关

• TypeScript基础补充
  • TypeScript是JavaScript的超集
  • 给原生JavaScript添加静态类型检查
  • 与ES6一样目前还无法被主流浏览器直接读取
• TypeScript的编译
  • 编译器：ts-loader、awesome-typescript-loader、以及babel-loader(create-react-app脚手架默认的编译器)
  • 编译器配置文件：tsconfig.json
• tsconfig.json详解

{
	"compilerOptions":{
		"noImplicitAny": false, // 不需要显式地声明变量的类型any
		"target":"es5", // 编译后目标JavaScript版本
		"lib":[ // 编译期间需要的库文件
			"dom", 
			"dom, iterable",
			"esnext"
		],
		"allowJs": true, // 允许混合编译JavaScript文件
		"skipLibCheck": true,// 是否跳过检查库文件,编译器将跳过类型检查，仅检查源代码文件。在这种情况下，您的代码可能会因为缺少类型声明文件而导致编译错误
		// "skipLibCheck": false,// 如果您需要类型声明文件，则建议保留默认设置
		"esModuleInterop": true, // 允许我们使用commonjs的方式import默认文件，import React from 'react'
		// "esModuleInterop": false, // import * as React from 'react',
		"allowSyntheticDefaultImports": true, // 否允许使用默认导出
		"strict": true, // 是否启用一组严格的类型检查选项
		"forceConsistentCasingInFileNames": true, // 是否强制所有文件名具有一致的大小写
		"noFallthroughCasesInSwitch": true, //  它控制着switch语句是否不允许"fall through"（也就是在没有使用"break"语句的情况下，控制流从一个case语句穿过到下一个case语句）
		"module": "esnext", // 配置代码的模块系统，Node.js的CommonJS、ES6标准的esnext、requirejs的AMD
		"moduLeResolution": "node",// 决定了我们编译器的工作方式，“node"和"classic（该选项在2019年12月就已经废弃了）"
		"resolveJsonModule": true, // 是否将导入语句中的.json文件解析为模块，设置为false只能作为文本读取，不能作为模块
		"isolatedModules": true,// 编译器会将每个文件作为单独的模块来使用
		"noEmit": true, // 当发生编译错误的时候，编译器不会生成JavaScript代码
		"jsx":"react" // 允许编译器支持编译react代码
	},
	"include":[
		"src"
	]
}

• 严格的类型检查包括：

  • “noImplicitAny”: 禁止隐式类型声明；
  • “strictNullChecks”: 禁止把null和undefined赋值给其他类型；
  • “strictFunctionTypes”: 强制函数类型必须匹配声明；
  • “strictBindCallApply”: 禁止使用不正确的"bind"，"call"和"apply"方法；
  • “strictPropertyInitialization”: 禁止在未初始化的属性上访问。

• 几个小tips

  • 使用npm run eject可以抛出配置信息，包含一个config文件夹、一个script文件夹，其中config/webpack.config.js是项目的核心配置
  • js项目转ts项目方式
    • npm install --save typescript @types/node @types/react @types/react-dom @types/jest
    • typescript:ts工具集
    • node,react,react-dom,jest并不是原生支持typescript,因此需要安装解释文件（@type/react:react ts 接口定义-也称typing）