【前端】你好，我叫TypeScript01──数据类型

前言

TypeScript是强类型语言，所以相比于JavaScript而言有着更强的语言规范约束能力，能够让我们的代码可读性更高。同时可以在编译过程中进行错误校验，提升了我们代码的开发效率。

公司主营业务：网站制作、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出咸宁免费做网站回馈大家。

1.什么是Typescript?

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

TypeScript和JavaScript的关系如下：

TypeScript和JavaScript的区别：

2.两分钟上手TS开发

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

安装TypeScript

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

  • 通过NPM进行安装
  • 安装VScode的TypeScript插件

(1)NPM安装:

 
 
 
 
    
  
  
  
  
  1. npm install -g typescript
    2.

(2)验证TS安装

 
 
 
 
    
  
  
  
  
  1. tsc -v
    2. 
  
  
  
  
  2. # Version 4.2.4
    3.

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

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

(4)编译代码：

 
 
 
 
    
  
  
  
  
  1. tsc test.ts
    2.

编译得到JS代码：

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

3.基础类型

3.1 Boolean类型

只有两个值：true和false。

 
 
 
 
    
  
  
  
  
  1. let isTrue: boolean = true;
    2.

3.2 Number类型

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

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

3.3 String类型

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

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

3.4 Array类型

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

  • 可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。
  • 使用数组泛型，Array<元素类型>。
 
 
 
 
    
  
  
  
  
  1. let list: number[] = [1, 2, 3];
    2. 
  
  
  
  
  2. let list: Array = [1, 2, 3];
    3.

3.5 Tuple类型

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

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

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

3.6 Enum类型

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

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

3.7 Any类型

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

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

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

3.8 Void类型

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

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

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

3.9 Null 和 Undefined

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

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

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

3.10 Object

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

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

3.11 Never

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

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

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

3.12 Unknown 类型

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

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

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

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

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

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

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

例如，通过if语句分支

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

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

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

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

参考文章

阿宝哥的《重学TS》

《ts中文文档》

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

文章名称：【前端】你好，我叫TypeScript01──数据类型
网站路径：http://www.shufengxianlan.com/qtweb/news40/272240.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信小程序知识

同城分类信息

网站建设费用　　 　成都微信公众号开发　　 　网络营销推广　　 　温江网站设计　　 　服务器托管　　 　高端网站定制　　 　成都全屋定制　　 　崇州做网站　　 　LED显示屏　　 　无边发光字　　 　成都塑料加工　　 　保温橡塑管　　 　成都网站推广公司　　 　专业网站设计　　 　四川电信机房托管　　 　东电技改　　 　边坡柔性防护网　　 　营销网站定位　　 　酒柜书柜鞋柜定制　　 　微信服务号订阅号开发