TS基础语法(一)

前言：本文主要介绍TS基础语法。

一、什么是TS？

1.1 简介

TypeScript是⼀个开源的编程语⾔，通过在JavaScript的基础上添加静态类型定义构建⽽成。通过TypeScript编译器或Babel转译为JavaScript代码，可运⾏在任何浏览器，任何操作系统。

1.2 TS与JS的关系

TypeScript是JavaScript的⼀个超集，他们之间并不是所属关系，TypeScript扩展了JavaScript弱类型语⾔的限制，增加了更多的模块解析⽅式和语法糖。TypeScript并不是⼀个能独⽴运⾏的语⾔，⼤多数时候他都被转译成 JavaScript运⾏，所以可以简单的认为TypeScript相当于功能更丰富的编译型的JavaScript。

1.3 为什么要使用TS

JavaScript本身已完全可以满⾜完整的应⽤开发需求，但在⼤型项⽬协作开发或插件开发的场景中 JavaScript弱类型语⾔的不⾜便暴漏出来。由于JavaScript并⾮编译型语⾔，在代码编写过程中⽆法轻松的实现良好的类型约束和类型推断。TypeScript强类型的约束性以及其⾯向接⼝编程的约束性可以让TypeScript语法开发的应⽤有极强的 维护性，代价是更⼤量的代码篇幅。

1.4 TypeScript的性能优于JavaScript？

TypeScript通过编译后最终还是会转换为JavaScript，最终执行的还是JavaScript，并不能代表性能优势。TypeScript语⾔之所以流⾏，是因为其类型化的JavaScript，在上下⽂阅读时可以提供更好的类型追溯，通过编辑器插件可已实现更有好的提示。

TS入门

2.1 环境配置

中文文档地址 打开电脑的命令⾏⼯具执⾏TypeScript引擎安装命令：

1 2 3

npm install typescript -g // 全局安装 tsc -v // 查看版本号

2.2 Hello Word 实现

新建index.ts文件，用编辑器打开输入以下代码：

1 2	let str:string = 'Hello Word'; console.log(str);

打开终端输入tsc，就自动编译出对应的index.js文件。输入node index.js完成> 终端编译js代码，打印输出Hello Word ;

3. 基础类型

在JavaScript的基础上新增了几种数据类型，在定义值时要声明值的类型。let 变量名:变量类型 = 变量值。注意：类型是内置的时首字母建议小写，自定义定义的接口类型建议首字母大写。

3.1 JS内置类型

1 2 3 4 5 6 7 8

let big: bigint = BigInt(10); let sym: symbol = Symbol("lin"); let num1:number = 1; let str1:string = "1"; let unde1:undefined = undefined; let null1:null = null; let boo:boolean = true; boo = 'false'; // 报错 不能将类型“string”分配给类型“Boolean”

3.2 any

不清楚用什么类型，可以使用 any 类型。这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。注：切勿滥用，不然就变成anyScript

1 2 3 4

let num:any = 0; num = '0'; num = true; // 上面定义了一个num类型为any，可以给他赋值为任意类型。完全失去了TS的作用

3.3 unknown

当不知道一个类型具体是什么时，该怎么办？可以使用 unknown 类型，它代表任何类型，它的定义和 any 定义很像，但是它是一个安全类型，使用 unknown 做任何事情都是不合法的。例如：

1 2 3 4 5 6 7 8

function getCount(num: unknown) { return num / 2; } // 会提示错误：对象的类型为 "unknown" // 解决方案 function getCount(num: unknown) { return num as number / 2; // as为类型断言，将参数转换为number类型 }

3.4 void

void类型与 any 类型相反，它表示没有任何类型。比如函数没有明确返回值，默认返回 Void 类型

1 2 3

function seeHello(): void { console.log('hello') }

3.5 never

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

有些情况下值会永不存在，比如：

如果一个函数执行时抛出了异常，那么这个函数永远不存在返回值，因为抛出异常会直接中断程序运行。 函数中执行无限循环的代码，使得程序永远无法运行到函数返回值那一步。

1 2 3 4 5 6 7 8 9

// 异常 function showError(msg: string): never { throw new Error(msg) } // 死循环 function showLoop(): never { while (true) {} }