TypeScript介绍，及基本数据类型用法

什么是TypeScript

        TypeScript是Javascript的一个超集，支持ES6标准

        Typescript由微软开发的自由和开源的编程语言，

        Typescript设计的目标是开发大型应用，他可以编译成纯javascript，编译出来的javascript可以运行在任何浏览器上

        Typescript是一种由微软开发的自由和开源的编程语言，他是JavaScript的一个超集，而且本质上像这个语言添加了可选的静态类型和基于类的面向对象编程

JavaScript与TypeScript的区别

        Typescript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改。

        TypeScript通过类型注释提供编译时的静态类型检查

        TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译

 

Ts的优势

        更早的发现错误

        任何位置都有代码提示，增加开发效率

        类型系统提升了代码的可维护性，重构更容易

        使用最新的ES语法

        TS类型推断机制，降低成本

开发环境搭建

1. 安装VSCode

2. 安装node.js：使用命令node -v来检查nodejs版本

3. 安装TypeScript编译器：npm i typescript -g

4. tsc --init 生成配置文件

5. 使用tsc命令来转换TS 程JS：例如 tsc hello.ts

6. 自动编译 tsc --watch，简写：tsc -w

练习

js语法

function test(msg) {
  console.log(msg.length);
}
test("123"); //输出3
test(123); //undefined

数字类型没有length 所以输出undefined

没有传值 undefined 没有length属性

缺陷：只有在运行之后才会显示报错

ts语法

function test(msg) {
  console.log(msg.length);
}
test("123"); //3
test(123); //undefined
test(); //报错

当解析过一遍之后 ts中的函数名或变量名会报错

 

只需要在ts顶部加模块化即可

 

ts中变量或函数名与js中重复名报错 再ts中添加一行export default{} //模块化

基础数据类型

        字符串和布尔值是开发中最常用的基本数据类型，与js中的数值，字符串和布尔完全一致，在ts中主要做类型校验使用

export default {};
​
// 数字类型     只能赋值数字
let num: number;
num = 12;
// num = "adjsal"; //直接报错
​
// 布尔类型     只能赋值布尔值
let flag: boolean;
flag = true;
flag = false;
// flag = 1;    //报错
​
// 字符串类型     只能赋值字符串 (单引 双引 反引)
let str: string;
str = "adjsal";
str = "adjsal";
str = `adjsal`;
//str = 123;      //直接报错
//str = true;     //直接报错

数组

        声明变量的一组集合称之为数组

        数组分为四种数组类型，字符串类型数组、数字类型数组、联合型数组和any任意类型数组

// 创建字符串数组 只能存储字符串类型的数据  常用
let strArr: string[];
strArr = ["张三", "李四", "王五"];
// strArr = [1,2,3];   //直接报错 不能将number类型数据分配给string
console.log(strArr); //[ '张三', '李四', '王五' ]
​
//另一种创建数组方法 数组泛型 语法：Array<number>   number指的是数组类型
// 创建数字数组 只能存储数字型数据  常用
let numArr: Array<number>;
numArr = [1.1, 2.3, 3, 4];
// numArr = ["张三", "李四", "王五"]; //报错 不能将string类型数据分配给number
console.log(numArr); //[ 1.1, 2.3, 3.4 ]
​
// 创建联合数组 如还想再添加布尔类型 在括号中再添加boolean即可
let andArr: (number | string)[];
andArr = ["张三", "李四", 1, 3];
console.log(andArr); //[ '张三', '李四', 1, 3 ]
​
// 创建any任意数组  不推荐使用
let anyArr: any[];
anyArr = ["张三", "李四", 1, 3, true, false];
console.log(anyArr); //[ '张三', '李四', 1, 3, true, false ]

元组

        元组类型Tuple

        TS中的元组类型其实就是数组类型的扩展

        元组类型用来表示已知元素数量和类型的数组，个元素的类型不必相同，对应位置的类型需要相同

        元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

// 在创建时将数据类型的顺序写进去 存值时按照创建的顺序存放数据
let arr: [string, number, boolean];
arr = ["张三", 20, false];
//必须按照声明式[string, number, boolean]的顺序来写数据
// 否则就会报错
// arr = ["张三", false, 20];
console.log(arr);   //[ '张三', 20, false ]

any和void

any类型：

        表示任意类型，当不清楚某个值的具体类型时可以使用any类型，任何值都可以赋值给any类型

export default {};
// 创建一个any数据类型
let anyData: any;
​
// 使用场景一：接受用户输入
// 赋值字符串类型
anyData = "字符串";
console.log(anyData); //字符串
// 赋值布尔类型
anyData = true;
console.log(anyData); //true
// 赋值数字类型
anyData = 123;
console.log(anyData); //123
​
// 使用场景二 不会检查该变量调用的某个方法是否存在
// anyData.getadwawd(); //书写时 不会出现报错 js执行后才会报错
anyData.toFixed(); //正常
​
// 使用场景三   可以让数组存放任意数据
let anyArr: any[];
anyArr = ["字符串", 123, false];
console.log(anyArr); //[ '字符串', 123, false ]

void类型：

        写在函数后 函数将不可以设置返回值

        null在非严格模式下不报错 （默认严格模式）

        终端使用命令 tsc --init设置配置文件，将配置文件中的"strict": true 注释掉就可以

        在TS中只有null和undefined才可以赋值给void类型

// void类型
// 函数不可有返回值
function fun(): void {
  console.log(1);
  //   return 1;  //报错 不能将类型非陪给void
}
fun();
//变量
let msg: void;
// msg = "张三"    //报错
// msg = 100; //报错
// msg = false;    //报错
msg = null; //正常    严格模式下会报错 
msg = undefined; //正常

null和undefined

        在TS里，undefined和null两者都有自己的类型分别叫做undefined和null，与void相似，本身用处并不是很大

        在非严格模式下，可以把null和undefined赋值给number类型的变量

export default {};
let x: undefined = undefined;
let y: null = null;
console.log(x, y); //undefined null
//只有在非严格模式下才可以将null和undefined赋值给number类型
let num: number;
num = null;
console.log(num); //null
num = undefined;
console.log(num); //undefined

never与object

never类型：

        表示那些用不存在的值的类型

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

        变量也可能是never类型，当他们被永不为真的类型保护所约束

        never类型时任何类型的子类型，可以复制给任何类型：没有任何类型是never的子类型或可以复制给never类型（初本身外），即使any也不可以赋值给never

export default {};
function error(msg: string): never {
  // 返回never函数无法达到的终点
  throw new Error(msg);
}
console.log(error("错误"));
​
function fail() {
  return error("错误错误");
}
console.log(fail());
​
// 返回never的函数必须存在无法达到的终点
function infilite(): never {
  while (true) {}
}

Object类型：

object表示非原始类型，也就是除number、string、boolean、symbol、null或undefined之外的类型

后边更常用的是接口与类型别名

export default {};
// object类型   只能赋值对象
let obj: object;
// obj = 1 //报错
// obj = '123'//报错
// obj=false;//报错
obj = {
  name: "张三",
  age: 20,
};
console.log(obj); //{ name: '张三', age: 20 }

枚举

• 能够使代码可读性更高
• 可以赋值数字
• enum类型是对js标准数据类型的一个补充，向c#等其它语言一样，使用枚举类型可以为一组数值复制一个友好的名字
• 枚举表示固定的几个数值

数字型枚举

export default {};
// 数字枚举 创建一个性别枚举 枚举值从0开始
enum Sex {
  // man,
  man = 5,
  //woman,
  woman = num1(),
}
// 定义一个变量存放性别
// 当正式开发的时候一般不会直接存储性别汉字
// 而是存储数字分别代表什么
// 如下使用枚举 man为0 则代表男 woman为1 则代表女
let sex: Sex;
sex = Sex.man;
console.log(sex); //0
sex = Sex.woman;
console.log(sex); //1
​
// 也可手动给枚举赋值 如给枚举中第一条数据赋值 后续数据值则递增
// 如给枚举中间某一条数据赋值 不会影响到前面的数据值 后续的数据值也会接着递增
// 也可赋任意值 前面值不干扰后续值会递增
sex = Sex.man;
console.log(sex); //5
sex = Sex.woman;
console.log(sex); //6
​
// 也可以给sex变量手动赋值 因为枚举底层本质就是数值类型,所以赋数字不会报错 只能赋值数字
sex = 20;
console.log(sex); //20
​
// 通过枚举可以获取到它所对应的枚举值
console.log(Sex.man); //5
console.log(Sex.woman); //6
// 通过枚举值可获取到没居中的字面量
console.log(Sex[5]); //man
console.log(Sex[6]); //woman
​
// 函数返回值动态赋值
function num1() {
  return 10;
}
console.log(Sex.woman); //10

字符串型枚举

• 如果采用字面量对枚举中的第一个成员进行赋值，则下面的成员也必须赋值
• 采用[index]的形式不能获取到内容，需要传入[key]
• 字符串枚举不能使用常量或者计算结果给枚举赋值
• 它可以使用内部的其他枚举值来赋值
• 字符串枚举不可手动赋值

export default {};
function res() {
  return "赵六";
}
let n = "赵六";
// 字符串枚举
enum str {
  name = "张三",
  // name = n,  //报错  字符串枚举不可使用计算值
  // name = res(), //报错  字符串枚举不可使用计算值
  hobby = "打游戏",
}
console.log(str.name); //张三
// str.name = "王五"  //只读属性不可更改
console.log(str.hobby); //打游戏
console.log(str["张三"]); //undefined 不可通过枚举值来获取枚举键
console.log(str["name"]); //张三

异构枚举 合并

export default {};
// 异构枚举 合并
enum hb {
  name = "张三",
  age = 20,
}
console.log(hb.name); //张三
console.log(hb.age); //20
console.log(hb["张三"]); //undefined
console.log(hb[20]); //age
// hb.age = 19 //无法分配到age 只读属性
// hb.name = "赵六"; //无法分配到name 只读属性

bigint与symbol

bigint：表示非常大的数；

symbol：表示全局唯一引用

ES2020可用

export default {};
​
// 定义bigint变量
let num1: bigint = BigInt(100);
let num2: bigint = 100n;
console.log(num1, num2); //100n 100n
​
// 定义symbol变量
let sy1 = Symbol("name");
let sy2 = Symbol("name");
console.log(sy1, sy2); //Symbol(name) Symbol(name)
// 判断两个变量是否全等
console.log(sy1 === sy2); //false  不全等  地址指向不同

变量的声明与解构

变量的声明

• var：可重复声明、不受限于块级作用域、不存在暂时性死区
• let：不可重复声明、受限于块级作用域（每一对花括号就是一个块级作用域）、存在暂时性死区
• const：不可重复声明、声明必须赋值、赋值后不可更改

解构

export default {};
// 数组解构;
let arr1 = ["张三", "李四"];
let [name1, name2] = arr1;
console.log(name1, name2); //张三 李四
​
let arr2 = ["漳卅", "李四", "王五", "赵六", "张三"];
let [n1, ...nx] = arr2;
console.log(n1, nx); //漳卅 [ '李四', '王五', '赵六', '张三' ]
​
let arr3 = ["漳卅", "李四", "王五", "赵六", "张三"];
let [, n2, , n4] = arr3;
console.log(n2, n4); //李四 赵六
​
// 对象解构
let obj1 = {
  name: "张三",
  age: 20,
  sex: "男",
};
let { name, age, sex } = obj1;
console.log(name, age, sex); //张三 20 男