[JavaScript知识库]初识typeScript之变量类型、类型断言、类型别名

TypeScript

介绍：

TypeScript是JavaScript的超集， TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的 ———— TS中文官网

typescript环境搭建

1. 下载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

2. 安装Node.js

3. 使用npm全局安装typescript

   - 进入命令行
   - 输入：npm i -g typescript

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   - 进入命令行

   - 进入ts文件所在目录

   - 执行命令：tsc xxx.ts

typescript中的type即类型的意思，接下来我会将今天所学的知识进行总结

TypeScript中的基本类型：

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

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

• 类型声明给变量设置了类型，使得变量只能存储某种类型的值

例如：

let 变量: 类型；
let 变量 = 某值；
function fn(参数：类型，参数：类型）：类型{
	//括号内的是参数的类型，括号外面的是函数返回值的类型
}

自动类型判断

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

基本类型有如下几种：

• number

  • let a:number;//限制a只能被赋值为数值
    //支持二、八、十六进制的数字字面量形式声明变量类型
    //例如
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    

• boolean

  • //两种写法
    let isDone:boolean ;
    let isDone: boolean = false;//默认值是false
    

• string

  • let color: string = "blue";
    color = 'red';//注意这里是修改color的默认值哈，不报错，color的值还是string
    
    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;
    //这里给这两个变量赋值，就只能是上面列出来的这些
    

• 联合类型：使用 | 连接多个类型，同一个变量可以使用多个类型

  • let a:string | number;//这里的意思是a可以赋值为字符或者数字类型的值
    

• any——即任何类型都可以

  • let d: any = 4;
    d = 'hello';
    d = true;
    //该类型的变量可以赋值给任何类型的变量
    //例如
    let s:string;
    s = d;//这样是不报错的
    

• unknown（不能 赋值给别的类型的变量）

  • let notSure: unknown = 4;
    notSure = 'hello';
    //该类型的变量不可以赋值给其他类型的变量
    //例如
    let s:string;
    s = notSure ;//报错
    

• void（为空）

  • let unusable: void = undefined;
    //函数不返回、返回undefined、返回null的时候，函数返回值的类型默认是void
    

• never（啥也没有）

  •  // 抛错函数
    function error(message: string): never {
      throw new Error(message);
    }
    

• object（没啥用）

  • let obj: object = {};
    一般可以限制属性值
    let obj:{name:string,age:number};与 let obj:{name:string} & {age:number};效果相同
    定义对象结构的类型声明：
    let b:{name:string,age?:number};//问号表示可选，age可有可没有
    let c:{name:string,[propName:any]:any}; //表示必须有string的name，后面是可选（添加任意多个都可以）
    设置函数结构的类型声明：
    //语法：
    (形参:类型，形参：类型，，，，)=>返回值类型
    let d:(a:number,b:number)=>number;//表示定义一个函数，该函数的两个参数必须是number类型，且返回值是number类型
    

• array

  • //两种用法
    let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    

• tuple（固定长度的数组）

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

• enum

  • enum Gender{
      male:1,
      female:0
    }
    let i:{name:string,gender:Gender}
    i ={
    	name：“summer”，
    	gender:Gender.male
    }
    i.gender === Gender.male	//true
    

• 类型断言

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

    • 第一种

      • //使用 as 语法
        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;
        

• 类型别名：

  type myType = string;
  //例如
  let a: 1 | 2 | 3 | 4 | 5;
  let b: 1 | 2 | 3 | 4 | 5;
  //这时候 a 和 b 的类型一样，但是这样写很麻烦
  //可以这样写
  type myType = 1 | 2 | 3 | 4 | 5;
  let a:myType;
  let b:myType;