常用类型

原始类型

• string
• number
• boolean

数组

• 常规写法：const arr = [1, 2, 3]
• 常用类型定义：const arr:number[] = [1,2,3]
• 泛型定义：const arr:Array<number> = [1,2,3]

变量类型注释

let myName: string = "Alice";

const arr:Array<number> = [1,2,3]

函数

ts 允许对函数参数和返回进行类型定义

function greet(name: string): string {
  return "Hello, " + name.toUpperCase() + "!!"
}

对象类型

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

可选参数 ?

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

联合类型 |

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

正确使用联合类型

function welcomePeople(x: string[] | string) {
  if (Array.isArray(x)) {
    // Here: 'x' is 'string[]'
    console.log("Hello, " + x.join(" and "));
  } else {
    // Here: 'x' is 'string'
    console.log("Welcome lone traveler " + x);
  }
}

类型别名

type Point = {
  x: number;
  y: number;
};

// Exactly the same as the earlier example
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 });

type ID = number | string;

接口 Interfaces

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 });

type和interface (opens new window)

他俩关键区别在于，无法重新打开type以添加​​新属性，而interface始终可以扩展。

• interface 可以被继承，type不可以
• 可以向已存在的interface中添加新属性，type不能

类型断言

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

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

const a = (expr as any) as T;

确定赋值断言

let value!:number
console.log(value); // undefined 编译正确

字面类型

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");
printText("G'day, mate", "centre");


function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

interface Options {
  width: number;
}
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic");

字面量接口

function handleRequest(url:string,method: "GET"|"POST"): viod;
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);

Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.

// Change 1:
const req = { url: "https://example.com", method: "GET" as "GET" };
// Change 2
handleRequest(req.url, req.method as "GET");


function 
interface Options {
  width: number;
}
function configure(x: Options | "auto") {
  // ...
}
configure({ width: 100 });
configure("auto");
configure("automatic");

null and undefined

JavaScript有两个用于表示缺少或未初始化的值的原始值：null和undefined。

通过控制 strictNullChecks：on/false

非空断言操作符(后缀 !)

当你知道传入的值肯定不是null 或者 undefined的话，那就直接加入 (!)

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

枚举类型 Enums

普通枚举

enum Color {
  RED = "红色",
  PINK = "粉色",
  BLUE = "蓝色",
}

const pink: Color = Color.PINK;
console.log(pink); // 粉色

//编译之后的js如下：
var Color;
(function (Color) {
    Color["RED"] = "\u7EA2\u8272";
    Color["PINK"] = "\u7C89\u8272";
    Color["BLUE"] = "\u84DD\u8272";
})(Color || (Color = {}));
const pink = Color.PINK;
console.log(pink); // 粉色

常量枚举

const enum Color {
  RED,
  PINK,
  BLUE,
}

const color: Color[] = [Color.RED, Color.PINK, Color.BLUE];
console.log(color); //[0, 1, 2]

//编译之后的js如下：
var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];

不常见的

bigint

• const oneHundred: bigint = BigInt(100);

symbol

• const firstName = Symbol("name");
• const secondName = Symbol("name");