TS知识点手册

大家好，欢迎来到IT知识分享网。

1、TypeScript是什么？

ts官网（https://www.typescriptlang.org/docs/handbook）原话是这样说的：

TypeScript is JavaScript with syntax for types. TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale. 

意思是：typeScript是带有类型语法的JavaScript，后一句慢慢悟。为什么这么说呢？

TypeScript stands in an unusual relationship to JavaScript. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system. 

typeScript和JavaScript是有不同寻常的关系，它包括了JavaScript的所有特性，并在顶层加了一层typeScript的类型系统。用数学集合来说：就是ts是js的超集，js是ts的子集，ts多出的东西就是类型系统。

2、TS基础知识点：

1. 类型推断（Types by Inference）：

2. 定义类型（Defining Types）：

当我们创建一个对象时：

const user = { 
    name: "Hayes", id: 0, }; 

使用ts的interface这个对象定义：

interface User { 
    name: string; id: number; } 

使用interface创建对象：

const user: User = { 
    name: "Hayes", id: 0, }; 

当这样使用interface时，类型报错问题：

interface User { 
    name: string; id: number; } const user: User = { 
    username: 'hh' } 

3. interface定义类（class）：

interface User { 
    name: string; id: number; } class UserAccount { 
    name: string; id: number; constructor(name: string, id: number) { 
    this.name = name; this.id = id; } } const user: User = new UserAccount('hh', 1); 

还可以使用interface代替参数和返回格式：

function getAdminUser(): User { 
   //返回User类型的参数 //... } function deleteUser(user: User) { 
   //传User类型的参数 // ... } 

4. TS的元类型：

boolean, bigint, null, number, string, symbol and undefined, last : void(return undefined or no return value) 

5. Interfaces and Types

a.Types

type MyBool = true | false; 

Types 构成： 分为联合构成和泛型。

b.联合类型（unions）

type WindowStates = "open" | "closed" | "minimized"; type LockStates = "locked" | "unlocked"; type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9; //联合类型可以处理不同的类型 function getLength(obj: string | string[]) { 
    //该函数可以接收字符串或者字符串数组 return obj.length; } 

• 变量条件判断常用：

typeof x === "string" //判断x的类型是不是字符串 typeof x === "number" //判断x的类型是不是数字类型 typeof x === "boolean" //判断x的类型是不是Boolean类型 typeof x === "undefined" //判断x的类型是不是undefined typeof x === "function" //判断x的类型是不是函数 Array.isArray(x) //判断x的类型是不是数组 

function利用unions和类型判断：

function wrapInArray(obj: string | string[]) { 
    if (typeof obj === "string") { 
    return [obj]; // (parameter) obj: string } return obj; // (parameter) obj: string[] } 

c.泛型（generics）

泛型主要是能提供一种变量型的类型，最常见的例子是数组类型，如果该数组类型没有带泛型，则该数组的元素可以是any，但是如果该数组带了泛型，则该数组的元素只能是泛型描述的类型元素。

type StringArray = Array<string>; type NumberArray = Array<number>; type ObjectWithNameArray = Array<{ 
    name: string }>; 

泛型的好处是可以根据它的定义来的：它可以声明自己定义的类型：

interface Backpack<Type> { 
    add: (obj: Type) => void; get: () => Type; } // This line is a shortcut to tell TypeScript there is a // constant called `backpack`, and to not worry about where it came from. declare const backpack: Backpack<string>; // object is a string, because we declared it above as the variable part of Backpack. const object = backpack.get(); // Since the backpack variable is a string, you can't pass a number to the add function. backpack.add(23); Argument of type 'number' is not assignable to parameter of type 'string'. 

d.结构类型（Structural Type System）

在一个文件里，如果有两个对象有相同的类型，可以定义相同的结构类型：

interface Point { 
    x: number; y: number; } function logPoint(p: Point) { 
    console.log(`${ 
     p.x}, ${ 
     p.y}`); } // logs "12, 26" const point = { 
    x: 12, y: 26 }; logPoint(point); 

const point3 = { 
    x: 12, y: 26, z: 89 }; logPoint(point3); // logs "12, 26" const rect = { 
    x: 33, y: 3, width: 30, height: 80 }; logPoint(rect); // logs "33, 3" const color = { 
    hex: "#187ABF" }; logPoint(color); / Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'. Type '{ hex: string; }' is missing the following properties from type 'Point': x, y */ 

class和对象：

class VirtualPoint { 
    x: number; y: number; constructor(x: number, y: number) { 
    this.x = x; this.y = y; } } const newVPoint = new VirtualPoint(13, 56); logPoint(newVPoint); // logs "13, 56"