分享好友 站长动态首页 网站导航

你还在为不知道怎么学TypeScript而烦恼吗?---看这篇文章就够啦

网友发布 2022-10-26 20:40 · 头闻号编程技术

Typescript是什么?Typescript是微软公司开发的一款开源的Javascript超集语言!那什么是Javascript超集语言呢?Javascript超集: 当前任何Javascript都是合法的Typescript代码!意思就是Typescript的语法中包含了当前所有的Javascript语法。那么Typescript的作用是什么呢?Typescript主要为Javascript提供了类型系统和ES6语法的支持!Typescript与Flow的区别在哪呢?Flow是一个类型检查工具,Typescript是一种开发语言!Typescript有自己的编译工具,我们写好的Typescript代码最终会通过编译器编译成Javascript代码进行运行!如何使用Typescript安装Typescript命令行工具的安装(TS编译器)---注意:在使用npm命令前我们需要先安装node.jsnpm i typescript -g安装好了之后,全局会提供一个tsc命令给我们使用!编写Typescript代码通过tsc进行编译,最终运行ts配置文件的说明

  1. 创建配置文件
tsc --init
  1. 设置配置项
  2. target: 指的就是将ts代码要转换成哪个版本的js代码 es5 es6
  3. module: 指的就是将ts代码转换成js代码之后,使用的模块化的标准是什么
  4. outDir: 指的就是将ts代码转换成js代码之后,js代码存放的文件夹路径
  5. rootDir: 指的就是要将哪个目录中的ts代码进型转换,ts代码的存放路径
  6. strict: 是否要将ts代码转换为严格模式的js代码!
  7. 使用配置文件
tsc -p ./tsconfig.jsonTypescript中的数据类型数字类型​ typescript中的数据类型可以被赋值为数字,NaN,Infinity,还有进制数字。

let

a

:

number

=

10

;

let

b

:

number

=

NaN

;

let

c

:

number

=

Infinity

;

let

d

:

number

=

0xA12

;

//十六进制数字

let

e

:

number

=

0b1010101

;

//二进制数字

let

f

:

number

=

0o75

;

//八进制数字

字符串类型​ typescript中的字符串可以用单引号,也可以用双引号括起来,甚至可以用es6中的模板字符串。

// string

let

str

:

string

=

"这是一个字符串"

let

str1

:

string

=

'这是一个字符串'

let

str2

:

string

=

`hello 这是一个模板字符串

${

a

}

`

布尔值类型​ typescript中的布尔类型可以被赋值为true或者false。

// boolean

let

flag

:

boolean

=

true

;

let

flag1

:

boolean

=

false

;

数组类型​ typescript中的数组类型可以像flow一样用 :Array<数据类型> 进行限制,也可通过 :数据类型 [] 进行限制。

// 数组

// Array<数据类型>

let

arr

:

Array

<

number

>

=

[

1

,

2

,

3

,

4

];

// 数据类型[]

let

arr1

:

number

[]

=

[

1

,

2

,

3

,

4

];

元组​ typescript中的元组数据类型类似于python中的元组,里面的元素可以存放指定不同类型的数据。

元组的元素可以通过下标进行访问。

通过索引得到元组元素并修改其中的内容时,只能改变该索引位置定义的数据类型。如下代码中,定义了一个arr2元组,其中arr2[0]必须是数字类型,arr[1]必须是字符串类型。当我们要修改索引0的元素时,只能将其修改为数字类型的,而不能是其他类型的。

​ 注意:当我们访问修改的元素超过元组的长度时,该元素默认的类型可以是该索引前面的所有数据类型。如我们访问了arr[2]此时我们即可以将其赋值为字符串,又可以将其赋值为数字。

// 元组(Tuple)

let

arr2

:

[

number

,

string

]

=

[

1

,

'a'

];

// arr2[0] = 'a';

// arr2[0] = 1000;

arr2

[

2

]

=

'a'

;

arr2

[

2

]

=

1

;

// arr2[2] = [];

void空值​ typescript中的void空值类型只能赋值为undefined。

// void 空值

let

res

:

void

=

undefined

;

undefined和null类型​ typescript中的undefined数据类型只可以赋值为undefined,null类型只可以赋值为null。

// undefined

let

res1

:

undefined

=

undefined

;

// null

let

res2

:

null

=

null

;

任意类型any​ typescript中当我们不确定要赋值为什么类型的变量的时候我们可以将其定义为any类型。any类型允许我们将变量赋值任意类型的数据。

// any 表示任意类型

let

somevar

:

any

=

10

;

somevar

=

"abc"

;

somevar

=

[];

9、never类型​never类型一般用在不可能返回内容的函数的返回值类型设置。一般将变量设置为never类型没有意义。never需要用在没有尽头的函数,像死循环函数,像报错函数。

function

test

:

never

{

while

{

}

}

object对象类型​ typescript中的非基本数据类型都可以用对象类型,如对象,数组。

也可以类似flow中的语法规定对象的参数。

// object类型

// let o: object = {};

// let o1: object = [];

// 对象类型

//这种方法和flow的限制对象参数的方法类似

let

o

:

{

name

:

string

,

age

:

number

}

=

{

name

:

"张学友"

,

age

:

18

};

1枚举类型​ 当我们需要限制一个属性的取值,比如性别之只能取男,女,或者未知性别的时候我们就可以用到typescript的枚举类型。

// gender: 0 1 -1

enum

Gender

{

male

=

1

,

female

=

0

,

unknow

=

-

1

}

let

gender

:

Gender

=

Gender

.

male

;

let

obj

=

{

gender

:

Gender.male

}

1类型断言​ 当我们明确的知道该变量的类型的时候,我们可以使用 <数据类型>的方式告诉typescript该变量是什么类型。类型断言常常用在我们需要调用某种变量特有的方法时,比如我们定义了一个any 类型的stri变量后先赋值为字符串,然后我们需要调用字符串的length属性获取字符串的长度,此时我们可以通过类型断言,告诉typescript变量stri是字符串类型,我们才可以调用length属性。

// 类型断言

let

stri

:

any

=

"abc"

;

let

len

:

number

=

.

length

;

typescript中的类​ typescript中的类和ES6不同的是,TS中属性必须声明,需要指定类型。 声明后的属性必须赋值一个默认值或者在构造函数中进行初始化。以下是es6中定义类的示例:

class

Person

{

constructor

{

this

.

name

=

name

;

this

.

age

=

age

;

}

sayHello

{

console

.

log

;

}

}

以下是typescript中定义类的示例:

class

Person

{

//先声明name变量和age变量并在构造函数中进行初始化

name

:

string

age

:

number

constructor

{

this

.

name

=

name

;

this

.

age

=

age

;

}

sayHello

:

void

{

console

.

log

;

}

}

Typescript中类的继承​ Typescript中类的继承和es6一样,通过extends关键字进行继承。子类在继承后若要复写父类的constructor方法需要先调用super方法,并且要传入父类中构造函数定义的参数。

如下代码中复写父类的constructor方法中先调用了super方法,并传入了父类的constructor方法中要求传入的参数age。如果子类的方法和父类的同名,子类中的方法会覆盖父类的方法。

//父类Animal

class

Animal

{

age

:

number

constructor

{

this

.

age

=

age

;

}

//父类的eat方法

eat {

console

.

log

}

}

//继承Animal类的子类Dog

class

Dog

extends

Animal

{

type

:

string

constructor

{

//继承的字类中的构造方法中必须先调用super方法,并且要传入父类中构造函数定义的参数。

super

;

this

.

type

=

type

;

}

// 子类中如果出现了和父类同名的方法,则会进行覆盖

// 也就是调用的时候,调用的就是子类中的方法了!

eat {

console

.

log

}

}

//初始化一个Dog实力并传入种类和年龄参数

var

dog

=

new

Dog

;

dog

.

eat

;

Typescript中的访问修饰符​ 访问修饰符指的就是可以在类的成员前通过添加关键字来设置当前成员的访问权限。typescript中主要有三个访问修饰符:​ public: 公开的,默认 任何对象在任何地方都可以进行访问 ​ private: 私有的, 只能在当前类中进行访问 ​ protected: 受保护的,这能在当前类或者子类中进行访问

enum

Color

{

red

,

yellow

,

blue

}

class

Car

{

// 如果不加访问修饰符 则当前成员默认是公开的 所有人都可以访问的

public

color

:

Color

constructor

{

this

.

color

=

Color

.

red

;

}

// 加了private之后,当前成员就只能在当前类中使用了!

private

run {

}

// 加了protected之后,当前成员就只能在当前类或者子类中使用了!

protected

loadPeople {

}

}

let

byd

=

new

Car

;

class

Audi

extends

Car

{

sayHi {

console

.

log

}

}

let

audi

=

new

Audi

;

Typescript中的只读属性和参数属性说明​ 当我们在类中想要定义一个不可以被外部改变的属性的时候,我们可以使用readonly修饰符,将该变量修饰为只读属性,这样在类的外部只可以访问该属性而不能改变该属性的值。使用了readonly变为只读属性的变量必须在类中赋予初始值或者在构造函数中进行初始化​ 在构造函数前可以给参数加修饰符,此时就相当于定义了一个参数,同时将调用时传入的参数的值赋值给该参数。

class

Cat

{

//此时将name属性设置为只读属性,外界只能访问name变量的值,但不能进行修改

readonly

name

:

string

//在constructor构造函数中直接添加修饰符并定义了一个type属性用来接收用户传入的参数值

constructor

{

this

.

name

=

"加菲"

}

}

var

cat

=

new

Cat

;

// cat.name = "123" //由于name属性是可读属性,不能被重新赋值,此时编译器会报错

Typescript中的存取器​ 我们一般定义类中的属性并读取和存储是这样的:

class

Person

{

//定义内部变量

public

_name

;

//在构造函数中对name属性进行初始化

constructor

{

this

.

_name

=

""

}

}

//实例化一个Person类

let

personName1

=

new

Person

;

//获取name变量

personName1

.

name

;

//""

//设置set变量

personName1

.

name

=

"徽柔"

;

//此时实例化后的personName1类中的name属性值为徽柔

​ 但当我们需要在用户修改的时候对输入的数据进行判断,符合数据规范则可以改变,不符合则不可以改变的时候,这个时候我们就可以在类的内部定义存取器。具体代码如下:

class

Person

{

//定义内部name属性

private

_name

;

//在构造函数中对name属性进行初始化

constructor

{

this

.

_name

=

""

}

//变量取用函数get

get

name

{

return

this

.

_name

;

}

//变量设置函数set

set

name

{

if

{

throw

new

Error

}

this

.

_name

=

value

;

}

}

//在类的外部调用存取器进行变量的读取和修改

let

people

=

new

Person

;

//当我们访问类中的name变量时,会自动调用get方法

let

personName

=

people

.

name

;

console

.

log

;

//控制台输出 : ""

//当我们为变量赋予新的值时,会自动调用set方法

people

.

name

=

"徽柔"

;

console

.

log

;

//控制台输出 : 徽柔

​ 上述代码在set方法中限制了用户输入的字符串长度必须在2~5之间,否则就生成并抛出一个错误。这样我们就达到对用户的输入值进行限制判断的目的。注:当我们只定义了get方法时,该属性变为只读属性,无法设置其值。

当我们只定义了set方法的时候,该属性无法读取,只能调用set方法设置其中的值。Typescript中的接口Typescript中接口的基本使用​接口可以理解为一个规范,当我们需要的限制传入的参数具有什么样的值时,我们可以使用接口来规范传入的参数对象,例如下面的代码中,声明了一个AjaxOptions接口,其中有四个属性。我们要在ajax函数中限制其传入的参数必须有这四个属性的时候我们就可以让该参数继承AjaxOptions接口。

然后我们再调用ajax函数时传入的参数就必须有该四个属性,否则就会报错。

// 使用interface声明AjaxOptions接口

interface

AjaxOptions

{

url

:

string

,

type

:

string

,

data

:

object

,

success

:

void

}

// option参数中 需要包含 url type data success

function

ajax

{

}

ajax

{

}

})

​ 我们在使用官方ajax方法的时候发现有些方法是可选的,即传入的参数可以有对应四种的属性,也可以没有其中的一些属性。那么我们如何在typescript中实现这个可选属性呢?在typescript中直接在定义接口中的可选属性名后加?就可以了。

// 使用interface声明AjaxOptions接口

interface

AjaxOptions

{

url

:

string

,

// 给属性加上?之后,这个属性就是可选的!

type

:

string

,

data

:

object

,

success

:

void

}

// option参数中 需要包含 url type data success

function

ajax

{

}

ajax

{

}

})

Typescript接口中的只读属性​ 在接口定义的时候我们可以在该属性前添加readonly关键字将其设置为只读属性,该属性的值只能在初始化的时候改变,其他情况下只允许读取,不允许改变。

interface

Point

{

readonly

x

:

number

,

readonly

y

:

number

,

}

let

poi

:

Point

=

{

x

:

10

,

y

:

10

}

// poi.x = 100; //这样会报错,因为xs属性是只读属性,不能重新赋值

Typescript接口中的额外类型检查​ 上面我们讲到接口继承后需要只能传入规定好的参数,但我们开发中有时候希望我们能传入更多的参数,此时我们可以使用接口中的额外类型检查。具体的语法是 :

interface

接口名

{

属性

1

:数据类型,

属性

2

,数据类型,

[

额外检查属性名:数据类型

]

:

any

}

示例代码如下:

interface

Point

{

readonly

x

:

number

,

y

:

number

,

[

propName

:

string

]

:

any

}

let

poi

:

Point

=

{

x

:

10

,

y

:

10

}

// poi.x = 100;

let

poi1

:

Point

=

{

x

:

10

,

y

:

10

,

//此时我们在写多一个z属性的时候就不会报错了

z

:

100

}

Typescript中的函数类型的接口​ 前篇文章中我们基本介绍了接口的定义,接口的基本使用。本篇文章中我们将会学习使用Typrscript中函数类型的几口。

其基本语法如下:

interface

函数接口名

{

:

函数返回值

}

下面是示例代码:

interface

SumInterFace

{

:

number

}

let

sum

:

SumInterFace

=

function

:

number

{

return

a

+

b

;

}

​ 上述代码中我们定义了一个SumInterFace的函数接口,规定了继承该接口的函数必须有两个number类型的参数,并且返回一个nubmer类型的值。然后我们定义了一个sum函数去继承该接口,继承SumInterFace接口后,sum函数的参数列表和返回值就必须遵循该接口的规范。Typescript中的类接口​ 在typescript中支持我们对类进行接口的定义,具体语法如下:

interface

类接口名

{

属性1

:

数据类型

,

属性2

:

数据类型

,

...

}

​ 示例代码如下:

/*定义Person类的接口PersonInterFace,其中有三个属性,分别是

字符串类型的name

数字类型的。

免责声明:本平台仅供信息发布交流之途,请谨慎判断信息真伪。如遇虚假诈骗信息,请立即举报

举报
反对 0
打赏 0
更多相关文章

评论

0

收藏

点赞