TypeScript

最新推荐文章于 2024-10-01 20:12:28 发布

ZDM_9999

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量93

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ZDM_9999/article/details/129147427

版权

TypeScript 开发环境搭建

下载Node.js
- 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
- 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
安装Node.js
使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
- tsc空格-v命令用来测试是否安装成功
创建一个ts文件
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts

通过配置编译

每次写完ts文件都要输入一次命令是不是很麻烦呢，能不能保存文件时就自动编译运行ts文件呢

cd到项目下
使用 tsc -init 会生成tsconfig.json 文件（ tsconfig.json文件与TypeScript编译器(tsc)的配置相对应是 TypeScript 使用 tsconfig.json 文件作为其配置文件 用来指定待编译文件和定义编译选项。）
直接使用tsc命令即可编译

为什么要使用这个文件

通常我们可以使用 tsc 命令来编译少量 TypeScript 文件

但如果实际开发的项目，很少是只有单个文件，当我们需要编译整个项目时，就可以使用 tsconfig.json 文件，将需要使用到的配置都写进 tsconfig.json 文件，这样就不用每次编译都手动输入配置，另外也方便团队协作开发。

常见配置

{

"compilerOptions": {

"target": "ES5", // 目标语言的版本

"module": "commonjs", // 指定生成代码的模板标准

"noImplicitAny": true, // 不允许隐式的 any 类型

"removeComments": true, // 删除注释

"preserveConstEnums": true, // 保留 const 和 enum 声明

"sourceMap": true, // 生成目标文件的sourceMap文件(简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便)

"outDir":"./out/" //编译输出的文件夹

"files": [ // 指定待编译文件(files 配置项值是一个数组，用来指定了待编译文件，即入口文件。入口文件依赖其他文件时，不需要将被依赖文件也指定到 files 中，因为编译器会自动将所有的依赖文件归纳为编译对象，即 index.ts 依赖 user.ts 时，不需要在 files 中指定 user.ts ， user.ts 会自动纳入待编译文件。)

"./src/index.ts"

]

}

自动编译

vscode 自动编译

需要监视tsconfig.json文件:

1.点击终端运行任务

选择typescript:

选择监视tsconfig.json文件

命令自动编译

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
示例：

tsc xxx.ts -w

监控全部文件

tsc -w

基本类型

变量

注意：let变量不能重复声明注意：const它拥有与 let相同的作用域规则，但是不能对它们重新赋值。注意:除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格

类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
语法：
- let变量: 类型;
  
  let变量: 类型=值;
  
  functionfn(参数: 类型, 参数: 类型): 返回值类型{
  ...
  }

基础/基元类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi", hi	任意字符串
boolean	true、false	布尔值true或false

数组类型

letlist: number[] = [1, 2, 3];

letlist: Array<number>= [1, 2, 3];//泛型语法

对象类型

{}用来指定对象中可以包含哪些属性

语法：{属性: 属性值, 属性: 属性值...}

let obj:{name:string,age:number}={

name:"xixi",

age:18

}

注意：如果在使用对象的时候必须给每个属性都要传入对应的值否则会报错

// 没有给age传值就会报错

let obj:{name:string,age:number}={

name:"xixi"

}

可选属性

在属性名后面加?，表示该属性是可选的

// age为可选属性所以不传之也不会报错

let obj:{name:string,age?:number}={

name:"xixi"

}

null与unfined类型

null是定以不存在的

unfined 是未初始化的值

enum 枚举

TS中新增类型使用枚举类型可以为一组数值赋予友好的名字。枚举表示的是一个命名元素的集合值

就是给一组数据起一个友好的名字

数字枚举类型和字符串枚举类型；

enumuser{xiaoming,xiaohong,xiaobai}

console.log(user.xiaohong)//默认情况下数据的值从0开始

// 设置值

enumuser{xiaoming,xiaohong=99,xiaobai}

console.log(user.xiaohong)

console.log(user.xiaobai)

// 字符串枚举设置值

enumuser{xiaoming,xiaohong="小红",xiaobai="小白"}

console.log(user.xiaohong)

console.log(user.xiaobai)

tuple元组

元组，TS新增类型，元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同（赋值的顺序不能变）

letx: [string, number];
x= ["hello", 10];

any

在一些情况下，如果我们无法确定变量的类型时（或者无需确认类型时），我们可以将其指定为 any 类型。 TS中对于被标记为 any 类型的变量，是没有进行类型检查而直接通过编译阶段的检查(关闭了类型校验)。 在我们的系统中还是应当尽量避免使用 any 类型，以尽可能的保证系统健壮性。

letd: any=4;
d='hello';
d=true;

void

一种类型，告诉你函数和方法在调用时不返回任何内容。

functionfun(text:string,num:number=18):void{

console.log(text+"---"+num)

}

fun("xixi")

自动类型判断

TS拥有自动的类型判断机制

当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

类型别名

类型别名用来给一个类型起个新名字，使用 type 创建类型别名，类型别名常用于联合类型。

在实际应用中，有些类型名字比较长或者难以记忆，重新命名是一个较好的解决方案。

// 创建一个String别名

typexiaoming=String;

// 使用别名

lettextCon:xiaoming="xixi";

console.log(textCon);//xixi

联合类型-Union Type

联合类型表示的值可能是多种不同类型当中的某一个。 联合类型放宽了类型的取值的范围，也就是说值的范围不再限于某个单一的数据类型。同时，它也不是无限制地放宽取值的范围，如果那样的话，完全可以使用 any 代替。

// 给多个类型创建一个名字

typenewType=String|Number;

// 可以在赋值的时候赋值字符串与数字

letdemoText:newType="你好我可以创建字符串与number"

接口（Interface）

接口是定义对象类型的另外一种方式，在程序设计里面，接口起到一种限制和规范的作用

使用interface关键字定义接口一般首字母大写有的编程语言中会建议接口的名称加上 I 前缀

示例（检查对象类型）：
- interfaceIUser{
  name:String,
  showname():void
  }
示例（实现）
接口使用：使用：号接口名来进行使用注意：定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的。赋值的时候，变量的形状必须和接口的形状保持一致。
- interfaceIUser{
  name:String,
  showname():void
  }
  letuser:IUser={
  name:"xixi",
  showname(){
  console.log(`名字是${this.name}`)
  }
  }
  console.log(user.name)
  user.showname()