『 刀刀博客 』

主题

TypeScript ​

刀刀

9/6/2023

0 字

0 分钟

介绍 ​

typescript 是 javascript 的一个超集，typescript 可以运行于任何系统，并且是开源免费的。

img

typescript 有以下几个特点

  • typescript 会在编译时对代码进行严格的静态类型检查，可以在编码阶段就发现问题，而不是在上线运行时才发现
  • typeScript 语法遵循 ES 规范，更细速度快，不断支持最新的 ECMAScript 新特性，如装饰器、public/private 修饰符
  • typescript 支持 OOP（面向对象）的接口，抽象类，多态特性
  • typescript 可以为 IDE 提供更好的代码补全、接口提示、跳转到定义
  • 还有重要一点是众多科技公司已经采用 typeScript 进行开发，也是前端工程师需要掌握的就业技能

安装环境 ​

下面来安装学习 typescript 时的开发环境

node ​

首先需要安装 node.js (opens new window)我相信做前端的都已经安装了

img

全局安装 TS ​

然后执行以下命令安装 typescript

txt
npm install -g typescript

如果你使用的是 mac 系统也可以执行

txt
brew install typescript

如果是 linux 系统可以通过相应的软件管理命令安装，比如以下是 manjaro 的安装示例

txt
sudo pacman -Sy typescript

安装后执行以下命令检查是否安装成功

txt
tsc -v
//如果显示以下内容即表示安装成功
// Version 4.2.4

项目安装 TS ​

除了全局安装外，也可以在项目中独立安装 typescript，这可以限定项目使用的 typescript 版本

txt
yarn init -y

安装 typescript

txt
yarn add -D typescript

查看版本

txt
yarn tsc -v

编辑器 ​

.ts 是 typescript 的扩展名，在首次使用 vscode 编写.ts 文件时，vscode 会自动下载支持 typescript 的插件环境

image-20210927101547461

关闭 JS 的检验 ​

默认在编写普通.js 文件时，vscode 也会进行类型校验，这有时不需要

image-20210927104116383

编译 TS ​

我们使用 tsc 命令可以将 ts 文件编译为 js 文件，如果在编译过程中有 ts 错误将在命令行报出

txt
tsc test.ts //会编译生成 test.js 文件

每次修改 ts 文件后再执行命令编译会过于繁琐，可以执行以下命令自动监听 ts 文件内容并自动生成 js 文件

txt
tsc test.ts -w

include ​

需要编译的文件路径，设置如下所示：

json
{
  "include": ["./src/xx/x"]
}

上方配置表示在 src 文件夹下的 任意文件夹下的 ts 文件都会被编译。

exclude ​

需要编译的文件路径，设置如下所示：

json
{
  "include": ["./src/xx/x"],
  "exclude": ["./src/hello/x"]
}

上方配置表示在 src 文件夹下的 任意文件夹，除了 hello 文件夹下的 ts 文件都会被编译。

compilerOptions ​

编译器的选项，有以下几个属性：

  • target：TS 编译为 ES 的版本
  • module：指定要使用的模块化规范（commonjs、amd、system、umd、es6，none）
  • lib：指定项目中用到的库
  • outDir：指定编译后文件所在的目录
  • outFile：将代码合并为一个文件
  • allowJs：是否对 hs 文件进行编译，默认为 false
  • checkJs：是否检测 js 代码是否符合规范，默认为 false
  • removeComments：是否移除注释
  • noEmit：不生成编译后的文件
  • noEmitOnError：当有错误时不生成编译后的文件
  • strict：所有严格模式总开关，为 true 下面四个都开启
  • alwaysStrict：设置编译后的文件是否使用严格模式，默认为 false（最新版本默认为 true）
  • noImplicitAny：不允许出现隐式 any
  • noImplicitThis：不允许出现不明确类型的 this（不允许指向 window）
  • strictNullChecks：严格的检查空值
json
{
  "include": ["./src/xx/x"],
  "exclude": ["./src/hello/x"],
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "lib": ["ES6", "dom"],
    "outDir": "./dist",
    "outFile": "./dist/app.js",
    "allowJs": true,
    "checkJs": true,
    "removeComments": true,
    "noEmit": false,
    "noEmitOnError": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true
  }
}

常见问题 ​

windows ​

如果在 windows 系统中执行 tsc 命令报以下错误

txt
... 因为在此系统上禁止运行脚本 ...

需要以管理员身份执行 powerShell，然后执行以下命令，在出现的提示选择 Y

txt
set-ExecutionPolicy RemoteSigned

Copyright © 2023-present 杜一刀