TypeScript（一）

非早起选手

已于 2022-02-24 00:25:15 修改

阅读量238

点赞数

分类专栏： TypeScript 文章标签：前端 typescript

于 2022-01-19 21:45:19 首次发布

本文链接：https://blog.csdn.net/zg0601/article/details/122590524

版权

TypeScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

一、Typescript产生意义

二、JavaScript和Typescript的区别

前言

Typescript是由微软开发的编程语言，它并不是一种新的语言，而是JavaScript的一个超集，扩展了JavaScript的语法，可以说，JavaScript有的Typescript都有且做得更好；而JavaScript没有的一些东西Typescript也有。本文将带大家了解Typescript。

一、Typescript产生意义

我们在初学JavaScript知道，JavaScript是一门弱类型、动态类型检查的语言，这两种特性在给开发者带来灵活与便捷的同时，也存在一些缺陷。比如：

如果JavaScript在函数调用时传入其它类型的数据作为参数，那么程序在书写、编译时不会报错，要在运行时才能发现错误，而这种错误往往会引起整个程序的崩溃。

而Typescript是JavaScript的强类型版本，它是一门强类型语言。强类型语言的优势在于静态类型检查，它会在编译阶段就报出类型错误，从而避免运行时才发现错误。

Typescript虽然是强类型语言，但是如果对象被声明了 any 类型，就会忽略掉所有的类型检查。这种灵活的结构保证了它可以在保证整体有强类型检查优势的同时，在一些细节问题上保持弱类型检查的灵活。

二、JavaScript和Typescript的区别

前言中提到，Typescript是JavaScript的超集，扩展了JavaScript的语法。上文讲解Typescript产生意义时我们也说到JavaScript是弱类型、动态类型检查语言，而Typescript是强类型、静态类型检查语言。我们可以从下图理解一下JavaScript和Typescript的区别。

三、Typescript基础数据类型

JavaScript中有的类型

Boolean：逻辑型（true / false）

const flag:boolean = true;

Number：数值型，双精度64位浮点数，可以用来表示整数和分数

let age:number = 20;

String：字符串类型，使用单引号( ' )或双引号( " )表示字符串类型，反引号( ` )定义多行文本和内嵌表达式。

let name:string = "张三";
let gender:string = '男';
let words:string = `下一位是性别${gender}的${name}同学`;

Array：数组类型，声明变量为数组，需要声明数组数据类型

//在元素类型后面加上[]
let arr1:number[] = [1,2,3];
let arr2:(number:string)[] = [1,'str',2];

//使用数组泛型
let arr3:Array<number> = [1,2,3];

null：表示对象值缺失
undefined：用于初始化变量为一个未定义的值

在JavaScript中null表示“什么都没有”，undefined是一个没有设置值的变量。

用typeof检测null返回的是object，检测一个没有值的变量返回的是undefined。

JavaScript中null和undefined的区别是：值相等但类型不等。

Typescript在非严格空检查模式下，null 和 undefined 是所有类型（包括void）的子类型，可以作为任何类型变量的值，即可以赋值给其他类型；
而在严格空检查模式（strictNullChecks）下，其是独立的类型，此时，null和undefined只能被赋值给void或本身对应的类型。

下面给出一段代码理解。

// 非严格空检查模式下：
let x:number;
x = 1;    //运行正确
x = undefined;    //运行正确
x = null;    //运行正确

// 严格空检查模式下：
let x:number;
x = 1;    //运行正确
x = undefined;    //运行错误
x = null;    //运行错误

JavaScript中没有的类型

void：用于标识方法返回值的类型，表示该方法没有返回值

function hello():void{    //表示函数没有返回值
    alert("Hello World!");
}

never：是其他类型（包括null和undefined）的子类型，代表从不会出现的值

never类型的变量只能被never类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：

let x:never;
let y:number;

x = 123;    //运行错误，数值类型不能转为never类型

//运行正确，never类型可以赋值给never类型
x = (()=>{throw new Error('exception')})();

//运行正确，never类型可以赋给数值类型
y = (()=>{throw new Error('exception')})();    

//返回值为never的函数可以是抛出异常的情况
function error(message:string):never{
    throw new Error(message);
}

//返回值为never的函数可以是无法被执行到终止点的情况
function loop():never{
    while(true) {}
}

any：任意类型，声明为any的变量可以赋予任意类型的值，常用于以下三种情况：

//1、变量的值会动态改变时，任意值类型可以让这些变量跳过编译阶段的类型检查
let x:any = 1;    //数值类型
x = 'Hello World!';    //字符串类型
x = false;    //布尔类型

//2、改变现有代码时，任意值允许在编译时可选择地包含或移除类型检查
let x:any = 4;
x.ifItExists();    //运行正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();

//3、定义存储各种类型数据的数组时
let arr:any[] = [1,false,'str'];
arr[1] = 100;

enum：枚举类型，用于定义数值集合

枚举类型可以提高代码的可维护性，统一维护某些枚举值。

enum StatusCodes {
    OK = 200,
    BadRequest = 400,
    Unauthorized,
    PaymentRequired = 200,
    Forbidden,
    NotFound
  }
  console.log(StatusCodes.OK);  //200
  console.log(StatusCodes.BadRequest);  //400
  console.log(StatusCodes.Unauthorized);    //401
  console.log(StatusCodes.PaymentRequired); //200
  console.log(StatusCodes.Forbidden);   //201
  console.log(StatusCodes.NotFound);    //202
  console.log(StatusCodes[200]);    //PaymentRequired  取最后一个key