TypeScript常用知识点整理

介绍

TypeScript 是 JavaScript 的一个超集,添加了静态类型支持和更多现代编程特性,提高了代码的可靠性和可维护性。最终会被编译成标准的 JavaScript 代码运行。

使用npm install -g typescript进行全局安装

将编写好的ts代码进行运行,第一种是手动运行直接输入对应的命令tsc加对应的ts文件,另一种是使用vscode tsc --init自动运行

基础

1,原始数据类型

JavaScript的类型分为两种:原始数据类型(Primitive data types)和对象类型(Objecttypes)。
原始数据类型包括:布尔值、数值、字符串、null 、 undefined以及ES6中的新类型 symbol等。

一,布尔类型,字符串,数字类型,undefined和null在ts中的使用

export{}
//布尔类型
let flag:boolean=true
console.log(flag)
//数字类型
let num:number=20
console.log(num)
//字符串类型
let str1:string='李四'
str1='张三'
console.log(str1)//undefined和null
let unf:undefined=undefined
let nu:null=null
console.log(unf,nu)

编译完成转成js之后的代码

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//布尔类型
let flag = true;
console.log(flag);
//数字类型
let num = 20;
console.log(num);
//字符串类型
let str1 = '李四';
str1 = '张三';
console.log(str1);
//undefined和null
let unf = undefined;
let nu = null;
console.log(unf, nu);

2,数组

在ts中进行数组的定义

export{}
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1:number[]=[1,2,3]
console.log(arr1)
//方式二使用泛型
let arr2:Array<number>=[4,5,6]
console.log(arr2)

被转成js之后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//定义数组和前两种基本数据类型有所不同
//方式一
let arr1 = [1, 2, 3];
console.log(arr1);
//方式二使用泛型
let arr2 = [4, 5, 6];
console.log(arr2);

3,对象

表示非原始类型,除了number,string,boolean之外的类型

export{}
let obj:object={}
let obj2:object={a:1}
obj = new String()
obj=obj2
console.log(obj)

被编译js之后

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
let obj = {};
let obj2 = { a: 1 };
obj = new String();
obj = obj2;
console.log(obj);

4,any类型

在typescript中,任何类型的值都可以赋值给 any , any 也可以赋值给任意类型

export{}let type1:any=true
type1=222
console.log(type1)let newArr:any[]=[1,2,3,4]
console.log(newArr)

被转换成ts之后和最终的输出结果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
let type1 = true;
type1 = 222;
console.log(type1);
let newArr = [1, 2, 3, 4];
console.log(newArr);

5,void类型

它表示空值,代表没有任何返回值的函数

export{}
function fun1():void{console.log(123)
}
console.log(fun1())

转换成ts之后及输出

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function fun1() {console.log(123);
}
console.log(fun1());

6,类型推断

ts在没有明确指定类型的时候会推测一个类型,分两种情况

1,定义变量的时候,直接给变量赋值,则定义类型为对应的类型

2,定义变量的时候,没有赋值,则定义类型为any类型

export{}let t1=123//这里t1是number类型,如果给t1一个字符串则会有错误提示
let g2;//这里的g2可以是任意类型的,相当于any
g2=123
g2=''
g2=[]

7,联合类型

表示取值可以为多种类型中的一种

export{}
//定义布尔类型和number类型的
let f:boolean|number=true//表示这个值可以接受布尔值和number两种的任意一种
f=123
f=false
console.log(f)

8,接口-对象类型

什么是接口?

1,在面向对象语言中,接口(Interfaces)是一个概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现( implement);
2,TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述;

3,接口它是对行为的抽像,用于行为的描述,理解为一种约束; 

4,定义中的属性和类型必须要和使用的相同; 
 

interface Person{name:string,age:number,height?:number,//加了问了表示是一个可选属性,这个属性可以有,也可以没有readonly add:string,//定义一个只读的,对其行为进行一个约束
}
let P:Person={name:"李四",age:18,height:24,add:"某某区"
}
//如果在对id进行操作,则会给出错误提示
P.id='某某区1'//这里会错误提示

9,接口-数组类型

接口对数组进行约束

interface InewArray{[index:number]:number//表示接口里面有任意值,并且只能是number类型
}
//进行定义
let arr:InewArray=[1,2,3,4]//如果这里面传入非number类型,会有错误提示
console.log(arr)//1,2,3,4

10,接口-函数类型

对函数进行约束

//定义了一个add函数,a和b都是number类型
//后面的number表示这个函数的返回为number类型
function add(a:number,b:number): number{return a+b
}
console.log(add(1,2))
//另一种定义函数的方式
//这里的问号也是代表可选参数,必选参数不可以放在可选参数的后面
let res=function(a:string,b?:string):string{return a+b
}
console.log(res('type','script'))
//多个参数的情况
function fn(x:string,y:string,...args:number[]){console.log(x,y,args)
}
fn('','',1,2,3)
//多个函数类型
function add2(x:string|number,y:string|number):string|number{if(typeof x=='string'&&typeof y=='string'){return x+y}else if(typeof x=='number'&&typeof y=='number'){return x+y}
}
add2(2,3)
add2('张三','李四')

11,类型断言

将一个联合类型断言为其中一个类型

//定义一个函数,获取到一个数字或字符串的长度
//类型断言,可以手动指定一个类型,两种方式
//1,变量 as 类型
//2,<类型> 变量
function StringLength(x:string|number):number{if((x as string).length){return (<string>x).length}else{return x.toString().length}
}
console.log(StringLength('typescript'))
console.log(StringLength(123))

将任何一个类型断言为any

进阶

1,类型别名

类型别名用来给一个类型起个新名字

type s=string//给类型起别名
let str:s='typescript'
console.log(str)
//另一种使用方式
type all=string|number|boolean
let a1:all=123
console.log(a1)

2,字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

//例如指定只能取以下的几个值
type stringName='张李'|'李四'|'王五'
//这里的name只能取上面三个中的一个
let name:stringName="李四"
console.log(name)

3,元组

数组合并了相同类型的对象,而元组合并了不同类型的对象

//定义一个元组
let Arr:[number,string]=[123,'Script']
//添加内容的时候,需要的是number和string类型即可
Arr.push(456)
Arr.push('hhh')
//如果添加的数据越界会给出错误提示

4,枚举

枚举(Enum)类型用于取值被限定在一定范围内的,比如一周只能有七天,颜色限定为红
绿蓝等。

1,常数项

枚举的使用

enum NumberType{one=1,two=2,three,four
}
console.log(NumberType)

注意点:

    1,每个数据值都可以是元素
    2,如果没有手动赋值,默认第一个参数为0,后面的递增加1
    3,后面的值如果没有手动赋值,会根据前面的值递

编译成js之后

(function (NumberType) {NumberType[NumberType["one"] = 1] = "one";NumberType[NumberType["two"] = 2] = "two";NumberType[NumberType["three"] = 3] = "three";NumberType[NumberType["four"] = 4] = "four";
})(NumberType || (NumberType = {}));
console.log(NumberType);
2,计算所得项
//计算所得项
enum abs{red,//这里写了计算所得项,需要放置在已经确定的赋值枚举项之前blur='blur'.length
}

5,类

1,在类中定义属性和方法
//ts中的类
class Person {//对被传入的属性进行类型限定constructor(name, age) {this.name = name;this.age = age;}say(str) {console.log("haha", str);}
}
let Obj = new Person("张三", 28);
Obj.say("王五");

编译成js之后

class Person {constructor(name, age) {this.name = name;this.age = age;}say(str) {console.log("haha", str);}
}
let Obj = new Person("张三", 28);
Obj.say("王五");
//编译成ts后输出  haha 王五
2,使用类进行继承
//使用类进行继承  父类
class Dog{name:stringage:numberconstructor(name:string,age:number){this.name=namethis.age=age}say(str:string){console.log("ha",str)}
}
//子类
class cat extends Dog{constructor(name:string,age:number){//调用父类的构造函数,使用supersuper(name,age)}jump(str:string){console.log("jump",str)}
}let cat1=new Dog("旺财",4)
console.log(cat1.say("来财"))
let cat2=new cat("花猫",3)
console.log(cat2.jump("小多多"))

被编译之后的js代码

class Dog {constructor(name, age) {this.name = name;this.age = age;}say(str) {console.log("ha", str);}
}
//子类
class cat extends Dog {constructor(name, age) {//调用父类的构造函数,使用supersuper(name, age);}jump(str) {console.log("jump", str);}
}
let cat1 = new Dog("旺财", 4);
console.log(cat1.say("来财"));
let cat2 = new cat("花猫", 3);
console.log(cat2.jump("小多多"));
3,修饰符public,private 和 protected

TypeScript 可以使用三种访问修饰符(Access Modifiers),分别是 public(公共) 、private(私有的)  和protected(受保护的)
1,public 修饰的属性或方法是公有的,可以在任何地方被访问到,默认所有的属性和方法都
是 public
2,private修饰的属性或方法是私有的,不能在声明它的类的外部访问
3,protected 修饰的属性或方法是受保护的,它和 private 类似,区别是它在子类中也是允许
被访问的

4,接口继承类
class newDog{name:stringage:numberconstructor(name:string,age:number){this.name=namethis.age=age}say(str:string){console.log("ha",str)}
}
//接口只会继承类中的实例属性和方法
interface newCat extends newDog{age:number
}
let person:newCat={name:"",age:18,say(){}
}
console.log(person)

6,类与接口的联合使用

一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用implements关键字来实现。这个特性大大提高了面向对象的灵活性。

interface Ising{sing()
}
interface Sdance{dance()
}
class obj1 implements Ising{sing(){}
}
class obj2 implements Sdance{dance(){}
}const o1=new obj1()
const o2=new obj2()
o1.sing()
o2.dance()

7,接口的合并

如果定义了两个相同名字的函数,接口或类,那么它们会合并成一个类型

//合并的数据要一模一样,有一处不同会有错误提示
interface Dog{name:"来财"
}
interface Dog{name:"来财",age:15
}const cat:Dog={name:"来财",age:15}
console.log(cat)

8,泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
1,具体使用

/*
1,定义一个函数,传入两个参数,第一个参数是数据,第二个参数是数量
2,函数的作用:根据数量产生对应个数的数据,存放在一个数组中
*/
//这里的T表示可以输入任何类型
//如果没有确定会自动进行类型推断
function newGetArr<T>(value:T,count:number):T[]{let arr:T[]=[]for(let i=0;i<count;i++){arr.push(value)}return arr
}
console.log(newGetArr(123,3))

2,对数据互换位置

function updataStr<T,U>(t:[T,U]):[U,T]{return [t[1],t[0]]
}
console.log(updataStr(['456',123]))

3,泛型约束

在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性
或方法。

//获取参数的长度,约束这个任意输入的类型,必须有length属性
interface Llength{length:number
}
//通过接口约束类型
function getLength<T extends Llength>(x:T):number{return x.length
}
console.log(getLength('123'))

4,泛型接口和泛型类

//泛型接口
interface IArr{<T>(value:T,count:number):Array<T>
}
let newGetArr2:IArr=function<T>(value:T,count:number):T[]{let arr:T[]=[]for(let i=0;i<count;i++){arr.push(value)}return arr
}
console.log(newGetArr2(123,3))
//泛型类
class Person1<T>{name:stringage:Tconstructor(name:string,age:T){this.name=namethis.age=age}
}
const p1 = new Person1<String>("ts","123")
const p2 = new Person1<number>("456",20)
console.log(p1,p2)

typeSscript使用感受:

        1,有一定的学习成本,感觉和学一门新语言差不多;

        2,和直接使用javascript写代码相比,typescript需要编写更多的代码无形之中增加了工作量;

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

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

相关文章

加密软件如何给文件加密

加密软件如何给文件加密 市面上有很多给文件加密的软件&#xff0c;它是如何给文件加密的呢&#xff1f;加密过程是否安全&#xff0c;效果是否理想呢&#xff1f;下面以安企神软件为例给大家介绍 给文件加密的关键步骤和技术。 1、选择加密算法 安企神软件可能会采用国际公…

如何彻底删除node和npm

如何彻底删除node和npm 前言&#xff1a; 最近做个项目把本地的node更新了&#xff0c;之前是v10.14.2更新至v16.14.0 &#xff0c;想着把之前的项目起来下&#xff0c;执行npm install 结果启动不了&#xff0c;一直报npm版本不匹配需要更新本地库异常… 找了几天发现是npm 和…

AI大模型探索之路-基础篇3:构建Chat Completions驱动的多轮对话机器人

文章目录 前言一、初步测试二、读取本地知识库三、问答测试四、实现多轮对话总结 前言 在上一篇《AI大模型应用开发篇之Chat Completions API》中熟悉了 Chat Completions API相关特点和各种场景的使用样例&#xff1b; 本章主要记录如何基于Chat Completions API实现简单的多…

【数据结构与算法】:快速排序和归并排序的非递归实现

1. 递归实现的缺陷 在以前的文章中我们把快速排序和归并排序的递归实现方式进行了介绍&#xff0c;但是在校招面试和在企业的日常开发过程中&#xff0c;仅掌握递归方法是不够的&#xff0c;因为递归也有它的缺陷。 我们知道在函数调用过程中会在内存中建立栈帧&#xff0c;栈…

solidity(3)

地址类型 pragma solidity ^0.8.0;contract AddressExample {// 地址address public _address 0x7A58c0Be72BE218B41C608b7Fe7C5bB630736C71;address payable public _address1 payable(_address); // payable address&#xff0c;可以转账、查余额// 地址类型的成员uint256…

C/C++与Python:各自的优势与前景展望

在讨论C/C和Python这两种编程语言的前景时&#xff0c;我们必须认识到每种语言都有其独特的定位和应用场景&#xff0c;并不存在绝对意义上的“谁更有前景”。它们分别在不同的领域发挥着重要作用&#xff0c;而且在未来的技术发展过程中&#xff0c;二者都将继续保持其不可替代…

Linux进程间通信【二】

system V进程间通信 管道通信本质是基于文件的&#xff0c;也就是说操作系统并没有为此做过多的设计工作&#xff0c;而system V IPC是操作系统特地设计的一种通信方式。但是不管怎么样&#xff0c;它们的本质都是一样的&#xff0c;都是在想尽办法让不同的进程看到同一份由操…

【深度学习】海洋生物数据集,图片分类

文章目录 任务描述数据收集数据处理模型训练指标评测web app代码和帮助 任务描述 收集9种以上的海洋生物图片&#xff0c;然后基于深度学习做一个分类模型&#xff0c;训练完成后&#xff0c;分类模型就可以对未知图片进行分类。 在之后随便传一张图片&#xff0c;分类模型就…

【静态分析】静态分析笔记01 - Introduction

参考&#xff1a; BV1zE411s77Z [南京大学]-[软件分析]课程学习笔记(一)-introduction_南京大学软件分析笔记-CSDN博客 ------------------------------------------------------------------------------------------------------ 1. program language and static analysis…

ORB-SLAM3整体流程详解

0. 简介 在之前&#xff0c;作者曾经转过一篇《一文详解ORB-SLAM3》的文章。那篇文章中提到了ORB-SLAM3是一个支持视觉、视觉加惯导、混合地图的SLAM系统&#xff0c;可以在单目&#xff0c;双目和RGB-D相机上利用针孔或者鱼眼模型运行。与ORB-SLAM2相比&#xff0c;ORB-SLAM3…

接口自动化框架设计必备利器之参数传递

在我们设计自动化测试框架的时候&#xff0c;我们会经常将测试数据保存在外部的文件&#xff08;如Excel、YAML&#xff09;中&#xff0c;实现测试脚本与测试数据解耦&#xff0c;方便后期维护。 当涉及到业务场景接口用例时&#xff0c;由于接口与接口存在关联关系&#xff…

STL容器之unordered_map类

文章目录 STL容器之unordered_map类1、unordered_map1.1、unordered_map介绍1.2、unordered_map的使用1.2.1、unordered_map的常见构造1.2.2、unordered_map的迭代器1.2.3、unordered_map的容量1.2.4、unordered_map的增删查1.2.5、unordered_map的桶操作 2、unordered_multima…

【快速上手ESP32(基于ESP-IDFVSCode)】04-PWM

PWM PWM&#xff0c;即脉冲宽度调制&#xff08;Pulse Width Modulation&#xff09;&#xff0c;是一种模拟控制方式&#xff0c;根据相应载荷的变化来调制晶体管基极或MOS管栅极的偏置&#xff0c;来实现晶体管或MOS管导通时间的改变&#xff0c;从而达到控制开关稳压电源输出…

物联网系统设计 8

1 规划中小型LoRa 中小型分时复用&#xff0c;大型项目需要学习LoRaWAN 1.1 通信记录 1.2 节点能耗 1278芯片 满功率20DMB&#xff0c;增加PA&#xff0c;发送功率 30 DBM 内置天线柔性 棒状 3db 203 休眠、发生、接收 计算链路预算&#xff0c;工作电流&#xff0c;工…

Blocs v5.2.3 mac版 可视化网页设计工具 兼容 M1/M2/M3

Mac毒搜集到的Blocs 是一款mac上专业强大的精美网页设计软件。特点就是简介、高效、高质&#xff0c;可以帮助我们快速设计出精美的网页&#xff0c;retina视网膜特性支持&#xff0c;优化自适应网页的开发。 应用介绍 Blocs 是一款mac上专业强大的精美网页设计软件。专注于简…

实现WAF对CC攻击的零误封防护:关键技术解析与实践

一、引言 Web应用防火墙&#xff08;WAF&#xff09;作为网站安全的重要防线&#xff0c;其在防御CC&#xff08;Challenge Collapsar&#xff0c;即挑战黑洞&#xff0c;一种分布式拒绝服务攻击&#xff09;攻击中的效能至关重要。然而&#xff0c;精准识别并有效拦截CC攻击的…

2024阿里云2核4G服务器优惠价格表_2核4G性能测评

阿里云2核4G服务器多少钱一年&#xff1f;2核4G服务器1个月费用多少&#xff1f;2核4G服务器30元3个月、85元一年&#xff0c;轻量应用服务器2核4G4M带宽165元一年&#xff0c;企业用户2核4G5M带宽199元一年。本文阿里云服务器网整理的2核4G参加活动的主机是ECS经济型e实例和u1…

pytesseract,一个超强的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - pytesseract。 Github地址&#xff1a;https://github.com/madmaze/pytesseract 在当今数字化时代&#xff0c;文字识别技术扮演着越来越重要的角色。…

设计模式-装饰者模式(Decorator)

1. 概念 装饰者模式是一种结构型设计模式&#xff0c;它允许用户在不修改原始对象的基础上&#xff0c;通过将对象包装在装饰者类的对象中&#xff0c;动态地给原始对象添加新的行为或职责。 2. 原理结构图 图1 图2 抽象组件&#xff08;Component&#xff09;&#xff1a…

离散化实现低通滤波器(选用双线性变换)

学习了离散化后整理了其中的核心步骤&#xff0c;此处不对原理进行深究&#xff0c;仅仅介绍如何对一个连续系统进行离散化 此处可以得到低通滤波器的截止频率为1000rad/s. 离散化的过程为将s 2/Ts * [(z - 1) / (z 1)] (选用双线性变换) 得到离散化序列为 Y(z) [w…