TypeScript详解(安装使用、基础类型总结、类型断言用法、接口、类、函数、泛型、相同类型之间赋值、unknown、枚举等)

本文详细介绍了TypeScript中的高级类型,包括安装使用、基础类型、数组、元组、枚举、任意值、空值、未知值、类型断言、接口、类、函数类型、泛型等,以及它们在实际项目中的应用和注意事项。通过学习,读者可以深入理解TypeScript的强类型系统和静态类型检查机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

TypeScript概念

是 JavaScript 的一个超集,它可以编译成纯JavaScript,也可以在任何浏览器操作系统运行。简单来说就是JS的一个升级版本,给JS加了限制规范(接口等),也扩展了JS(类等)的能力

对比JavaScript语言(弱类型:任何对象所从属的类型再执行的时候才会确定类型、动态语言:一个变量可以赋不同数据类型的值),TS为强类型(任何对象所从属的类型都必须能在编译时刻确定)、静态语言:一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这种数据类型,不允许隐式的类型转换

安装使用

安装编译器,安装后通过tsx 文件名,可以将ts文件转译为js文件

 npm install -g typescript

 安转运行环境,安装后可以直接通过ts-node 文件名直接运行ts文件。

npm install -g ts-node

项目使用

项目引入

yarn add typescript

引入后可以通过下面命令将ts文件转译为js文件

tsc 文件名(ts文件)

 创建tsconfig配置文件

 通过下面命令会自动创建一个tsconfig.json的ts配置文件

tsc --init

配置ts报错为中文 

tsc --locale zh-CN

 注意引入模块后,有些模块的申明文件需要单独引入

yarn add @types/模块名 -D

基础类型

注意和JS不同,JS区分基础类型和复杂数据类型,TS不区分,即基础类型就是数据类型,它包括JS中的6中数据类型(undefined、null、boolean、number、string、object),不包含symbol。除此之外还包含函数、数组、元祖、枚举、任意值(any)、空值(void)、Never。我们通过在变量后面加冒号跟数据类型来定义变量的类型。编译器在编译阶段时会根据定义的类型进行检查,类型不符合将报错。

布尔值、数字、字符串、对象、函数

let isDone: boolean = false; //布尔值
let money: number = 100; //数字
let str: string = 'hello world' //字符串
let obj: object = {name:'yf'} //对象
let fun: Function = (x: number, y: number) =>{console.log(x+y)}

数组

正常形式

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

数组泛型

泛型是在编译期间不确定方法使用的类型(广泛之意思),在方法调用时,指定泛型具体指向类型。

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

元祖

元组类型允许表示一个已知元素数量和类型的数组(即允许数组中有不同的变量类型

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

注意当访问一个越界的元素,会使用联合类型替代,即我们可以给x[2]赋值string或者number类型的值。

x[2] = 'world'; //OK
x[3] = 2; //OK
x[4] = true //这里会报错,string和number的联合类型不能是boolean。

枚举(enum)

理解为定义一个变量,变量有所有的取值,通过不同的属性找到取值。枚举值默认从0开始,依次加1。也可以通过自己设定。

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName); // 显示'Green'因为上面代码里它的值是2.

注意不同枚举变量是不可以比较的

enum Color1 { red, blue }
enum Color2 { red, blue }
Color1.red === 0 // true
Color1.red === Color2.red //error 无法进行比较

 从枚举值到枚举名可以反向映射。

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

 编译成

var Enum;
(function (Enum) {
    Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"

常数枚举

 一个枚举类型可以包含零个或多个枚举成员。 枚举成员具有一个数字值,它可以是常数或是计算得出的值 当满足如下条件时,枚举成员被当作是常数:

  • 不具有初始化函数并且之前的枚举成员是常数。 在这种情况下,当前枚举成员的值为上一个枚举成员的值加1。 但第一个枚举元素是个例外。 如果它没有初始化方法,那么它的初始值为0
  • 枚举成员使用常数枚举表达式初始化。 常数枚举表达式是TypeScript表达式的子集,它可以在编译阶段求值。 当一个表达式满足下面条件之一时,它就是一个常数枚举表达式:
    • 数字字面量
    • 引用之前定义的常数枚举成员(可以是在不同的枚举类型中定义的) 如果这个成员是在同一个枚举类型中定义的,可以使用非限定名来引用。
    • 带括号的常数枚举表达式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值