《一》TypeScript 基础

原创已于 2025-03-10 13:39:28 修改 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TypeScript

于 2021-05-12 16:55:25 首次发布

TypeScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍TypeScript作为一种静态类型的JavaScript超集的特点与优势。探讨其类型系统如何提高代码质量和安全性，并提供从安装到使用的详细步骤。

基于 TypeScript5

TypeScript 是由微软推出的，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法，添加了类型定义。它无法直接在浏览器中运行，但是可以通过配置来将它编译成任意版本的 JavaScript。

TypeScript 的类型定义在很大程度上弥补了 JavaScript 由于类型缺失而存在安全隐患的缺点，不仅规范了代码，而且能在代码编译阶段就及时发现错误。

TypeScript 拥有 JavaScript 的所有特性，并且它紧跟 ECMAScript 的标准。
TypeScript 最终还是需要被编译成 JavaScript。
TypeScript 始于 JavaScript，归于 JavaScript。

TypeScript 仅仅是在开发阶段帮助做类型限制，编译后就是正常的 JS。

请添加图片描述

类型系统按照类型检查的时机来分类，可以分为动态类型和静态类型。
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。
JavaScript 是一门解释性语言，没有编译阶段，所以它是动态类型。
let foo = 1
foo.split(' ') // 运行时会报错
静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。
TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以它是静态类型。
let foo: number = 1
foo.split(' ') // 编译时会报错
类型系统按照是否允许隐式类型转换来分类，可以分为强类型和弱类型。TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

安装：

使用 npm install -g typescript 在全局环境下安装，安装完成之后，就可以在任何命令行中执行 tsc 命令了。

不安装 TypeScript 环境对于编写 TypeScript 代码是没有任何影响的。但是想要将 TypeScript 代码编译 JavaScript 代码后运行起来就需要安装 TypeScript 环境了。

工作流：

请添加图片描述
写好 TypeScript 代码之后，使用 TypeScript 编译器 tsc 将 TypeScript 代码编译为 JavaScript，再由浏览器运行 JavaScript 文件。

使用：

新建一个 index.ts 文件。

使用 TypeScript 编写的文件以 .ts 为后缀。
使用 TypeScript 编写 React 时，以 .tsx 为后缀。
```
// index.ts
const message:string = "Hello World"
console.log(message)
```
在命令行上执行 tsc index.ts 命令编译代码，就会在当前目录下生成一个 index.js 文件。

可以同时编译多个 TS 文件：tsc file1.ts file2.ts file3.ts。

tsc xxx.ts -w：编译文件时，使用 -w 指令后，TypeScript 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
```
// index.js
var message = "Hello World"
console.log(message)
```

声明文件：

TypeScript 的声明文件以 .d.ts 结尾，主要是用来给 TS 编译器和代码编辑器做类型检查和智能提示用的。

声明文件的写法：

使用 declare 关键字来声明。

decalre function getName(id:number|string):string