TypeScript In ICE

注：图片来源于 Google Image

目录

• TypeScript 是什么
• 为何要使用 TypeScript
• 使用 TypeScript 编写 React 组件
• 在 ICE 中如何使用 TypeScript
• 已有项目如何迁移到 TypeScript

TypeScript 是什么

关于 TypeScript 是什么，应该大部分人都已经知道，其 官网 的定义以下:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

翻译成中文便是：

TypeScript 是 JavaScript 的类型的超集，它能够编译成纯 JavaScript。编译出来的 JavaScript 能够运行在任何浏览器上。TypeScript 编译工具能够运行在任何服务器和任何系统上。TypeScript 是开源的。

拆分一下关键词简单通俗的理解以下：

1. TypeScript 是 JavaScript 的 强类型 版本。
2. 提供了 静态类型系统 和支持 最新的不断发展的 JavaScript 新特性。
3. 在编译期去掉类型和特有语法，生成 纯粹的 JavaScript 代码。
4. 因为最终在浏览器中运行的仍然是 JavaScript，因此 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

为何要使用 TypeScript

先来看一组数据：

TypeScript 月下载量

数据来源：npm 包下载量

Developer Survey Results 2018

数据来源：stackoverflow

TypeScript's Popularity Over Time

数据来源：StateOfJs 2018

从上面的数据来看，TypeScript 毫无疑问是当下很是受喜好的编程语言。经过上述 TypeScript 的定义，咱们知道 TypeScript 的核心是基于 JavaScript 弱类型 的特性提供了 静态类型系统。JavaScript 是一门弱类型语言，变量的数据类型具备动态性，能够被改变，只有在执行时才能肯定变量的类型，这意味着有些错误只有在运行时才会发生。而 TypeScript 提供的类型机制则能够在编译时有效的解决这类问题，在编译时就暴露问题；同时基于类型定义加上 IDE 的智能提示，在开发和阅读代码时会很是的方便。在选择使用 TypeScript 时，你能够享受它带来的如下特性：

TypeScript 特性

• 静态类型检查 ：静态类型能够帮助咱们在运行前发现潜在的未知问题，当你调用函数时，编辑器会提示参数类型，那些参数是可选的等等，如下代码在编译时也会直接编译失败，可让咱们在开发阶段感知错误。

• IDE 提示功能 ：加强了编辑器和 IDE 的功能，包括代码补全，接口文档提示，快速跳转等。

• **可读性：**经过类型定义，代码之间的关系相对明确，使代码更容易阅读和理解，整个应用都是基于类型定义，也使协做变得更为方便和高效，类型就是最好的注释，本质上至关于强制约定写了一份文档。

TypeScript 缺点

不管是框架仍是技术的演进，事物每每都存在两面性，在无限接近好的一方面，也会有瑕疵的一方面，TypeScript 解决 JavaScript 弱类型问题的同时，也引入自身的一些复杂度；从学习成原本讲，须要理解诸如 Generics(泛型)、Interfaces(接口)、Enums(枚举) 等概念；从开发效率上来说，在前期开发阶段须要多写一些类型定义代码，须要必定的适应期，但从长期可维护性来看这些多的开发时间是值得的；从工具上来看，工欲善其事必先利其器，须要了解周边的工具生态系统，固然这些也算不上缺点。

周边生态

• 编辑器：TypeScripts 是微软制造，目前流行的编辑器 VSCode 也出自微软，二者有着很是好的结合
• 插件市场：在 VSCode 插件市场搜索 TypeScript 能够看到很是多的基于 TypeScript 插件可使用
• 前端框架：
  • React 生态：React 和 TypeScript 融合能够很是好的融合，只须要将 .jsx 替换成 .tsx   Adding TypeScript
  • Vue 生态： Vue 3.0 基于 TypeScript 以及尤雨溪针对 TypeScript 和 Vue 的官方回答， Plans for the Next Iteration of Vue.js
  • Angular ：权限的设计和基于 TypeScript 的编码设计，Angular 2: Built on TypeScript
• 类型声明包：相似 React、Lodash 等库都有提供 TS 类型声明。若是你使用 VSCode，能够安装 types-autoinstaller 插件，能够自动安装相应的类型文件

# Before
npm i react @types/react -S

=> 

# After
npm i react -S
复制代码

使用 TypeScript 编写 React 组件

经过 TypeScript 写 React 组件，主要区别就是 Props 和 State 的定义，以下两种写法：

• ES6 语法

import React from 'react';

class App extends React.PureComponent {
  state = {
    name: 'ice',
    age: 1,
  };

  render() {}
}

App.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};
复制代码

• TypeScript 语法

import * as React from 'react';

interface IProps {
  name: string;
  age: number;
}

interface IState {
  name: string;
  age: number;
}

class App extends React.PureComponent<IProps, IState> {
  state = {
    name: 'ice',
    age: 1,
  };

  render() {}
}
复制代码

在 ICE 中使用 TypeScript

近两年来 TypeScript 在前端社区的发展愈来愈火热，也有愈来愈多的应用采用 TypeScript 编写，与此同时，飞冰（ICE）也在积极的拥抱 TypeScript 社区。ICE 提供了基于 TypeScript 的基础模板，该模板将飞冰（ICE）自己的能力和 TypeScript 能力作了很好的融合：

• 内置 @alifd/next 基础组件
• 支持组件按需加载
• 支持 css-modules 语法
• 支持 TypeScript 语法
• 支持热更新

你只须要在 Iceworks 模板界面选择对应模板进行初始化：

初始化完成以后，接下来就是使用 TypeScript 编写代码了，全部以 .tsx 或者 .ts 结尾的文件都支持其语法。

已有项目如何迁移到 TypeScript

迁移步骤以下：

• 升级构建工具 ice-scripts

# ice-scripts 最新版支持 TypeScript 的语法构建
$ npm update ice-script
复制代码

• 项目安装 TypeScript 开发依赖

$ npm install typescript -D
复制代码

• 新增 .tsconfig 文件

{
  "compileOnSave": false,
  "buildOnSave": false,
  "compilerOptions": {
    "outDir": "build",      // 指定输出目录
    "module": "esnext",     // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "target": "es6",        // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "jsx": "react",        // 容许编译 javascript 文件
    "moduleResolution": "node", // 选择模块解析策略
    "allowSyntheticDefaultImports": true,
    "lib": ["es6", "dom"],
    "sourceMap": true,     // 生成相应的 '.map' 文件
    "allowJs": true,       // 扩展名能够是 .js/.jsx
    "noUnusedLocals": true // 有未使用的变量时，抛出错误
  },
  "include": ["src/*"],  // 须要编译的文件目录
  "exclude": ["node_modules", "build", "public"] // 排除编译的文件目录
}
复制代码

• 按需修改文件后缀

在 TypeScript 工程中推荐使用 .tsx 替代 .jsx、使用 .ts 替代 .js，这里能够根据自身需求按需更改，通常状况下更改后缀以后须要修改部分语法，不然 ts 语法检测可能会不经过。

• 按需修改 Entry 入口

若是将 src/index.js 的后缀作了修改，那么同步须要修改 package.json 里的 entry 字段：

// packgae.json
buildConfig: {
- entry: './src/index.js'
+ entry: './src/index.ts'
}
复制代码

按照以上步骤，可按需迁移项目到 TypeScript 工程。若有疑问，请经过飞冰钉钉群联系咱们。

资料

• TypeScript Roadmap: January - June 2019
• awesome-typescript
• TypeSearch
• TypeScript 解决了什么痛点？
• Typescript配合React实践
• TypeScript-React-Starter

ICE 相关连接

• 官网地址
• 这，就是飞冰物料
• 模板市场
• Iceworks
• alibaba/ice
• 钉钉答疑群