文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【前端】你好,我叫TypeScript 01──数据类型

2024-12-03 04:42

关注

1.什么是Typescript?

TypeScript并不是一门新的编程语言,它是Javscript的超集,即在JavaScript语言的基础上添加了语言约束:可选的静态类型和基于类的面向对象编程。其实就是添加了静态类型检查,有了约束可以让我们在开发过程中减少错误代码的书写。

TypeScript和JavaScript的关系如下:

TypeScript和JavaScript的区别:

2.两分钟上手TS开发

“工欲行其事,必先利其器”,说的就是在做事情之前,要做好所有的准备。同样的,我们要学习TS开发,必须先安装语言环境和编辑器工具。

安装TypeScript

有两种方式可以获取TypeSscript工具:

(1)NPM安装:

  1. npm install -g typescript 

(2)验证TS安装

  1. tsc -v 
  2. # Version 4.2.4 

(3)构建TS文件 在编辑器中构建一个TS文件test.ts:

  1. function addNum(num1:num,num2:num){ 
  2.   return num1 + num2; 
  3. console.log(addNum(1,2)); 
  4. //3 

(4)编译代码:

  1. tsc test.ts 

编译得到JS代码:

  1. "use strict"
  2. function addNum(num1, num2) { 
  3.     return num1 + num2; 
  4. console.log(addNum(1, 2)); 

3.基础类型

3.1 Boolean类型

只有两个值:true和false。

  1. let isTrue: boolean = true

3.2 Number类型

所有的数字都是浮点型,支持二进制、八进制、十进制以及十六进制字面量。

  1. // 数字类型,所有数字都是浮点型 
  2. let decLiteral: number = 10; 
  3. let hexLiteral: number = 0xf00d; 

3.3 String类型

TS可以使用双引号( ")或单引号(')表示字符串。

  1. // 字符串,表示文本数据类型 
  2. let username: string = "yichuan"
  3. let like: string = `${yichuan} + FE`; 

4 Array类型

数组操作有两种方式可以声明:

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

3.5 Tuple类型

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。

  1. // 元组  
  2. let tuple: [string,number]; 
  3. tuple = ["wenbo",1]; 

TS元组和数组其实大致一样,唯一的区别就是数组中的元素类型必须相同,而元组可以存储不同类型的元素。甚至可以说元组是any类型的数组。

3.6 Enum类型

enum类型是对JavaScript标准数据类型的一个补充。枚举类型提供的一个便利是你可以由枚举的值得到它的名字。

  1. // 枚举  
  2. // 默认情况下,枚举的元素编号是从0开始,也可以进行手动编号。 
  3. enum Color {Red, Green, Blue}; 
  4. let c:Color = Color.Red; 

3.7 Any类型

any表示任意类型。有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。

  1. // Any  
  2. let notSure:any = 100.002; 
  3. notSure.toFixed(); 
  4. let list3:any[] = ["zhaoshun","male",12]; 

其实,any类型是类型系统的顶级类型,因为任何类型都归结于any类型,是不是很自由。自由过了火,一个不恰当的比喻,JS是any类型的TS,允许对any类型的值进行各种操作,而无需编译校验。

3.8 Void类型

void类型它表示没有任何类型。当一个函数没有返回值时,你通常会见到其返回值类型是 void。

声明一个void类型的变量没有什么大用,因为你只能为它赋予null和undefined。

  1. function showName():void { 
  2.   console.log("your name is wenbo"); 
  3.  
  4. // 声明一个void类型的变量 
  5. let unusable: void = undefined; 

3.9 Null 和 Undefined

TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。默认情况下null和undefined是所有类型的子类型,可以把 null和undefined赋值给number类型的变量。

  1. let u: undefined = undefined; 
  2. let n: null = null

但是,当指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自。

3.10 Object

object表示非原始数据类型(除number,string,boolean,symbol,null或undefined之外的类型)。

  1. declare function create(o: object | null): void; 
  2.  
  3. create({ prop: 0 }); // OK 
  4. create(null); // OK 
  5.  
  6. create(42); // Error 
  7. create("string"); // Error 
  8. create(false); // Error 
  9. create(undefined); // Error 

3.11 Never

never类型表示的是那些永不存在的值的类型。

never类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。即使 any也不可以赋值给never。

  1. // 返回never的函数必须存在无法达到的终点 
  2. function error(message: string): never { 
  3.     throw new Error(message); 
  4.  
  5. // 推断的返回值类型为never 
  6. function fail() { 
  7.     return error("Something failed"); 
  8.  
  9. // 返回never的函数必须存在无法达到的终点 
  10. function infiniteLoop(): never { 
  11.     while (true) { 
  12.     } 

3.12 Unknown 类型

任何类型都可以被归为unknow类型,因此unknow也是ts类型中的顶级类型。

  1. let value: unknown; 
  2.   
  3. value = true;             // OK 
  4. value = 18;               // OK 
  5. value = "yichuan";    // OK 
  6. value = [];               // OK 
  7. value = {};               // OK 
  8. value = Math.random;      // OK 
  9. value = null;             // OK 
  10. value = undefined;        // OK 
  11. value = new TypeError();  // OK 
  12. value = Symbol("type");   // OK 

我们看到对于value变量而言,所有的赋值都是正确的,就会感觉是不是发现和any好像没啥区别,真的是这样吗。当我们给赋值其他类型时,就会出现意想不到的问题,发现unknow类型只能被赋值给any类型和unknow类型本身,这就是跟any的区别。

  1. let value: unknown; 
  2.   
  3. let value1: unknown = value;   // OK 
  4. let value2: any = value;       // OK 
  5. let value3: boolean = value;   // Error 
  6. let value4: number = value;    // Error 
  7. let value5: string = value;    // Error 
  8. let value6: object = value;    // Error 
  9. let value7: any[] = value;     // Error 
  10. let value8: Function = value;  // Error 

所以得到:只有能够保存任意类型值的容器才能保存 unknown类型的值。

值得注意的是,TS不允许我们对unknow类型的值执行任何操作,必须得先执行类型校验后来确定使用值的范围。那么如何缩小unknow值的范围呢?

很简单,有请我们的老朋友typeof、instanceof运算符和自定义类型保护函数,通过使用缩小类型范围的技术都有助于 TypeScript 的基于控制流的类型分析。

例如,通过if语句分支

  1. function stringifyForLogging(value: unknown): string { 
  2.   if (typeof value === "function") { 
  3.     const functionName = value.name || "(anonymous)"
  4.     return `[function ${functionName}]`; 
  5.   } 
  6.   
  7.   if (value instanceof Date) { 
  8.     return value.toISOString(); 
  9.   } 
  10.   return String(value); 

通过使用自定义类型保护函数缩小 unknown 类型范围。

  1. function isNumberArray(value: unknown): value is number[] { 
  2.   return ( 
  3.     Array.isArray(value) && 
  4.     value.every(element => typeof element === "number"
  5.   ); 
  6.   
  7. const unknownValue: unknown = [15, 23, 8, 4, 42, 16]; 
  8.   
  9. if (isNumberArray(unknownValue)) { 
  10.   const max = Math.max(...unknownValue); 
  11.   console.log(max); 

尽管 unknownValue 已经被归为 unknown 类型,请注意它如何依然在 if分支下获取到 number[] 类型。

参考文章

阿宝哥的《重学TS》

《ts中文文档》

本文转载自微信公众号「前端万有引力」,可以通过以下二维码关注。转载本文请联系前端万有引力公众号。

 

来源:前端万有引力内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯