TypeScript学习小记

什么是 TypeScript?

JavaScript自己支持动态类型特性，可是随着应用程序愈来愈大，JavaScript的灵活性也成为了一种负担。错误检测和代码调试也变得较为复杂。TypeScript就是利用面向对象原理生成更好地JavaScript。

TypeScript就是所谓的JavaScript超集。它不是JavaScript的替代品，也不会为JavaScript代码添加任何新功能。相反，TypeScript容许程序员在其代码中使用面向对象的构造，而后将其转换为JavaScript。它还包括类型安全和编译时类型检查等便利功能。

为何要使用TypeScript?

TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，致使很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助你们更方便地实践面向对象的编程。

TypeScript 的好处

编译为 JavaScript

建立一个ts文件，执行如下命令

TypeScript类型

• Boolean类型

  // Boolean类型
  let isDone: boolean = false

• number类型

// number类型  同JavaScript，TypeScript里的全部数字都是浮点数 还支持2、8、十六进制数
let decLiteral: number = 6

• string类型

// string类型 还可使用模版字符串
let name: string = 'bob'
let sentence: string = `Hello, my name is ${ name }`

• 数组类型

// 数组类型 有两种方式能够定义数组 一、元素类型后面接上 [] 二、使用数组泛型，Array<元素类型>
let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3]

• 元组类型

// 元组Tuple 元组类型容许表示一个已知元素数量和类型的数组，各元素的类型没必要相同
let x: [string, number]
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
// 当访问一个越界的元素，会使用联合类型替代
x[3] = 'world'; // OK, 字符串能够赋值给(string | number)类型

• 枚举类型

  // 枚举类型 enum类型是对JavaScript标准数据类型的一个补充
     enum Color {Red, Green, Blue}
     let c: Color = Color.Green
     // 默认状况下，从0开始为元素编号。 你也能够手动的指定成员的数值
     enum Color {Red = 1, Green = 2, Blue = 4}
     let c: Color = Color.Green
     // 枚举类型提供的一个便利是你能够由枚举的值获得它的名字。 例如，咱们知道数值为2，可是不肯定它映射到Color里的哪一个名字，咱们能够查找相应的名字：(我的感受有点像map)
     enum Color {Red = 1, Green, Blue}
     let colorName: string = Color[2];
     console.log(colorName);  // 显示'Green'由于上面代码里它的值是2

• any类型

// any类型 不清楚类型的变量指定一个类型，不但愿类型检查器对这些值进行检查而是直接让它们经过编译阶段的检查
let notSure: any = 4
notSure = "maybe a string instead"
notSure = false; // okay, definitely a boolean

• void类型

// void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你一般会见到其返回值类型是 void
function warnUser(): void {
    console.log("This is my warning message");
}
// 声明一个void类型的变量没有什么大用，由于你只能为它赋予undefined和null：
let unusable: void = undefined;

• 其它一些比较少用的类型

// Null 和 Undefined 同void相似，它们自己的类型用处不是很大
// 默认状况下null和undefined是全部类型的子类型。 就是说你能够把 null和undefined赋值给number类型的变量 但在建议指定--strictNullChecks的状况下，可使用联合类型
// Never never类型表示的是那些永不存在的值的类型 (不是特别理解)
// Object 表示非原始类型，也就是除number，string，boolean，symbol，null或undefined以外的类型
declare function create(o: object | null): void
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
//类型断言 一般这会发生在你清楚地知道一个实体具备比它现有类型更确切的类型。
// 类型断言有两种形式。 其一是“尖括号”语法：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 另外一个为as语法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript+Vue

而后是本身动手时间，TypeScript+Vue实战
具体的教程能够看https://segmentfault.com/a/11...
一些配置解析能够看https://www.jianshu.com/p/7ed...
装饰器配置出错请看https://blog.csdn.net/lydia_l...
git上的装饰器文档请看https://github.com/kaorun343/...
关于Mixins比较好的解决方式https://www.jianshu.com/p/7ed...
按照这个搭建环境的时候遇到一些问题，提醒我要更新webpack的版本到4以上...以及各类webpack-dev-server...各类不兼容，后来看了下是由于经过vue-cli初始化的项目彷佛对默认安装的ts-loader版本不兼容，这边须要指定安装3.xx的版本，这里安装的是3.3.1的版本（划重点！！！）
最终安装相关的版本如图：

另外会提示一些报错，这里从新拷贝了一份tslint.json的配置相关

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint-config-standard"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "quotemark": [true, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false
  }
}