Typescript语法总结

#Typescript 解决了什么问题
Typescript本质上是在 JavaScript 上增加一套静态类型系统(编译时进行类型分析),强调静态类型系统是为了和运行时的类型检查机制做区分,TypeScript 的代码最终会被编译为 JavaScript。
Typescript 创造的价值大部分是在开发时体现的(编译时),而非运行时,如

  • 强大的编辑器智能提示 (研发效率,开发体验)
  • 代码可读性增强 (团队协作,开发体验)
  • 编译时类型检查 (业务稳健,前端项目中Top10 的错误类型低级的类型错误占比达到70%)

变量声明

let isDone: boolean = false
let num: number = 1
let str: string = 'vue3js.cn'
let arr: number[] = [1, 2, 3] 
let arr2: Array<number> = [1, 2, 3] // 泛型数组
let obj: object = {}
let u: undefined = undefined;
let n: null = null;

枚举 Enum

enum LogLevel {info = 'info',warn = 'warn',error = 'error',
}

元组 Tuple

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

任意值 Any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

空值 Void

与 any 相反,通常用于函数,表示没有返回值
function warnUser(): void {console.log("This is my warning message");
}

接口 interface
类型契约,跟我们平常调服务端接口要先定义字段一个样
如下例子 point 跟 Point 类型必须一致,多一个少一个也是不被允许的

interface Point {x: numbery: numberz?: numberreadonly l: number
}
const point: Point = { x: 10, y: 20, z: 30, l: 40 }
const point2: Point = { x: '10', y: 20, z: 30, l: 40 } // Error 
const point3: Point = { x: 10, y: 20, z: 30 } // Error 
const point4: Point = { x: 10, y: 20, z: 30, l: 40, m: 50 } // Error #函数参数类型与返回值类型
function sum(a: number, b: number): number {return a + b
}
#配合 interface 使用
interface Point {x: numbery: number
}function sum({ x,  y}: Point): number {return x + y
}
sum({x:1, y:2}) // 3

一个类只能允许继承一个父类,但是可以实现多个接口,在定义的时候,使用implement语句来声明类所实现的接口,如果是实现多个接口的话,就使用逗号分开。

interface A {name: string;
}
interface B {sum: number;
}
class C implements A, B {name = '32';sum;constructor() {this.sum = 908;}
}

泛型
泛型的意义在于函数的重用性,设计原则希望组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型。
我们需要一种方法使返回值的类型与传入参数的类型是相同的。 这里,我们使用了 类型变量,它是一种特殊的变量T,只用于表示类型而不是值。

function identity<T>(arg: T): T {return arg;
}
//使用示例
//利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型
let output = identity("myString");  // type of output will be 'string'
interface Lengthwise {length: number;
}
function say<T extends Lengthwise>(arg: T): T {console.log(arg.length)return arg;
}
console.log(say(1))  // Argument of type '1' is not assignable to parameter of type 'Lengthwise'.
console.log(say({value: 'hello vue!', length: 10})) // { value: 'hello vue!', length: 10 } //泛型约束
interface Lengthwise {length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);  // Now we know it has a .length property, so no more errorreturn arg;
}
//必须传含length属性的,否则报错
loggingIdentity(3);  // Error, number doesn't have a .length property
loggingIdentity({length: 10, value: 3});

联合类型
联合类型(Union Types),表示一个值可以是几种类型之一。 我们用竖线 | 分隔每个类型,所以 number | string | boolean表示一个值可以是 number, string,或 boolean。

type arg = string | number | boolean
const foo = (arg: arg):any =>{ console.log(arg)
}
foo(1)
foo('2')
foo(true)

unknown 与 any 有啥区别

  • 可以将任何东西赋给 unknown 类型,但在进行类型检查或类型断言之前,不能对 unknown 进行操作。
  • 可以把任何东西分配给any类型,也可以对any类型进行任何操作。

类-class

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;}
}
let greeter = new Greeter("world");
//类的继承
class Animal {name:string;constructor(theName: string) { this.name = theName; }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}
class Snake extends Animal {   //派生类constructor(name: string) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");super.move(distanceInMeters);}
}
class Horse extends Animal {  //派生类constructor(name: string) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");super.move(distanceInMeters);}
}
let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");
sam.move();  //  Slithering...  //Sammy the Python moved 5m.
tom.move(34); //  Galloping...  //Tommy the Palomino moved 34m.
  • public
    类的公共成员没有访问限制,但是可以在类的内部、外部以及派生类的内部访问,公有成员是用public修饰符来标识的。
const Circle = class {public name: number = 90;  //公共成员age: number; // 在构造函数中初始化type: string;constructor() {this.age = 897;this.type = ''}
}
//类在默认的情况下,所有成员都是公有成员,所以可以省略public修饰符。
  • protected
    类的受保护成员,允许在当前类内部和派生类内部可以访问,但是不能在类外部访问。
const Circle = class {protected name: number = 90;  //受保护成员age: number; // 在构造函数中初始化type: string;constructor() {this.age = 897;this.type = '';}
}
const data = new Circle()
console.log(data.name)

在这里插入图片描述
private
类的私有成员,允许在当前类的内部访问,在外部或者派生类内部都不能访问。

class Circle {private x: number = 90;  //类的私有成员#y: number = 90; //类的私有字段,可以使用"#"来表示test() {this.x;}
}
class Derived extends Circle {out() {this.x;}
}

在这里插入图片描述
静态成员
类的静态成员不属于某个实例,而是类的本身,静态成员是通过static关键字来定义的,只能通过类名来访问。
在这里插入图片描述
函数
JavaScript里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。

function buildName(firstName: string, lastName?: string) {if (lastName)return firstName + " " + lastName;elsereturn firstName;
}let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

JavaScript里,你可以使用 arguments来访问所有传入的参数。
在TypeScript里,你可以把所有参数收集到一个变量里。

function buildName(firstName: string, ...restOfName: string[]) {return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/287564.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Multimodal Chain-of-Thought Reasoning in Language Models阅读笔记

论文&#xff08;2023年&#xff09;链接&#xff1a;https://arxiv.org/pdf/2302.00923.pdf GitHub项目链接&#xff1a;GitHub - amazon-science/mm-cot: Official implementation for "Multimodal Chain-of-Thought Reasoning in Language Models" (stay tuned a…

QToolButton的工具提示出现自身border-image背景图的问题解决

用QToolButton贴个图片&#xff0c;用来做个指示灯&#xff0c;当鼠标移动到指示灯&#xff0c;弹出工具提示&#xff0c;以便提示该灯用来干嘛的。预想像下面那样&#xff1a; 然而结果却如下&#xff1a; 在Qt Designer或代码中对该QToolButton设置样式表如下&#xff1a; QT…

中国国内怎么使用订阅升级Duolingo多邻国plus?多邻国使用教程

多邻国Duolingo合租平台&#xff0c;环球巴士 首单9折优惠码&#xff1a;110072 多邻国Duolingo是什么&#xff0c;能用来做什么&#xff1f; 众所周知&#xff0c;多邻国考试的性价比非常高&#xff0c;不仅考试时间短&#xff0c;出分也很快&#xff0c;国际认可度越来越高…

无人机采集图像的相关知识

1.飞行任务规划 一般使用飞行任务规划软件进行飞行任务的设计&#xff0c;软件可以自动计算相机覆盖和图像重叠情况。比如ArduPilot (ArduPilot - Versatile, Trusted, Open) 和UgCS (http://www.ugcs.com)是两个飞行任务规划软件&#xff0c;可以适用大多数无人机系统。 2.图…

教育行业信息数据化:探索8种不同的数据库类型及用途

前言 教育数据库是现代教育领域中不可或缺的重要工具&#xff0c;它们涵盖了多种类型&#xff0c;包括学生信息系统、学习管理系统、图书馆管理数据库、行政数据库、研究数据库、专业教育数据库等。这些数据库在教育机构中发挥着关键作用&#xff0c;为教育工作者和学生提供了…

探究 HTTPS 的工作过程

目录 1. HTTPS 协议原理 1.1. 为什么要有HTTPS协议 1.2. 如何理解安全 1.3. HTTPS 协议是什么 2. HTTPS 的前置概念 2.1. 什么是加密 && 解密 2.2. 为什么要加密 2.3. 常见的加密方式 2.3.1. 对称加密 2.3.2. 非对称加密 2.4. 数据摘要 && 数据指纹…

Git常用指令使用

摘要&#xff1a;之前代码管理都是借助于fork、sourceTree等图形工具&#xff0c;最近发现直接用命令也好用&#xff0c;就总结Git常用的指令 1、Git的介绍 1.1 git官网 安装: Git - Downloading Packagehttps://git-scm.com/download/mac Mac上安装&#xff0c;直接使…

蓝桥杯刷题8

1. 世纪末的星期 import java.util.Calendar; public class Main {public static void main(String[] args) {Calendar calendar Calendar.getInstance();for(int year 1999;year<100000;year100){calendar.set(Calendar.YEAR,year);calendar.set(Calendar.MONTH,11);cale…

【贪心]【字符串】【分类讨论】420 强密码检验器

本文涉及知识点 贪心 字符串 分类讨论 LeetCode420 强密码检验器 满足以下条件的密码被认为是强密码&#xff1a; 由至少 6 个&#xff0c;至多 20 个字符组成。 包含至少 一个小写 字母&#xff0c;至少 一个大写 字母&#xff0c;和至少 一个数字 。 不包含连续三个重复字…

数据结构——排序之冒泡排序

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

浏览器https受信任证书生成——openssl颁发受信任证书

站点常常由于没有受信任的第三方CA机构颁发证书,使用https访问时,浏览器常常会弹出不安全的提示,为解决该问题,可以使用openssl颁发个人证书来解决该问题。 1openssl安装及使用方式参考:32.9 x509_OpenSSL 中文手册https://www.openssl.net.cn/docs/230.html2.本文章所有生…

快速匹配和编译NXP官方uboot-imx

目录 概述 1 搭建编译环境 2 下载和编译uboot-imx 2.1 下载软件包 2.2 编译代码 3 总结 概述 本文主要讲述如何快速匹配和编译NXP官方uboot-imx。文中总结了生成u-boot文件的整个流程&#xff0c;笔者通过实操的方法&#xff0c;一步步从编译器下载&#xff0c;编译环境…

图像处理与视觉感知---期末复习重点(4)

文章目录 一、图像复原与图像增强1.1 概述1.2 异同点 二、图像复原/退化模型2.1 模型图简介2.2 线性复原法 三、彩色基础四、彩色模型五、彩色图像处理 一、图像复原与图像增强 1.1 概述 1. 图像增强技术一般要利用人的视觉系统特性&#xff0c;目的是取得较好的视觉效果&…

react native

简介 React Native 就是使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。在 Android 和 iOS 开发中&#xff0c;一个视图是 UI 的基本组成部分&#xff0c;React 组件通过 JavaScript 来调用这些视图。可以构建自己的 Native Components(原生组件)&#…

鸿蒙操作系统-初识

HarmonyOS-初识 简述安装配置hello world1.创建项目2.目录解释3.构建页面4.真机运行 应用程序包共享包HARHSP 快速修复包 官方文档请参考&#xff1a;HarmonyOS 简述 1.定义&#xff1a;HarmonyOS是分布式操作系统&#xff0c;它旨在为不同类型的智能设备提供统一的操作系统&a…

WebAR开发简介

WebAR 开发使企业能够以独特且高度有趣的方式向客户和员工提供信息。 它提供增强现实 (AR) 内容&#xff0c;人们在智能手机上将其视为视觉叠加。 然而&#xff0c;WebAR 可在手机的普通网络浏览器上运行&#xff0c;无需下载任何应用程序。 WebAR 的多种用途包括帮助零售和在…

深度学习的发展历史(深度学习入门、学习指导)

目录 &#x1f3c0;前言 ⚽历史 第一代神经网络&#xff08;1958-1969&#xff09; 第二代神经网络&#xff08;1986-1998&#xff09; 统计学习方法的春天&#xff08;1986-2006&#xff09; 第三代神经网络——DL&#xff08;2006-至今&#xff09; &#x1f3d0;总结…

2010年之前电脑ubuntu安装nvidia驱动黑屏处理

装好驱动 仿真fps直接到60Hz 陈旧设备 都是非常老旧的电脑&#xff0c;没钱换新电脑&#xff0c;就这么穷…… 电脑详细配置&#xff1a; 冲动 想装显卡驱动提升一下性能&#xff0c;结果……黑了 黑习惯了也无所谓&#xff0c;几分钟就能解决&#xff0c;关键还是太穷&…

docker快速安装Es和kibana

文章目录 概要一、Es二、kibana三、dcoker compose管理四、参考 概要 在工作过程中&#xff0c;经常需要测试环境搭建Es环境&#xff0c;本文基于Es V8.12.2来演示如何快速搭建单节点Es和kibana。 服务器默认已按装docker 一、Es 1&#xff1a;拉取镜像 docker pull elast…

小程序富文本图片宽度自适应

解决这个问题 创建一个util.js文件,图片的最大宽度设置为100%就行了 function formatRichText(html) {let newContent html.replace(/\<img/gi, <img style"max-width:100%;height:auto;display:block;");return newContent; }module.exports {formatRichT…