Typescript基础语法全解析:带你了解Typescript的14个基础语法

请教一下,Typescript基础语法全解析:带你了解Typescript的14个基础语法
最新回答
谱写我们的阳光。

2024-09-23 05:24:49

摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误。

一.Ts是什么

首先,强类型不允许随意的隐式类型转换,而弱类型是允许的。JavaScript就是经典的弱类型语言。而Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误。

二.基本语法1.声明原始数据类型

在变量后面指定一个关键字表示其只能为什么类型。

string类型:

consta:string='auroras'

number类型:

constb:number=666//包括NANInfinity

boolean类型:

constc:boolean=true

null类型:

constd:null=null

undefined类型:

conste:undefined=undefined

symbol类型:

consth:symbol=Symbol()

2.声明Object类型

首先,object类型不单单可以指定对象,还可以指定数组或函数:

constfoo1:object={};constfoo2:object=[];constfoo3:object=function(){};

如果只想指定为对象,如下,对象属性都要提前声明好类型:

constobj:{name:string,age:number}={name:'北极光',age:18}

3.1声明数组类型

可以指定声明Array且通过<>指定元素类型,比如指定声明元素都为数字的数组:

constarr:Array<number>=[1,2,3]

第二种方式如下,也指定声明元素都为数字的数组:

constarr:number[]=[1,2,3]

3.2声明元组类型

就是要提前指定数组里每个元素的类型,严格一一对应:

constb:number=666//包括NANInfinity0

4.声明枚举类型

通过关键字enum声明一个枚举类型,如:

constb:number=666//包括NANInfinity1

如果全不写值,默认值为从0开始递增。如果第一个元素为字符类型,就必须全部定义值。如果第一个元素指定为一个数字,后面元素不写值,那值为第一个元素值按位置大小递增的结果。

5.函数参数与返回类型

函数声明式:

指定函数传入参数类型,指定返回值类型,调用时传入参数个数与类型都必须相同:

括号里指定每个参数类型,括号右边指定返回值的类型。

constb:number=666//包括NANInfinity2

如果传入参数不确定传不传,那么可以给参数加个‘?’表明它是可选的:

constb:number=666//包括NANInfinity3

或者给参数添加默认值,那也会成为可选参数:

constb:number=666//包括NANInfinity4

如果参数个数不确定,可以用扩展运算符加解构赋值表示,当然要传入与指定类型一致的:

constb:number=666//包括NANInfinity5

函数表达式:

constb:number=666//包括NANInfinity6

定义接口时再详细说。

6.任意类型

通过指定any关键字表示任意类型,跟原来js一样,可以任意赋不同类型的值:

constb:number=666//包括NANInfinity7

7.类型断言

类型断言就是明确的告诉TypeScript这个变量就是某种类型的,百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。

可以通过as+类型断言它就是某种类型的:

constb:number=666//包括NANInfinity8

也可以通过<类型>形式断言(不推荐):

constb:number=666//包括NANInfinity9

8.接口基本使用

接口可以理解为一种规范,一种契约。可以约束一个对象里应该有哪些成员,这些成员都是怎么样的。

通过interface定义一个Post接口,这个接口是一个对象,规则为有一个name属性类型为string,age属性类型为number。

constc:boolean=true0

然后比如有一个函数printPost,它的参数post使用我们定义的Post接口的规则,那么调用此函数传参时要传入符合Post接口规则的数据。

constc:boolean=true0functionprintPost(post:Post){console.log(post.name);console.log(post.age);}printPost({name:'asd',age:666})

当然,函数传参时可能有些参数是可选的,那么我们可以给接口也定义可选的成员,通过属性后加一个‘?’指定可选成员:

constc:boolean=true2

如果用readonly修饰成员,那么这个成员属性在初始化后便不可修改:

constc:boolean=true3

如果连成员属性名称都不确定,那么可以声明动态成员,要指定成员名字类型与成员值的类型,如:

constc:boolean=true4

9.类基本使用

描述一类具体事物的抽象特征。ts增强了es6中class类的相关语法。

首先,类的属性使用前必须提前声明好:

constc:boolean=true5

10.类的访问修饰符

private修饰私有属性,只能在类内部访问。public修饰公用属性(默认),外部也可访问:

constc:boolean=true6

protected修饰为受保护的,外部也不可访问。但与private的区别是若是继承的子类是可以访问的。

constc:boolean=true7

11.类只读属性

给属性设置readonly则为只读属性,该属性初始化后便不可再修改。

constc:boolean=true8

12.类与接口

一些类与类之间有些许共同的特征,这些共同的特征可以抽象成为接口。

比如Person类和Animal类,虽然是不同类,但是人和动物都会吃东西和走路等,这些共同的特征可以由接口定义。最后一个特征就定义一个接口。

constc:boolean=true9

13.抽象类

约束子类必须有某些成员,有点类似接口,不同的是抽象类可以包含一些具体的实现。比如动物类应该为一个抽象类,它的子类有猫,狗,熊猫等。它们都是动物,也有一些共同的特征。定义一个类为抽象类后,就不能再new实例了,只能被其子类继承。

其中abstract定义抽象类,类里用abstract定义一个抽象方法,子类必须实现抽象方法。

constd:null=null0

14.泛型

泛型就是在定义函数,接口或者类的时候没有指定具体类型,等到使用时才指定具体类型。极大程度的复用代码。

比如有一个identity函数,这个函数会返回任何传入它的值,且传入的类型与返回的类型应该是相同的。如果传入数字,不用泛型的话,这个函数可能是下面这样:

constd:null=null1

如果传入字符串,这个函数可能是下面这样:

constd:null=null2

这样的话太麻烦,所以可以使用泛型,一般用大写T表示泛型,它可以适用于多个类型,且传入类型与返回类型是相同的。

constd:null=null3

本文分享自华为云社区,作者:北极光之夜。