TypeScript核心类型概览与应用-1

小饭团~

已于 2024-06-04 07:33:32 修改

阅读量1.1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： typescript ubuntu javascript

于 2024-06-04 07:26:07 首次发布

本文链接：https://blog.youkuaiyun.com/q1372302825/article/details/139428651

文章目录

TypeScript入门

TypeScript入门

1.TypeScript介绍

TypeScript 是一种由微软开发的开源编程语言，它是JavaScript的一个超集，也就是说任何有效的JavaScript代码也是有效的TypeScript代码。TypeScript在JavaScript的基础上添加了静态类型定义、类、接口、命名空间等特性，旨在解决JavaScript在大型应用开发中遇到的可维护性、可扩展性和编译时错误检查等问题。

TypeScript简介

静态类型检查：TypeScript 引入了静态类型系统，允许开发者在编码阶段就发现类型错误，而不是等到运行时。这有助于提高代码质量和开发效率，减少因类型不匹配导致的错误。
类和接口：提供了面向对象编程的特性，如类（class）、继承、接口（interface）等，使得代码结构更清晰，易于复用和维护。
强大的IDE支持：由于类型信息的存在，IDE和编辑器（如Visual Studio Code）能够提供智能感知、自动完成、接口提示等高级功能，极大提升开发体验。
兼容JavaScript：TypeScript被编译成纯JavaScript代码，因此可以无缝集成到现有的JavaScript项目中，同时也能利用现有的JavaScript库和框架。
模块化：支持ES6模块化，有助于组织大型代码库，提高代码的可维护性和可重用性。

相比JavaScript的优势

类型安全：静态类型检查可以提前捕捉到很多潜在错误，避免了在运行时因为变量类型问题引发的异常，提高了程序的健壮性。
更好的开发工具支持：由于类型信息的存在，编辑器和IDE能提供更加精准的代码补全、接口文档提示、重构支持等，提升了开发效率。
易于维护和协作：随着项目规模的扩大，清晰的类型定义和面向对象的特性让代码更加结构化，便于团队成员理解和维护。
长期可维护性：类型注解作为代码的一部分，形成了“代码的文档”，有助于新加入项目的开发者更快地理解代码结构和意图。
准备未来：TypeScript支持并鼓励使用ES6及以后的新特性，即使当前环境不支持这些特性，TypeScript也能将其编译为向后兼容的JavaScript代码，帮助开发者过渡到未来的JavaScript标准。

2.编译并运行TS代码

创建hello.ts文件

const info : string = 'hello ts';

console.log(info)

将TS文件编译为JS文件，在终端中输入命令 tsc .\hello.ts （此时该目录下会生成一个同名的JS文件）
执行JS代码，在终端中输入命令 node hello.js （即可执行刚刚的js文件）

需要注意的是，TS编译生成的JS文件中，代码中就没有类型的信息了。

2.1.简化运行ts步骤

简化方式通过ts-node包，可以直接在node中运行ts代码，不用每次再使用ts进行编译在使用node进行运行

npm i -g ts-node

# 使用 就可以实现编译运行两步操作
# 注意 ts-node 并没有生成js文件，他在内部偷偷帮你转换，并且运行
ts-node hello.ts

3.TS中的常用类型

在TypeScript（TS）中，类型系统是其核心特性之一，为JavaScript增添了静态类型检查的能力，从而提高代码的可维护性和安全性。

也可以将TS中测常用基础类型细分为两类：

JS已有类型

原始类型：number/string/boolean/null/undefined/symbol

对象类型：object(包括数组、对象、函数等对象)

TS新增类型

联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any等

以下是TypeScript中一些常用且重要的类型：
基本类型：

string：用于文本字符串。

number：用于数值，包括整数和浮点数。

boolean：布尔值，只能是true或false。

null 和 undefined：表示空值或未定义的值，TypeScript 中它们是所有类型的子类型。

void：表示没有任何返回值的函数。

never：表示永远不会出现的值的类型，常用于抛出异常或无限循环的函数。

数组类型：

使用Array<元素类型>或元素类型[]定义，例如number[]表示一个数字数组。

元组（Tuple）：

定义固定长度和类型的数组，例如[string, number]表示一个数组，其第一个元素为字符串，第二个元素为数字。
对象类型（Object）：

使用接口（interface）或类型别名（type）来描述对象结构，如：
interface Person {
      
      
  name: string;
  age: number;
}
枚举（Enum）：
用于定义一组命名的常量，如：
1enum Color {Red, Green, Blue}
任意类型（any）：

表示可以是任何类型，使用时需谨慎，因为它绕过了类型检查。

联合类型（Union Types）：

使用管道符号|分隔，表示一个值可以是多种类型中的一种，如string | number。

类型断言（Type Assertion）：

用来告诉编译器某个值的类型，形式为value as Type。

字面量类型（Literal Types）：

直接使用具体的值作为类型，如const answer: 42 = 42;。

索引签名（Index Signatures）：

用于定义对象中动态属性的类型，如{ [key: string]: any }。

类（Class）和接口：

类用于创建对象的蓝图，接口用于定义类或对象的形状。

泛型（Generics）：

提供了编写可重用组件的方式，这些组件可在多种数据类型上工作，如Array<T>。

3.1.TS中的类型注解

示例代码：

// 只需要在 变量后面 : 具体的类型 即可
let age : number = <

最低0.47元/天解锁文章

200万优质内容无限畅学