TypeScript 入门

217 阅读4分钟

TypeScript 通过在 JavaScript 的基础上添加静态类型定义构建而成

类型提供了一种描述对象形状的方法
在TypeScript中,不是每个地方都需要标注类型,因为类型推断允许您无需编写额外的代码即可获得大量功能

TypeScript提供JavaScript的所有功能,并在这些功能的基础上附加一层:TypeScript的类型系统
这意味着您现有的有效JavaScript代码也是TypeScript代码

TypeScript 可以推论类型,在许多情况下为您生成类型

let helloWorld = "Hello World";        //  ^ = let helloWorld: string

TypeScript 可以自定义类型

创建一个name: string和的推断类型id: number的对象
const user = {
  name: "Hayes",
  id: 0,
};

使用interface声明来明确描述此对象的类型
interface User {
  name: string;
  id: number;
}

使用自定义类型 User
const user: User = {
  name: "Hayes",
  id: 0,
};

如果提供的对象与提供的接口不匹配,TypeScript会报错
interface User {
  name: string;
  id: number;
}

const user: User = {
  username: "Hayes",
  id: 0,
};
报错:Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.

TypeScript 通过组合简单类型来创建复杂类型(两种组合方式:联合和泛型)

使用联合,可以声明一个类型是许多类型之一

type MyBool = true | false;        //将boolean类型描述为truefalse

使用联合类型描述 允许值是的strings或numbers文字的集合

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

联合也提供了一种处理不同类型的方法。例如:采用array或的函数string:

function getLength(obj: string | string[]) {
  return obj.length;
}

泛型为类型提供变量,一个常见的例子是数组

没有泛型的数组可以包含任何内容,具有泛型的数组可以描述该数组包含的值
type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

使用自定义泛型

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

declare const backpack: Backpack<string>;
const object = backpack.get();
backpack.add();

TypeScript 结构类型系统(类型检查重点在于值的形状)

在结构类型系统中,如果两个对象具有相同的形状,则认为它们是相同的
interface Point {
  x: number;
  y: number;
}

function printPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const point = { x: 12, y: 26 };         // prints "12, 26"
printPoint(point);

point永远不要将变量声明为Point类型
但是TypeScript在类型检查中将的形状point与的形状进行比较Point,它们具有相同的形状代码可以通过

TypeScript 的基本类型

布尔型(boolean)

最基本的数据类型是简单的true / falselet isDone: boolean = false;

数(number)

TypeScript支持:十六进制,十进制,八进制,二进制文字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

串(string)

TypeScript使用双引号(")或单引号(')包围字符串数据
let color: string = "blue";
color = "red";

使用模板字符串,可以跨越多行并具有嵌入式表达式。字符串由 / ` 字符包围,嵌入式表达式的形式为${expr}
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

数组 []

先使用元素的类型 加上 [] 表示该元素类型的数组
let list: number[] = [1, 2, 3];

使用通用数组类型Array<elemType>
let list: Array<number> = [1, 2, 3];

元组类型(用固定数量的元素表示数组,这些元素的类型是已知的)

将值表示为 string和number
let x: [string, number];
x = ["hello", 10]; 

枚举(为数字值集赋予更友好名称的一种方式)

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

未知(unknown)

描述编写应用程序时不知道的变量类型
let notSure: unknown = 4;
notSure = "maybe a string instead";
notSure = false;

任何(any)

类型变量any允许访问任意属性,即使不存在也是如此,这些属性包括函数
declare function getValue(key: string): any;
const str: string = getValue("myString");

空洞(void)

不返回值的函数的返回类型
function warnUser(): void {
  console.log("This is my warning message");
}

空和未定义(undefined和null)

默认情况下,null并且undefined是所有其他类型的子类型
let u: undefined = undefined;
let n: null = null;

决不(never)

表示值是不会发生的类型,例如never是始终抛出异常或永不返回的异常的函数表达式或箭头函数表达式的返回类型
当变量never被任何永远不可能为真的类型保护范围缩小时,变量也会获取类型

示例:一些函数返回never
function error(message: string): never {
  throw new Error(message);
}

function fail() {
  return error("Something failed");
}

function infiniteLoop(): never {
  while (true) {}
}

目的(object)

object是一种类型的,它表示非原始型的,即任何不是numberstringbooleansymbolnull,或undefined

通过object类型,Object.create可以更好地表示类似的API
declare function create(o: object | null): void;

类型断言(指定类型)

类型断言就像类型转换一样,但是不执行数据的特殊检查或重构

使用 as-syntax断言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

使用“尖括号”断言
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

详细资料点击: TypeScript 手册