搜索
简帛阁>技术文章>TypeScript中的类型详解

TypeScript中的类型详解

2021年,TypeScript非常火热,前端的各大主流框架和工具,都在向TypeScript靠拢,TypeScript让前端开发复杂大型项目更加严谨。极大的降低了代码出现bug的几率,也大大增强了代码的可维护性和可读性,代码即文档,TypeScript的这一理念,让TypeScript在前端大放异彩。那么接下来,我来讲讲TypeScrpt中的类型。

 

首先,我们来对比一下JavaScript和TypeScript。

 

JavaScript易学易用,非常灵活,可以随心所欲写代码,不容易报错。但是复杂代码生产环境容易出现问题,维护成本比较高,也不是非常好排查问题。JavaScript主要用来实现用户和浏览器的交互,实现前端的动态效果,在前端JavaScript是独一无二且不可替代的编程语言。但是JavaScript还是有一些缺陷,如面向对象写起来非常麻烦(es6解决了这个缺点),JavaScript是动态的类型,编辑器的对于类型的提示不是特别完善。那么,TypeScript可以非常完美的解决JavaScript的这些问题。

 

TypeScript非常严谨,微软在设计TypeScript的时候,就意在解决JavaScript的缺点。TypeScript是以JavaScript为基础构建的编程语言,是JavaScript的超集,对JavaScript进行了扩展,并添加了很多类型,TS支持几乎所有es6+的新特性,开发工具的提示非常友好。但是要注意的是,TS不能直接运行,需要编译成为JS才能运行。

 

TS的开发环境只需要电脑安装好nodejs,然后使用全局命令安装ts

npm  i -g typescript

 

之后,就可以使用tsc命令,把TS文件,编译为JS文件。

tsc  fileName.ts   // 编译ts文件 生产对应的js文件

 

接下来,来看看TS中的类型。

首先,类型声明是TS非常重要的特性,可以指定变量、形参、返回值等等的类型。指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合之前声明的类型,如果符合则通过,不符合,就会报错。类型声明给变量规定了类型,变量就变得像强类型的编程语言一样,只能存储特定类型的值。

 

语法如下:

let 变量:类型;

let 变量: 类型 = 值;

 

function fn(参数1:类型,参数2:类型): 类型 {

    ...

}

 

其次,TS还有自动类型判断机制,当对变量的声明和赋值同时进行的时候,TS编译器会自动判断变量是什么类型的,如果变量声明和赋值是同时进行的,可以直接省略掉类型声明。

 

TS完整数据类型如下:

 

number: 任意数字

let num: number = 100;

 

string: 任意字符串

let str: string = 'abc'

 

boolean: 布尔值

let isOk: boolean = true;

 

 

字面量: 其本身限制变量的值就是其字面量的值

let skill: 'html' | 'css' | 'javaScript';

 

any: 任意类型

let temp: any = 10;

temp = 'itsource';

temp = true;

 

unknown 类型安全的any

let temp: unknown = 4;

temp = 'hello';

 

void:  空值( undefined )没有值( 或undefined )

let temp: void = undefined;

 

 

never没有值不能是任何值

function showError(message: string): never {

  throw new Error(message)

}

 

 

object: 任意的JavaScript对象

let obj: object = {}

 

array: 任意js数组

let arr: number[] = [1, 2, 3];

 

 

 

tuple: 元组, TS新增类型,固定长度数组。

let arr: [number, string]

arr = [666, 'abc']

 

 

enum: 枚举,TS新增类型。

enum Hob {

  Html,

  Css,

  JavaScript,

}

let hobby: Hob = Hob.JavaScript;

 

 

以上,就是TypeScript中完整的数据类型,掌握TypeScript完整数据类型,更有利于用好TypeScript开发大型复杂应用。

2021年,TypeScript非常火热,前端的各大主流框架和工具,都在向TypeScript靠拢,TypeScript让前端开发复杂大型项目更加严谨。极大的降低了代码出现bug的几率,也大大增强了代
概述在TypeScript中使用联合类型时,往往会碰到这种尴尬的情况:interfaceBird{//独有方法fly();//共有方法layEggs();}interfaceFish{//独有方法s
录1数字枚举2字符串枚举3反向映射4异构枚举5常量枚举6枚举成员类型和联合枚举类型(1)枚举成员类型(2)联合枚举类型7枚举合并前言:TypeScript在ES原有类型基础上加入枚举类型,使得在Ty
*1变量类型声明和初始化*/leta:number;//a的类型设置为了number,在以后的使用过程中a的值只能是数字a10;a33;//a'hello';//此行代码会报错,因为变量a的类型是n
本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候,多看看lo
目录布尔类型数字类型字符串类型字符串和数字进行拼接undefined和null数组类型元组类型枚举类型any类型void类型联合类型总结布尔类型//布尔类型>boolean//let变量名:数据
前言方法重载(overload)在传统的静态类型语言中是很常见的。JavaScript作为动态语言,是没有重载这一说的。一是它的参数没有类型的区分,二是对参数个数也没有检查。虽然语言层面无法自动进行重
交叉类型(IntersectionTypes)交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。例如,PersonSerializa
⒈交叉类型(IntersectionTypes)交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。例如,PersonSerializ
TypeScript类型JavaScript语言的数据类型包括以下7种:1boolean(布尔),true||false2null,表明null值得特殊关键字,JavaScript是大小写敏感的