TypeScript-常用类型

any

TypeScript 也有一个特殊的类型，any，当你不希望某个特定的值导致类型检查错误时，你可以使用它。

当一个值是 typeany时，您可以访问它的任何属性（这又将是 type any），像函数一样调用它，将它分配给（或从）任何类型的值，或者几乎任何其他语法上的值合法的：

let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed
// you know the environment better than TypeScript.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

any当你不想写出一个长类型只是为了让 TypeScript 相信特定的代码行是可以的时，该类型很有用。

可选属性

对象类型还可以指定它们的部分或全部属性是可选的。为此，请?在属性名称后添加一个：

function printName(obj: { first: string; last?: string }) {
  // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

在 JavaScript 中，如果您访问一个不存在的属性，您将获得该值undefined而不是运行时错误。因此，当您从可选属性中读取数据时，您必须undefined在使用它之前进行检查。

function printName(obj: { first: string; last?: string }) {
  // Error - might crash if 'obj.last' wasn't provided!
  console.log(obj.last.toUpperCase());
Object is possibly 'undefined'.
  if (obj.last !== undefined) {
    // OK
    console.log(obj.last.toUpperCase());
  }
 
  // A safe alternative using modern JavaScript syntax:
  console.log(obj.last?.toUpperCase());
}

联合类型

联合类型是由两种或多种其他类型组成的类型，表示可能是这些类型中的任何一种的值。

编写一个可以对字符串或数字进行操作的函数：

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// Error
printId({ myID: 22342 });

注意点，如果要使用number或者string类型的方法，我们必须缩小范围，不能直接使用字符串的方法或者number的方法。需要做一个判断处理。

别名类型

对象或者联合类型的使用，重新命名，定义在公共的地方，可以复用。

别名类型 - 任意类型的一个名称。 类型的语法是：

type Point = {
  x: number;
  y: number;
};
 
// 与前面的示例完全相同
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

接口

接口声明是选择对象类型的另一种方式

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

printCoord就像我们在上面的别名类型是一样的。

别名类型和接口之间的区别

扩展接口或扩展类型

Instance 通过extends 关键字，扩展接口

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

Type通过&符号，扩展类型

type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

const bear = getBear();
bear.name;
bear.honey;

新增新的字段或者类型

Instance通过对象访问形式

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

Type类型创建后无法更改

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

类型断言

无法知道值的类型.。通过as关键字定义。

例如，如果您正在使用document.getElementById，TypeScript 只知道这将返回某种，HTMLElement但您可能知道您的页面将始终具有HTMLCanvasElement具有给定 ID 的 。

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

非空断言运算符（后缀!）

undefined在任何表达式之后写!实际上是一个类型断言，该值不是nullor undefined

function liveDangerously(x?: number | null) {
  // No error
  console.log(x!.toFixed());
}

总结

列举的这些类型，在我们日常的开发中，是经常使用的。但是，还没有完全列举完，枚举，在下一篇文章中更新。