TypeScript学习(one day)

386 阅读4分钟

Ts学习笔记

Ts介绍

TypeScript 它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 它和JS的主要区别在于用于解决大型项目的代码复杂性,可以带编译期间发现并且纠正错误,强类型,支持静态和动态类型,最终会编译成JavaScript代码,支持模块,泛型和接口。

安装TS

//npm下载
npm install -g typescript
//验证安装
tsc -v
//编译TS
tsc helloworld.ts

开启第一个ts测试文件

//Ts文件
function deposit(money: number) {
  return 'we have, ' + money;
}
console.log(deposit(123));
console.log(deposit("123"));//这里会报错,因为“123”不是数字类型,不符合参数条件

编译:

 tsc helloworld.ts
//Js文件
function deposit(money) {
    return 'we have, ' + money;
}
console.log(deposit(123));

小结:参数类型信息在编译后被擦除了,生成后的js与普通的js文件一样,不会进行类型检查,有问题编译期间就报错了。

Ts的基本类型

  • 数字枚举:默认情况初始值为0,其他成员会从1开始自动增长,当然也可以设定初始值。

  • 字符串枚举:每个成员都必须用字符串字面量,或者另外的枚举成员进行初始化。

数字枚举除了支持 从成员名称到成员值 的普通映射之外,它还支持 从成员值到成员名称 的反向映射。

  • 纯字符串枚举,我们不能省略任何初始化程序 。

  • 常量枚举(没懂):

  • 异构枚举: 异构枚举的成员值是数字和字符串的混合。

//Ts代码
enum Enum {
  A,
  C,
  B = "B",
  D = "D",
  E = 5,
  F,
}
//Js代码
var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
    Enum[Enum["C"] = 1] = "C";
    Enum["B"] = "B";
    Enum["D"] = "D";
    Enum[Enum["E"] = 5] = "E";
    Enum[Enum["F"] = 6] = "F";
})(Enum || (Enum = {}));
console.log(Enum.A) //输出:0
console.log(Enum[1]) // 输出:C

我们可以发现数字枚举相对字符串枚举多了 “反向映射”,数字枚举 除非你从0开始 会自动给默认值0 或者前一个枚举是数字枚举 下一个枚举是上一个枚举的递增 ,如果上一个枚举是字符串 编译器不知道给什么默认值,原因听说是ts 的 compiler 的问题,以后可以研究一下。

  • Any类型:任何类型都可以被归纳为any类型,用any代表脱离检查,网友们戏称的any大发就是这样。
  • unknown类型:任何类型的值可以赋值给unknown类型,但是unknown类型的值只能赋值给any和unknown类型。
  • Tuple类型:数组一般用同种类型的值组成,元组可以在单个变量中存储不同类型的值,
//但是要注意,元组用于定义有限数量的未命名属性的类型,每个属性都有一个关联的类型
let tupleType:[string,number];
tupleType = ["money",1000000];
console.log(tupleType[0]) //money
console.log(tupleType[1]) //1000000
//如果不匹配的话,会显示如下错误
tupleType = [1000000,"money"];
[0]: Type 'number' is not assignable to type 'string'.
[1]: Type 'string' is not assignable to type 'number'.
//元组初始化的时候我们还必须提供每个属性的值,否则也会报错-
  • Void类型:表示没有任何类型,当一个函数没有返回值时,你通常见到其返回值类型是void 声明一个 void 类型的变量没有什么作用,因为在严格模式下,它的值只能为 undefined

  • object类型:它用于表示非原始类型。

interface ObjectConstructor {
  create(oobject | number): any;
  // ...
}

const proto = {};

Object.create(proto);     // OK
Object.create(null);      // OK
Object.create(undefined); // OK
Object.create(1337);      // OK
Object.create(true);      // Error
Object.create("oops");    // Error

等于是定义了内容的属性,内容和定义的不一致时候,会报错

  • Object类型:他是所有的Object类的实例的类型,由两个接口定义, Object 类的所有实例都继承了 Object 接口中的所有属性。
//Object接口定义了原型链上的属性
interface Object {
  constructorFunction;
  toString(): string;
  toLocaleString(): string;
  valueOf(): Object;
  hasOwnProperty(vPropertyKey): boolean;
  isPrototypeOf(vObject): boolean;
  propertyIsEnumerable(vPropertyKey): boolean;
}
//ObjectConstructor定义了Object类的属性
interface Subject {
    addObserver(observer: Observer) => void;
    deleteObserver(observer: Observer) => void;
    notifyObservers() => void;
  }

  • {} 类型描述了一个没有成员的对象。当你试图访问这样一个对象的任意属性时,TypeScript 会产生一个编译时错误。