TypeScript-开发环境搭建和类型

JS:易学,灵活但维护困难

TS:解决JS的问题,以JS为基础构建的,完全支持JS,在此基础之上进行扩展,最大的贡献就是引入了类型的概念,将JS动态类型语言变成动态类型语言,支持JS平台。适合开发大型项目。可维护性高

TypeScript-开发环境搭建和类型_第1张图片

TS新增的东西:

类型、支持ES6的新特性、ES不具备的新特性、丰富的配置选项、强大的开发工具

TypeScript-开发环境搭建和类型_第2张图片

对ts进行编译:直接输入命令tsc hello.ts

TypeScript-开发环境搭建和类型_第3张图片

2 基本类型

类型声明

  类型声明是TS非常重要的一个特点

  通过类型声明可以指定TS中变量(参数、形参)的类型

  指定类型后,为变量赋值时,TS编译器会自动检查值是否符合类型,符合则赋值,否则报错

  语法:

TypeScript-开发环境搭建和类型_第4张图片

把a定义为number类型之后,在给a赋值’hello’,就会报错,如下:

TypeScript-开发环境搭建和类型_第5张图片

如果变量的声明和赋值同时进行,TS可以自动对变量进行类型检测,此时可以省略类型声明

可以对函数的参数以及返回值定义类型

TypeScript-开发环境搭建和类型_第6张图片

TypeScript-开发环境搭建和类型_第7张图片

使用字面量进行类型声明

TypeScript-开发环境搭建和类型_第8张图片

 字面量的使用场景:

TypeScript-开发环境搭建和类型_第9张图片

 符号&的使用

any表示的是任意类型,一个变量设置为any相当于对这个变量关闭了类型检测。

声明变量时,如果不指定类型,TS解析器会自动判断变量的类型为any(隐式any)

Unknow:表示未知类型的变量,是安全类型的any

any类型的变量可以赋值给任何类型,不报错

TypeScript-开发环境搭建和类型_第10张图片 

unknown类型的变量不能赋值给其他任何类型 

TypeScript-开发环境搭建和类型_第11张图片 

解决:(1) 在赋值之前进行一个类型判断 就可以了

 TypeScript-开发环境搭建和类型_第12张图片

 (2)使用类型断言(可以用来告诉解析器变量的实际类型)

TypeScript-开发环境搭建和类型_第13张图片

 断言的两种写法

 

void和never通常用来设置函数的返回值

Void:空值,以函数为例,表示没有返回值的函数

Never:没有值,不能是任何值,永远不会返回结果,通常用在报错函数中

 TypeScript-开发环境搭建和类型_第14张图片

Object:表示一个对象,可以用来指定对象中包含哪些属性,以及属性的类型

TypeScript-开发环境搭建和类型_第15张图片  TypeScript-开发环境搭建和类型_第16张图片

在属性名后面加?,表示属性可有可无,是可选的。

TypeScript-开发环境搭建和类型_第17张图片

 也可以指定对象中有一个确定的属性,其他的属性不做限制,可有可有,写法如下:

 定义函数的写法与此类似:使用箭头函数的形式来设置函数的结构类型声明:

表示d是一个有两个number类型的参数,且返回值也是Number类型的函数。

Array:数组,在TS中一般在数组中存储同类型的值

TypeScript-开发环境搭建和类型_第18张图片  TypeScript-开发环境搭建和类型_第19张图片

定义数组的两种写法:

TypeScript-开发环境搭建和类型_第20张图片

 元组Tuple:TS新增的,固定长度的数组

枚举enum:TS新增的

定义方式:

TypeScript-开发环境搭建和类型_第21张图片应用场景,如在性别判断的时候

类型的别名:

 

 ​​​​​​

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(typescript)