前言什么是TSTypeScript=Type+Script(StandardJS)。TS官网：TypeScript是JavaScript的类型化超集，可编译为纯JavaScript。TypeScript是JS的类型化超集，可以编译为纯JS。TS优势TS最大的优势在于提供了强大的静态分析能力，结合TSLint，可以对代码实施更严格的检查约束。由于传统的EcmaScript没有静态类型，即使有ESLint，也只能做很基础的检查。有些错字问题可能要等到线路上出现bug时才会发现。TS使代码更加健壮，特别是对于大型项目。通过编译几乎就意味着可以正常运行了，也为重构增加了很多底气。TS类型声明提高了代码的可读性，结构清晰。IDE的提示更加智能。目标是完成td媒体模块（基于react+umi+ant设计），将之前的ES6代码重构为TS代码。umi-typescript脚手架贯穿代码新建媒体页面，创建媒体模型，媒体服务charles，接入dev环境，接入认证页面列表，提取路由配置，结合tdumi/webpack/dva配置与全局错误信息。从界面读取，更换主题，进入代码（最重要的部分）实现上面查的内容大概需要两天时间，主要是熟悉ts配置文件，构建配置，ts语法，以及如何写反应和dva。安装依赖基础配置tsconfig.json该文件指定编译项目使用的根文件，编译选项JSX参数指定工作模式：preserve模式、react模式和react-native模式。这三种模式只影响编译策略。preserve模式生成的代码中会保留JSX，用于后续的转换操作（例如：Babel），输出文件为.jsx格式；而在rea??ct模式下，会直接编译成React.createElement，使用前不需要重写，经过JSX转换后，输出文件为.js格式；react-native模式相当于preserve，同样保留了所有的JSX，只是输出文件的扩展名是.js。jsconfig.json指定JavaScript语言服务提供的功能的根文件和选项。提示：如果您不使用JavaScript，则无需担心jsconfig.json。提示：jsconfig.json派生自tsconfig.json，这是一个TypeScript配置文件。jsconfig.json等同于“allowJs”属性设置为true的tsconfig.json。webpack配置文件的后缀改为ts或者tsx。文件名为ts和tsx(React)后缀代码。它可以与现有的ES6代码共存。IDE会自动校验这部分代码，webpack打包是没有问题的。截图业务代码目录data.d.ts定义业务对象数据结构接口（interface）。字段类型可以是number，string，boolean，也可以是业务对象（下面的Member），也可以是多个值之一（下面的status可以设置为枚举），类型不确定时使用any，使用'type[]'为数组，字段不一定存在。使用'？'model.ts处理数据和逻辑，包括同步更新状态的reducer，处理异步逻辑的effects，订阅数据源的subscription。Partial的作用是让传入的属性可选。Readonly的作用是将传入的属性设为只读。service.ts定义了接口请求的路径、方法和参数，并以Promise的形式返回。类组件connectconnectdva和react组件功能组件在@types/react中预定义了一个type类型SFC，它也是typeinterfaceStatelessComponent的别名，此外，它已经预定义了children和其他（defaultProps，displayName等...),这样我们就不用每次都自己写了！最后，TS让代码变得非常清晰、可读和规范，虽然改起来有点费工夫。希望能在后续的项目中得到应用。文章推荐1.ts文档https://www.tslang.cn/docs/handbook/basic-types.html2.ts2.8终极react组件https://juejin.im/post/5b07caf16fb9a07aa83f2977#heading-63。antdesignprots版https://github.com/ant-design/ant-design-pro4.
