TS入门day1

128 阅读3分钟

typeScript如今越来越流行了,对js来说,更是丰富了js的使用,虽然在项目中也会使用,但是并没有规模化使用。没有系统的学习,所以暂时只停留在对变量进行命名的这一层很浅的认识,如今刚好不太忙,想系统的学习下ts,顺便做个学习记录,希望与各位小伙伴共同进步。

先从最基本的类型开始入手,本文大部分例子都参考官方文档,但也有俺提供的很多干货www.tslang.cn/docs/handbo…

基础类型

  1. 布尔值
    let isHappy: boolean = true;
  1. 数字
   let decLiteral: number = 666;
  1. 字符串(可以使用双引号( ")或单引号(')表示字符串)
   let name: string = 'bob'; name = "smith";
  1. 数组
  • 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组
   let list: number[] = [1, 2, 3];
  • 第二种方式是使用数组泛型,Array<元素类型>
   let list: Array<number> = [1, 2, 3];
  1. 元组 Tuple 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 stringnumber类型的元组。
  // Declare a tuple type 
  let x: [string, number]; 
  // Initialize it 
  x = ['hello', 10]; // OK 
  // Initialize it incorrectly 
  x = [10, 'hello']; // Error
  1. 枚举 enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。
  enum Color {Red, Green, Blue} 
  let c: Color = Color.Green; // 此时c为1

默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值。 例如,我们将上面的例子改成从 1开始编号:

  enum Color {Red = 1, Green, Blue} 
  let c: Color = Color.Green; // 此时c为2

或者,全部都采用手动赋值:

  enum Color {Red = 1, Green = 3, Blue = 5} 
  let c: Color = Color.Green; // 此时c为3

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以查找相应的名字:

  enum Color {Red = 1, Green, Blue} 
  let colorName: string = Color[2]; 
  console.log(colorName); // 显示'Green'因为上面代码里它的值是2

看到这里不禁要问,why?: 点击这里(可以查看编译为es5之后的代码,也可自行调试)

"use strict";
var Color;
(function (Color) {
    Color[Color["Red"] = 2] = "Red";
    Color[Color["Green"] = 3] = "Green";
    Color[Color["Blue"] = 4] = "Blue";
})(Color || (Color = {}));
let c = Color.Green;

如上图所示,生成了一个 Color对象, 这样可以帮助我们更好的理解枚举是如何实现的。

  {"2":"Red","3":"Green","4":"Blue","Red":2,"Green":3,"Blue":4}
  1. Any(万能符,俺用的最多的,没啥好解释的,但不要滥用,不然用ts就没啥意义了)
  let notSure: any = 4; 
  notSure = "maybe a string instead"; // okay
  notSure = false; // okay, definitely a boolean
  1. Void 某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void
  function warnUser(): void { console.log("This is my warning message"); }
  let unusable: void = undefined; // okay
  unusable = null // error

值得注意的是 void类型不能赋予null, 还需要研究下。

  1. Null 和 Undefined 和 void相似,它们的本身的类型用处不是很大。默认情况下nullundefined是所有类型的子类型。 就是说你可以把 nullundefined赋值给number类型的变量。

  2. never (没看太懂,就不举例子了,可以自行去官网查找)

  3. Object 使用object类型,就可以更好的表示像Object.create这样的API

  declare function create(o: object | null): void; 
  create({ prop: 0 }); // OK 
  create(null); // OK 
  create(42); // Error 
  create("string"); // Error 
  create(false); // Error 
  create(undefined); // Error