学习typescript的一点总结

101 阅读3分钟

一.typescript的数据类型

基本类型

布尔类型(boolean), 数字类型(number), 字符串类型(string),  数组类型(array),
元组类型(tuple), 枚举类型(enum), 任意值类型(any), 没有任何类型(void), 
空(null), 未定义(undefined),  永不存在的值的类型(never)

非原始类型(object)

高级类型

交叉类型(Intersection Types), 相当于两个class合并
联合类型(Union Types),  |


1. 类型断言 <> | as : 告诉浏览器, 相信我, 我知道自己在干什么!

  let someValue: any = "this is a string";
  let strLength: number = (<string>someValue).length;
  let strLength2: number = (someValue as string).length;
  
2. 类型判断 typeof, instanceof(通过构造函数来细化类型) 

3. 自定义类型判断 is 

二. type与interface的区别

interface X {
  a: number
  b: string
}

type X = {
  a: number
  b: string
};

interface 可以 extends, 但 type 是不允许 extends 和 implement 的,但是 type 却可以通过交 叉类型 实现 interface 的 extend 行为,并且两者并不是相互独立的,也就是说 interface可以 extends type, type 也可以 与 interface 类型 交叉 。

interface Name {
  name: string;
}
interface User extends Name {
  age: number;
}

type 与 type 交叉

type Name = { name: string; } type User = Name & { age: number };

interface extends type

type Name = { name: string; }

interface User extends Name { age: number; }

type 与 interface 交叉

interface Name { name: string; }

type User = Name & { age: number; }

type 可以声明基本类型别名,联合类型,元组等类型, interface不能

// 基本类型别名 type Name = string

// 联合类型 interface Dog { wong(); }

interface Cat { miao(); }

interface 能够声明合并而type不能

interface User { name: string age: number }

interface User { sex: string }

/* User 接口为 { name: string age: number sex: string } */

一般来说,如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果不能就用 type

三. keyof

keyof 与 Object.keys 略有相似,只不过 keyof 取 interface 的键。

interface Point {
  x: number;
  y: number;
}

// type keys = "x" | "y"
type keys = keyof Point;

四. 泛型

在TypeScript中,泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用,而是能被多种类型复用。类似于参数的作用,泛型是一种用以增强类(classes)、类型(types)和接口(interfaces)能力的非常可靠的手段。相比于any,泛型能保留更多的信息.

// 泛型变量
function identity<T>(arg: T): T {
   return arg;
}
function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length);  // Array has a .length, so no more error
  return arg;
}

// 泛型类型
interface GenericIdentityFn<T> {
    (arg: T): T;
}
function identity<T>(arg: T): T {
    return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;

//泛型类 (指的是类的实体部分, 不是静态部分)
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };
console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

// 泛型约束
定义一个接口来描述约束条件。 创建一个包含 .length属性的接口,使用这个接口和extends关键字来实现约束:

interface Lengthwise {
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

五.命名空间与模块

namespace X {}

import * as shapes from "./shapes";

TypeScript里模块的一个特点是不同的模块永远也不会在相同的作用域内使用相同的名字。 因为使用模块的人会为它们命名,所以完全没有必要把导出的符号包裹在一个命名空间里。

不应该对模块使用命名空间,使用命名空间是为了提供逻辑分组和避免命名冲突。 模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。

六.Mixins(混入)

暂时不知道何种场景会使用到.

tslang.cn/docs/handbook/mixins.html