TS知识点手册

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"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

h沐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值