首页 > 其他分享> 文章详细

TypeScript学习笔记——TypeScrip的环境准备、简介、数据类型

2021-12-26 12:01:46 阅读：222 来源： 互联网

标签：Blue TypeScript Color 数据类型 let TypeScrip 类型 Green Red

TypeScript

1、学习准备

运行环境：

Node：https://nodejs.org/zh-cn/，下载安装

检验安装成功：
```
//cmd命令行输入:
node -v
//返回对应版本号则表示安装成功
```
报错处理：（检查环境变量）
- 在保证已经安装好的情况下，在控制面板——高级设置——环境变量——path当中检查
  
  如果没有配置则新建——将对应的安装路径的bin目录地址复制添加环境变量
TypeScript安装：

在cmd当中(以管理员身份打开）：

安装
```
npm install -g typescript
```
检验是否安装成功：输入 tsc,得到：即表示安装成功
使用
1. 在文件夹中，新建后缀名为.ts的文件，里面写ts的代码
2. 在命令行工具中，进入文件夹地址，输入命令 tsc + 文件名

2、Ts简介

typeScrip是JavaScript的一个超集，支持Es6的标准。

由微软开发的，开源的编程语言，弥补了js的一些本身的缺陷和不足。

ts的设计目标是开发大型应用，可以编译成为纯Js,并且运行在任何的浏览器当中

语言特性：

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举，元组
Minxin
泛型编程
名字空间
Await

3、TS的数据类型

Es6的七种数据类型

number——数字类型
String——字符串类型
Array——数组类型
Object——对象类型
null
undefined
Symbol

Ts的数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传在这里插入图片描述

Ts的变量声明：

//对类型有严格约束，当前或后期赋值都必须保证两侧的数据类型一致
let [变量]:[类型声明] = 值
//eg:
let b:number ;    // 默认undefined

数字类型：

let b:number ;

字符串类型：

let a:string = "hello world"

布尔类型：

let flag:boolean = true

元组类型（new*)

元组类型表示一个已知****元素数量和类型的数组，各元素的类型不必相同

let c:[object,string,number,boolean]  
//元组类型，赋值时左右的顺序，和数量都必须完全保持一致

枚举类型enmu

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予变量名称。

enum Color {Red = 1,Green,Blue} 
//结果{ '0': 'Red', '1': 'Green', '2': 'Blue', Red: 1, Green: 2, Blue: 3 }
//相当于（实际上是一种映射的关系，可以按名找他的值，也可以按照他的值来找他的名，）
var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));

注意点：

enum类型依次会从0给元素赋予编号（其他看时时示例理解）

enum Color {Red = 1,Green,Blue} 
//结果{ '0': 'Red', '1': 'Green', '2': 'Blue', Red: 1, Green: 2, Blue: 3 }

enum Color {Red ,Green = 3,Blue}
//结果{ '0': 'Red', '3': 'Green', '4': 'Blue', Red: 1, Green: 3, Blue: 4 }

enum Color{red,blue='kk',green} //报错，枚举成员必须具有初始化表达式
enum Color{red,blue='kk',green=124} //正确
//结果{ '0': 'red', '124': 'Blue', red: 0, blue: 'kk', green: 124 }

enum类型的值里面不能设置为一个对象，或者利用变量间接的引用对象值

enum Color1{red,blue='kk',green={name:'zxc'}}
//报错，含字符串值成员的枚举中不允许使用计算值
//对象类型的数据——》字符串——》Object Object]

任意类型any

不会被类型检查器报错，可以设置自己想要的类型值（null,undefined,number…)

let n:any = 4 
//可以赋值
n = 'jerry'

常见应用：

用在不知道传入什么类型的值（比如来自一些动态内容的）
函数参数的返回值（经常是不可预判的，可以用any类型）
```
function fn(a:String):any{
	return 'abc...'
}
```

无类型void

void更像是一种中间类型，定义后就只能传入null或者undefined
null/undefined类型（默认情况下他们是任意类型的子类型）

let cc:void = undefined
// 只能给他赋值null/undefined类型（默认情况下他们是任意类型的子类型）
let e:number = null

never类型

never——表示永久不存在的值的类型

// never类型是任意类型的子类型（包括any...),never没有子类型，没有可以赋值给never类型的
//应用1:抛出错误的返回值
function ERROR(err:string):never {   
  throw new Error(err);
}
function fail():void {   
  throw ERROR("出现错误");
}

//应用2:无线死循环
function loop():never {   
  while (true){
    console.log("next");
  }
}

类型断言

尖括号语法(没有运行时的影响，只在编译时有影响)
```
let value:any = "string"
let len:number = (<string>value).length
```

as语法

let value1:any = "string"
let len1:number = (value1 as string).length

数组类型对象类型，作为一个变量进行申明

let y:Array<String>; //声明类型是Array,内部元素都是String

let z:Object;
z = {name:'123'}

标签：Blue,TypeScript,Color,数据类型,let,TypeScrip,类型,Green,Red
来源： https://blog.csdn.net/weixin_46057095/article/details/122153316

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9