程序员经验分享-hwhale

TypeScript 总结

2023-11-01

TypeScript 总结

概述

TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为你提供任何规模的更好工具。

官方文档

中文文档

TypeScript资料

运行ts文件

在这里插入图片描述

方式一

一、安卓typescript：

npm install -g typescript

二、将ts文件编译为js文件：

tsc code.ts

三、运行js文件：

node code.js

查看tsc版本：

tsc -v

使用ES5编译ts代码：

tsc -t es5 demo.ts

方式二

一、安装ts-node：

npm install -g typescript ts-node

二、运行ts文件：

ts-node code.ts

基础

声明变量

var a = 1;
let b = 2;
const c = 3;

类型

TypeScript是JavaScript的一个超集，它添加了静态类型和一些其他的特性。

类型：boolean 布尔值、number 数字、string 字符串、array 数组、tuple 元组、enum 元组、any 任意类型、void、null、undefined、never、object。

数组

let arr1: number[] = [1, 2, 3, 4];
let arr2: Array<number> = [1, 2, 3, 4];
let arr3 = [1, 2, 3, 4];

元组

let person: [string, number] = ["小明", 18];
console.log(person[0]); //小明
console.log(person[1]); //18

联合类型

let union1: string | number;
union1 = 2;
union1 = "hello";

取值限制

let union2: 10 | 20 | 30;
// union2 = 1; //报错
union2 = 10;

枚举类型

enum Color {
  red,
  green,
  blue,
}
let color = Color.red;
console.log(color); //0

自定义值：

enum Sports {
  football = "足球",
  basketball = "篮球",
  pingpong = "乒乓球",
}
let s = Sports.football;
console.log(s); //足球

any & unknown

  • any：任意类型，没有类型检查。
  • unknown：未知类型，会进行类型检查。
let a: any;
a = 123;
a = "abc";
a.eat(); //不会提示报错

let a: unknown;
a = 123;
a = "abc";
a.eat(); //提示报错

void & undefined

  • void：表示没有返回值，主要用于函数。
  • undefined：表示值未定义。
function fun1(): void {
    
}
console.log(fun1()); //undefined

function fun2(): undefined {
  let a;
  return a;
}
console.log(fun2()); //undefined

类型适配

类型适配：也称为类型断言，将某个值强转为指定类型。

无类型适配：

let msg: any;
msg = "hello";
let result = msg.endsWith("o");
console.log(result); //true

说明：调用endsWidth方法时没有提示。

适配方式一：

let msg: any;
msg = "hello";
let result = (<string>msg).endsWith("o");

说明：通过<string>将any转为string类型，调用endsWidth方式有提示。

适配方式二：

let msg: any;
msg = "hello";
let result = (msg as string).endsWith("o");

说明：通过as string将any转为string类型。

面向对象

函数

普通函数

function fun(msg: string) {
  console.log(msg);
}

箭头函数

let fun = (msg: string) => console.log(msg);

可选参数

let fun = (msg: string, code?: number) => console.log(msg);

默认参数

let fun = (msg: string, code: number = 0) => console.log(msg, code);

对象

创建对象

const user = {
  name: "小明",
  age: 18,
  address: "北京市",
};
console.log(user.name);
// console.log(user.nickname); //提示报错

对象的类型限制

let user: { name: string; age: number; address: string };
user = {
  name: "小明",
  age: 18,
  address: "北京市",
};
console.log(user.name);

类和接口

interface IPoint {
  x: number;
  y: number;
}
const drawPoint = (point: IPoint) => {
  console.log({ x: point.x, y: point.y });
};
drawPoint({ x: 100, y: 200 });
// drawPoint({ x: "abc", y: true }); //提示报错

interface IPoint {
  x: number;
  y: number;
  drawPoint: () => void;
}
class Point implements IPoint {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
  drawPoint() {
    console.log({ x: this.x, y: this.y });
  }
}
let p = new Point(2, 3);
p.drawPoint();

泛型

简单使用

// 普通泛型函数
function lastInArray<T>(arr: T[]) {
  return arr[arr.length - 1];
}
console.log(lastInArray(["a", "b", "c", "d"])); //d

// 箭头泛型函数
const lastInArray = <T>(arr: T[]) => arr[arr.length - 1];

// 联合类型
console.log(lastInArray<string | number>(["a", "b", "c", 1])); //d

多个泛型

let makeArray = <T, Y>(x: T, y: Y) => [x, y];
let result = makeArray("a", true);
console.log(result); //[ 'a', true ]

默认泛型类型

let makeArray = <T, Y = number>(x: T, y: Y) => [x, y];
let result = makeArray<string>("a", 1);
console.log(result); //[ 'a', 1 ]

进阶

类型守卫

在 TypeScript 中，类型守卫是一种表达式，它在编译时期检查某个变量的类型，以确保在某个特定的代码块中，该变量的类型是已知的。这对于避免类型错误非常有用，因为它可以确保你在处理变量时，变量的类型是你期望的那种类型。

type Square = {
  size: number;
};
type Rectangle = {
  width: number;
  height: number;
};
type Shape = Square | Rectangle;

function area(shape: Shape) {
  if ("size" in shape) {
    return shape.size * shape.size;
  } else if ("width" in shape) {
    return shape.width * shape.height;
  }
}

let shape = { size: 20 };
console.log(area(shape)); //400
let shape2 = { width: 20, height: 30 };
console.log(area(shape2)); //600

自定义类型守卫

需要借助is表达式。

type Square = {
  size: number;
};
type Rectangle = {
  width: number;
  height: number;
};
type Shape = Square | Rectangle;

function isSquare(shape: Shape): shape is Square {
  return "size" in shape;
}
function isRectangle(shape: Shape): shape is Rectangle {
  return "width" in shape;
}

function area(shape: Shape) {
  if (isSquare(shape)) {
    return shape.size * shape.size;
  } else if (isRectangle(shape)) {
    return shape.width * shape.height;
  }
}

let shape = { size: 20 };
console.log(area(shape)); //400
let shape2 = { width: 20, height: 30 };
console.log(area(shape2)); //600

函数重载

在TypeScript中，函数重载是指在一个函数名下定义多个函数签名，每个函数签名对应不同的参数类型和返回值类型。通过函数重载，我们可以根据不同的参数类型和返回值类型来实现不同的函数行为。

function reverse(string: string): string;
function reverse(array: string[]): string[];
function reverse(stringOrArray: string | string[]) {
  if (typeof stringOrArray == "string") {
    return stringOrArray.split("").reverse().join("");
  } else {
    return stringOrArray.slice().reverse();
  }
}

console.log(reverse("hello")); //olleh
console.log(reverse(["h", "e", "l", "l", "o"])); //[ 'o', 'l', 'l', 'e', 'h' ]

function makeDate(timestamp: number): Date;
function makeDate(year: number, month: number, day: number): Date;
function makeDate(timestampOrYear: number, month?: number, day?: number) {
  if (month != null && day != null) {
    return new Date(timestampOrYear, month - 1, day);
  } else {
    return new Date(timestampOrYear);
  }
}

console.log(makeDate(1688368612562));
console.log(makeDate(2008, 9, 10));

调用签名

TypeScript调用签名是指在TypeScript中定义函数或方法时，指定函数的参数类型和返回值类型。通过调用签名，我们可以明确指定函数的输入和输出类型，以提高代码的可读性和可维护性。

type Add = (a: number, b: number) => number;

const add: Add = (a: number, b: number) => {
  return a + b;
};
console.log(add(2, 3)); //5

实现函数重载

type Add = {
  (a: number, b: number): number;
  (a: number, b: number, c: number): number;
};
const add: Add = (a: number, b: number, c?: number) => {
  return a + b + (c != null ? c : 0);
};

console.log(add(1, 2)); //3
console.log(add(1, 2, 3)); //6

实现constructor重载

type Point = {
  new (x: number, y: number): { x: number; y: number };
  new (x: number, y: number, z: number): { x: number; y: number };
};
const point: Point = class {
  constructor(public x: number, public y: number, public c?: number) {}
};

const p1 = new point(2, 3);
const p2 = new point(2, 3, 4);
console.log(p1); //{ x: 2, y: 3, c: undefined }
console.log(p2); //{ x: 2, y: 3, c: 4 }

索引签名

type Person = {
  name: string;
  age: number;
};
type PersonDictionary = {
  [username: string]: Person;
};
const persons: PersonDictionary = {
  aaa: {
    name: "小明",
    age: 18,
  },
  bbb: {
    name: "小红",
    age: 28,
  },
};

console.log(persons["aaa"]); //{ name: '小明', age: 18 }
console.log(persons["bbb"]); //{ name: '小红', age: 28 }

// 添加数据
persons["ccc"] = {
  name: "小白",
  age: 38,
};

readonly 和 Readonly

  • readonly：是关键字，表示只读变量。
  • Readonly：是类型，表示只读类型。

readonly

function reverseSorted(input: readonly number[]): number[] {
  return [...input].sort().reverse();
}

console.log(reverseSorted([1, 2, 3, 4])); //[ 4, 3, 2, 1 ]

type MyReadOnly = {
  readonly [key in "x" | "y" | "z"]: number;
};
const p: MyReadOnly = {
  x: 10,
  y: 20,
  z: 30,
};
// p.x = 100; //提示报错
console.log(p); //{ x: 10, y: 20, z: 30 }

Readonly

type Person = {
  name: string;
  age: number;
};
const p: Readonly<Person> = {
  name: "小明",
  age: 18,
};
// p.name = "小白"; //提示报错

双重断言

type Point2D = { x: number; y: number };
type Point3D = { x: number; y: number; z: number };
type Person = { name: string; address: string };

let point2D: Point2D = { x: 1, y: 2 };
let point3D: Point3D = { x: 1, y: 2, z: 3 };
let person: Person = { name: "小明", address: "北京" };

// point2D = point3D; //可以转换
// point3D = point2D; //提示报错
// point3D = point2D as Point3D; //类型断言
point3D = person as any as Point3D; //双重断言

常量断言

const person = {
  name: "小明",
  age: 18,
} as const;
// obj = {}; //提示报错
// obj.name = "abc"; //条报报错

this类型检查

function double(this: { value: number }) {
  this.value = this.value * 2;
}
const num = {
  value: 10,
  double,
};
num.double();
console.log(num.value); //20

typeof提取类型

const person = {
  name: "小明",
  age: 18,
  sex: true,
};
type Person = typeof person;
const p1: Person = {
  name: "小白",
  age: 28,
  sex: false,
};
console.log(p1); //{ name: '小白', age: 28, sex: false }

keyof提取联合类型

type Person = {
  name: string;
  age: number;
  sex: boolean;
};
type PersonKey = keyof Person;
function getValueByKey(obj: Person, key: PersonKey) {
  return obj[key];
}
let p: Person = {
  name: "小明",
  age: 18,
  sex: false,
};
let age = getValueByKey(p, "age");
console.log(age); //18
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

typescript

TypeScript 总结 的相关文章

随机推荐

  • Python 导入模块的3种方式

    回到顶部 一 定义 模块就是用一堆的代码实现了一些功能的代码的集合 通常一个或者多个函数写在一个 py文件里 而如果有些功能实现起来很复杂 那么就需要创建n个 py文件 这n个 py文件的集合就是模块 如果不懂可以先看下面这篇博文 http

  • Markdown基础教程

    1 标题 Markdown支持6级标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 标题的效果 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 2 段落及区块引用 Markdown提供了一个特殊符号 gt 用于段

  • 网红表白弹窗

    如何使用Python表白 先看效果图 一 具体步骤 1 首先我们要安装tkinter库 pip install tkinter 等待安装完成即可 2 使用步骤引入库 from tkinter import from tkinter impo

  • 配置MAC刷新ARP功能

    在以太网中 MAC地址表项用于指导设备进行二层数据转发 ARP表项通过IP地址和MAC地址的映射指导设备进行不同网段间的通信 MAC地址表项的出接口通过报文触发刷新的 ARP表项的出接口是在老化时间到后通过老化探测进行刷新的 这样就可能会出

  • 显著性检验【t-test、方差分析、ks检验】

    显著性检验 t test 方差分析 ks检验 0 目录 1显著性检验基本定义 what 2 使用显著性检验的意义 why 3 显著性检验的具体操作流程 how 1 显著性检验基本定义 统计假设检验 Statistical hypothesi

  • vue 按需引入 element-ui 组件

    新建 plugins element ui js 文件 在里面写入需要引入的组件 import Vue from vue import Button Dialog Form FormItem Loading Message Paginati

  • java char判断相等_java面试题-基础

    1 一个 java 源文件中是否可以包括多个类 不是内部类 有什么限制 可以有多个类 但只能有一个public的类 并且public的类名必须与文件名相一致 2 Java有没有goto java中的保留字 现在没有在java中使用 3 说说

  • 搭建： canal部署与实例运行

    1 准备 github https github com alibaba canal 里面有包括canal的文档 server端 client端的 例子 源码包等等 2 canal概述 canal是应阿里巴巴存在杭州和美国的双机房部署 存在

  • Adobe XD 连不上网用不了插件的解决办法

    安装了xd想用插件发现 提示 请先链接网络 只要注册一个所在地在美国的账号即可联网成功 操作如下 1 依次点击菜单栏帮助 登录 2 点击创建账户 3 输入邮箱和密码 邮箱可以随便输入 但要记住密码方便后期登录 但如果后期忘记了密码可以通过邮

  • Linux(CentOS)安装Zookeeper

    前置环境是装好Java环境 然后去zookeeper官网下载 http mirror bit edu cn apache zookeeper 下载好后把压缩包上传到服务器 去到服务器地下解压 tar zxvf apache zookeepe

  • 96. 不同的二叉搜索树

    96 不同的二叉搜索树 给你一个整数 n 求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种 返回满足题意的二叉搜索树的种数 二叉搜索树的定义 二叉搜索树是一个有序树 若它的左子树不空 则左子树上所有结点的值均小

  • Java架构直通车——Kafka介绍和高性能原因

    文章目录 Kafka介绍 Kafka高性能原因 Kafka介绍 Kafka以前说过很多次了 包括了Kafka单独的介绍 Kafka与Fabric 这里知识简单说说 Kafka的主要特点就是基于Pull模式来处理消息消费 追求高吞吐量 一开始

  • JavaScript应该被放在什么位置

    1 JavaScript被放在中 首先我们要知道的是HTML 文档加载顺序是从上至下被加载的 而且加载途中遇到JavaScript的代码时就会把JavaScript的代码放入缓冲中 当浏览器找到与它相关的标签时才进行匹配 当我们把JavaS

  • IRQL的理解和认识

    介绍 中断请求 IRQ Interrupt Request 一般有两种 一种是外部中断 也就是硬件产生的中断 例如 键盘中断 打印机中断 定时器中断 另一种是由软件指令 int n 产生的中断 例如 INT 3 断点中断 INT 1 单步中

  • （附源码）springboot+mysql+基于Java web的电动车销售平台 毕业设计201524

    电动车销售平台的设计与实现 摘 要 信息化社会内需要与之针对性的信息获取途径 但是途径的扩展基本上为人们所努力的方向 由于站在的角度存在偏差 人们经常能够获得不同类型信息 这也是技术最为难以攻克的课题 针对电动车销售平台等问题 对电动车销售

  • ES系列--分析器

    一 前言 ES进行文档分析就会涉及到分析器 无论是内置的分析器 还是自定义的分析器 都是由一个分词器 tokenizers 0或多个词项过滤器 token filters 0或多个字符过滤器 character filters 组成 二 内

  • 数据结构基本概念、线性表、顺序表

    一 头文件 head h ifndef HEAD H define HEAD H include

  • 蓝桥杯每日一题（30）单词分析（python）

    Topic 试题 G 单词分析 时间限制 1 0s 内存限制 512 0MB 本题总分 20 分 问题描述 小蓝正在学习一门神奇的语言 这门语言中的单词都是由小写英文字母组成 有些单词很长 远远超过正常英文单词的长度 小蓝学了很长时间也记不

  • 简述前端MVVM框架

    一张图说明 1 一句话总结 vm层 视图模型层 通过接口从后台m层 model层 请求数据 vm层继而和v view层 实现数据的双向绑定 2 mvc和mvvm的关系 c 控制层 被换成了vm viewmodel 层 MVVM是Model

  • TypeScript 总结

    文章目录 TypeScript 总结 概述 运行ts文件 方式一 方式二 基础 声明变量 类型 数组 元组 联合类型 取值限制 枚举类型 any unknown void undefined 类型适配 面向对象 函数 普通函数 箭头函数 可

热门标签