[学习笔记]TypeScript学习笔记

1 前期准备工作

1.1 TypeScript的简介

1. TypeScript是JavaScript类型的超集，可以搬移成纯JavaScript
2. TypeScript可以在任何浏览器、任何计算机和操作系统上运行，由微软公司开发并开源

1.2 TypeScript与JavaScript的关系

1. TypeScript是JavaScript的超集，是以JavaScript为基础构建的语言
2. TypeScript对JS进行了扩展，向JS中引入了类型的概念，并添加了很多的新的特性
3. TS代码不能直接运行，需要通过编译器编译成JS代码，然后交由JS解析器执行
4. TS完全兼容JS，换而言之，任何JS代码都可以直接当TS使用
5. 相对于JS，TS拥有静态类型，更严格的语法，更强大的功能

1.3 TypeScript的优点

1. TS可以在代码执行前就完成代码的检查，减少了运行时异常出现的几率
2. TS可以编译成任意版本的JS代码，可以有效地解决不同JS运行环境的兼容问题
3. 同样的功能，TS的代码量要大于JS，但由与TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS要远远胜与JS、

1.4 TypeScript开发环境搭建

1. 下载Node.js（建议用稳定版）

• 64位
• 32位

2. 安装完在命令行输入node -v 查看node版本
   如果出现版本信息，证明node安装成功
3. 使用npm全局安装typescript
   在命令行输入 npm i -g typescript
   然后在命令行输入tsc，出现版本信息以及操作提示证明安装成功
4. 创建一个简单的ts文件，注意后缀名为.ts
   
5. 在命令行窗口进行编译
   进到所在的目录，输入命令tsc helloTS.ts
   完成后可以看到以及编译成功的js文件
   
   至此TypeScript的环境搭建完毕

2 基本类型

2.1 类型声明

1. 类型声明是TS中非常重要的一个特点，也是TS对JS改造的最重要的点

2. 通过类型声明可以指定TS中变量（参数、形参）的类型

3. 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合声明，符合则赋值，否则报错

4. 简而言之，类型声明给变量设置了类型，使得变量之恩呢存储某种类型的值

5. 语法

   自动类型判断

   • TS拥有自动的类型判断机制
   • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
   • 所以当变量和声明自动进行时，可以省略掉类型声明

   let 变量: 类型;
   
   let 变量: 类型 = 值;
   
   function fn(参数: 类型, 参数: 类型): 类型{
       ...
   }
   

   //声明一个变量a，同时指定它的类型为number
   let a:number;
   
   //a 的类型设置为number，在以后的使用过程中a的值只能时数字
   a=22;
   a=33;
   // a="hello"  //此行代码会报错，因为变量a的类型时number，不能赋值字符串
   
   let b: string;
   b = 'hello';
   // b = 123; //此行代码会报错，因为变量b的类型时string，不能赋值数字
   
   //声明完变量直接赋值
   let c:boolean = false;
   
   // 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
   let d = false;
   // d="abc" //此行会报错
   d = true;
   
   // JS中的函数是不考虑参数的类型和个数的
   // function sum(a, b){
        
   //     return a + b;
   // }
   
   // console.log(sum(123, 456)); // 579
   // console.log(sum(123, "456")); // "123456"
   
   //参数类型时number，返回值类型也是number
   function sum (a:number,b:number):number{
        
       return a+b;
   }
   let result = sum(123,456)
   console.log(result);
   
   

2.2 基本类型种类

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, hi	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

• number

  let decimal: number = 6;
  let hex: number = 0xf00d;
  let binary: number = 0b1010;
  let octal: number = 0o744;
  let big: bigint = 100n;
  

• boolean

  let isDone: boolean = false;
  

• string

  let color: string = "blue";
  color = 'red';
  
  let fullName: string = `Bob Bobbington`;
  let age: number = 37;
  let sentence: string = `Hello, my name is ${
         fullName}.I'll be ${
         age + 1} years old next month.`;
  

• 字面量

  也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围

  let color: 'red' | 'blue' | 'black';
  let num: 1 | 2 | 3 | 4 | 5;
  

• any

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

• unknown

  let notSure: unknown = 4;
  notSure = 'hello';
  

• void

  let unusable: void = undefined;
  

• never

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

• object（没啥用），一般是直接在{}里面指定对象的类型

  let obj: object = {
       };
  

• array

  let list: number[] = [1, 2, 3];
  let list: Array<number> = [1, 2, 3];
  

• tuple

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

• enum

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

• 类型断言

  有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

  • 第一种

    let someValue: unknown = "this is a string";
    let strLength: number = (someValue as string).length;
    

  • 第二种

    let someValue: unknown = "this is a string";
    let strLength: number = (<string>someValue).length;
    

//可以直接使用字面量进行类型声明
let a:10
a = 10

//可以使用|来连接多个类型（联合类型）
let b:"male"|"female";
b = "male";
b = "female"
// b = "hello" //出错，因为hello不属于上面这两个值



let c: boolean | string;
c = true;
c = 'hello'

// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any;

// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）
let d;
d = 10;
d = 'hello';
d = true;

// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;

let s:string;

// d的类型是any，它可以赋值给任意变量
// s = d;

e = 'hello';

//s = e //报错 因为s的的类型是字符串，而e的类型是unknown,两者的类型不等

// unknown 实际上就是一个类型安全的any
// unknown类型的变量，不能直接赋值给其他变量
if(typeof e === "string"){
    //只有类型是string是才能赋值
    s = e;