TypeScript的意义

大家可能常常会遇到这样的场景：

你调用一个别人写的函数，很不幸，这个家伙没有留下任何注释，为了搞清楚参数类型，你只能硬着头皮去看里面的逻辑
明明定义好了接口，可一联调就报错了----“TypeError:Cannot read property 'length' of undefined"。

归根结底，这是因为javascript是一门动态弱类型语音，对变量的类型非常宽容，不会在这些变量和他们的调用者之间建立结构化的契约。

var name = 'James';
var sum = 1 + 2;
name = sum;

该 name 变量开始“存有”一个字符串，但现在它“存有”一个数字。这凸显了 JavaScript 中变量和类型的基本特性

相比之下，我们可以将“静态类型语言”typescript视为我们可以（也必须）将类型信息与特定变量相关联的语言：

var name: string ＝ ‘James’;

在这段代码中，我们能够更好地显式声明我们对变量 name 的意图，我们希望它总是用作一个字符串。

TypeScript 的静态类型注释给我们的一个巨大的帮助，它能够清楚地表达我们对变量的意图。这种改进不仅有益于 TypeScript 编译器，还可以让我们的同事和将来的自己明白我们的代码。代码是用来读的。

var name: string = 'James';
var sum: number = 1 + 2;
name = sum;

如果我们使用 TypeScript 编译器编译这个代码，我们现在就会收到一个在 name = sum 这行的错误： Type 'number' is not assignable to type 'string'，我们的这种“偷渡”被警告，我们执行的代码可能有问题。重要的是，如果我们想要继续执行，我们可以选择忽略 TypeScript 编译器的错误，因为它只是在将 JavaScript 代码发送给我们的用户之前给我们反馈的工具。

那么，TypeScript究竟有哪些特性使得它成为大家的“刚需”
1，类型检查。TypeScript会在编译代码时进行严格的静态类型检查。这意味着你可以在编码阶段发现可能存在的隐患，而不必把他们带到线上。
2，语言扩展。TypeScript会包括来自ES6和未来提案中的特性。
3，工具属性。TypeScript能够编译成标准的javascript，无需运行时的任何额外开销
4,IDE 智能提示。TypeScript 不仅自己写的类库有丰富的类型信息, 也可以对其他纯 JS 项目进行类型标注 (DefinitelyTyped), 便于使用者直接在 IDE 中浏览 API, 效率大增.

tsconfig.json常用配置项：

{
  "compilerOptions": {
    "allowUnreachableCode": true, // 不报告执行不到的代码错误。
    "allowUnusedLabels": false, // 不报告未使用的标签错误
    "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
    "baseUrl": ".", // 工作根目录
    "experimentalDecorators": true, // 启用实验性的ES装饰器
    "jsx": "react", // 在 .tsx文件里支持JSX
    "sourceMap": true, // 是否生成map文件
    "module": "commonjs", // 指定生成哪个模块系统代码
    "noImplicitAny": false, // 是否默认禁用 any
    "removeComments": true, // 是否移除注释
    "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
      "node", // 引入 node 的类型声明
    ],
    "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
      "src": [ //指定后可以在文件之直接 import * from 'src';
        "./src"
      ],
    },
    "target": "ESNext", // 编译的目标是什么版本的
    "outDir": "./dist", // 输出目录
    "declaration": true, // 是否自动创建类型声明文件
    "declarationDir": "./lib", // 类型声明文件的输出目录
    "allowJs": true, // 允许编译javascript文件。
    "lib": [ // 编译过程中需要引入的库文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "dom"
    ]
  },
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "src/**/*"
  ],
  // 指定一个排除列表（include的反向操作）
  "exclude": [
    "demo.ts"
  ],
  // 指定哪些文件使用该配置（属于手动一个个指定文件）
  "files": [
    "demo.ts"
  ]
}

最后编辑于：2019.07.30 16:55:34