Type Script基础入门（一）之变量、数据类型

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

https://www.runoob.com/typescript/ts-tutorial.html

本文学习目录：

首先介绍一下ts的安装和编译。

ts使用步骤：

安装ts:npm install -g typescript
编写ts文件
转换ts文件：tsc app.ts（文件名）
最后执行js文件

如果每次都要转换是很麻烦的，其实ts可以进行自动转换

ts自动编译：

生成tsconfig.json：tsc --init
outDir属性解除注释，并设js生成路径：如”outDir:”./js”
打开终端，在路径下进行监听：tsc -w(tsc --watch)
这样每次写完ts代码，保存ts文件就会自动转换成JS文件。

TypeScript 变量声明

var [变量名] : [类型] = 值;
var [变量名] : [类型];
var [变量名] = 值;
var [变量名];

ts文件

转换成的js文件

注意: 声明变量的类型，但没有初始值，变量值会设置为 undefined 声明变量并初始值，但不设置类型，该变量可以是任意类型

Type Script 数据类型

JS的数据类型

基本类型：boolean类型、number类型、string类型、undefined、null

引用类型：Object(array类型、function类型）

ts比js多出的类型:tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型） ;ts特别的类型: void类型、never类型

数组类型：

ts声明数组时，需要声明数组的数据类型，所以一般数组中都是一个类型的数据。

数组声明方式：在元素类型后面加上[] ；使用数组泛型，Array<元素类型>

注意：如果数组声明时未设置类型，则会被默认是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。

 var array1:number[]=[1,2,3,4];
 var array2:Array<number>=[5,6,7];

任意类型：

any:任意类型类型不明确的变量使用的一种数据类型（没有指定类型的变量，默认就是any类型）

使用情况：变量值会改变时；定义存储各种类型数据的数组时

//any
//修改变量
var age:any=18;
age="18";
//存储数组
var array3:any[]=[1,"2",true];
array3[0]="1";
console.log(array3);

元组类型：

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

元组初始化的时候必须赋值元组声明的所有类型变量
元组中的数据类型必须和规定的类型顺序对应起来

元组方法：

push() 向元组添加元素，添加在最后面。
pop() 从元组中移除元素（最后一个），并返回移除的元素。
mytuple.length：返回元组大小

注意：注意元组越界的问题，当使用越界索引给数组赋值的时候，会使用联合类型。但是可以越界添加（push方法），不可以越界访问（如array[2]，会报错index为2时没有元素）

var mytuple:[number,string]=[2020,"10"];
mytuple.push(2);//push不报错
console.log(mytuple);
mytuple.pop();
console.log(mytuple.length);
//越界索引给数组赋值的时候，会使用联合类型
mytuple.push(true);//但是联合类型之外的类型是不允许的
mytuple[3]=2;//报错，不允许过界访问

联合类型：

联合类型：可将变量设置多种类型，类型间用“|”连接

赋值时可以根据设置的类型来赋值，如果赋值其它类型就会报错
可以将数组声明为联合类型（但该数组内还是统一数据类型）
可以将联合类型作为函数参数使用

//联合类型
//声明变量
var val:string|number;
val=10;
val="10"
//val=true
//声明数组
var array4:number[]|string[];
array4=[1,2]
array4=["!","2"]

其他类型：

enum枚举类型：可以为一组数值赋予友好的名字。

enum Color {
     Red = 1, 
     Green,
     Blue
}
 let c: Color = Color.Green;

void类型：表示没有任何类型，如当一个函数没有返回值时，其返回值类是void

never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值。

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

function error(message: string): never {
 throw new Error(message); 
}

posted on 2020-08-14 10:37 blue_hl 阅读(351) 评论(0) 收藏举报