TypeScript 基本用法

类型声明

TS 类型声明的写法一律为 标识符: 类型，函数参数和返回值也是如此：

let foo: string;

function fun(num: number): string {
  return String(num);
}

上面的示例中，我们指定了 foo 变量的类型为字符串；fun 函数的参数类型为数字，返回值类型为字符串。

如果变量赋值或传递的函数参数或返回值类型与定义不一致则会报错：

foo = 1; // 报错

fun("123"); // 报错

另外 TS 规定，变量只有在复制后才能使用，否则会报错。

类型推断

类型声明并不是必须的，TS 会根据代码自动推断合适的类型。推断类型与手动指定的后续行为一致，如果赋值一个不同的类型，会报错。

let foo = 123; // 会推断为 number 类型

foo = "abc"; // ype 'string' is not assignable to type 'number'.

函数的返回值也是可以正确推断的：

function fun(num: number) {
  return String(num); // 会自动推断返回值为 string 类型
}

TS 会根据代码自动推断出合适的类型，但不能保证推断的类型与开发者预期一致，这个特性能加速开发速度，还可以便于 JS 项目过渡到 TS。

TS 编译

JS 运行环境无法直接执行 TS 代码，所以必须经过编译将 TS 代码转为 JS 代码再交由 JS 运行环境执行。

因此 TS 只是做编译时的类型检查，一旦结果编译转为 JS 代码，就不再会检查类型。

最简单的 TS 使用方法是使用官方提供的 TypeScript Playground。进入网页便可以直接写 TS 代码，并且网页中提供了完整的编辑器支持，还可以将代码片段通过 URL 直接分享给他人

TS 官方提供的编译器叫做 tsc，可以将 .ts 文件编译为 .js 文件，想要使用 tsc 需要先安装 typescript 包：

项目内安装

npm install -D typescript

在一个前端工程化项目中，可以将 typescript 安装为项目开发时依赖。然后再编辑器中（以 VSCode 举例）打开命令输入框（快捷键 Ctrl+Shift+P）并输入 Select TypeScript Version 命令选择项目使用的 TS 版本，默认使用的编辑器自带版本，可以切换为项目中安装的 TS 版本

此时要使用 tsc 需要在项目的 package.json 中使用，例如：

json

// package.json
{
  "scripts": {
    "tsc-help": "tsc -h"
  }
}

这样就可以通过执行 npm run tsc-help 来间接执行 tsc -h 命令获取 tsc 帮助。项目内安装的好处是不同开发环境可以确保使用的是同一个 TS 版本。

全局安装

npm install -g typescript

全局安装后就可以直接运行 tsc 命令，可以通过运行 tsc -v 命令查看版本检查是否安装成功。

npx 或 ts-node

使用 npx 可以帮我们下载最新的 typescript 包并自动执行命令，好处是不用提前安装包，并且可以保证每次调用时是使用的最新版本

npx tsc -v

ts-node 是一个非官方 npm 包，可以像 node 运行 js 文件一样，直接运行 ts 文件而无需先进行编译；如果执行 tsc 命令不带任何参数会启动一个 TS 运行环境，类似于直接运行 node 命令

# 可以直接运行 a.ts 文件
npx ts-node a.ts

安装 tsc 后就可以编译 ts 文件了，默认即使 ts 文件报错还是会输出 js 文件，可以通过 --noEmitOnError 参数修改。

tsc filename.ts 命令可以将 ts 文件编译为 js 文件，执行命令后会在当前目录生成一个 app.js 文件，这就是编译后的代码。

tsc 也可以一次性编译多个 ts 文件： tsc file1.ts file2.ts file3.ts。执行后会分别生成对应的 js 文件。

tsc 有许多命令，在 tsconfig.json 文件中都有对应的配置选项。tsconfig.json 就是帮助项目整体执行编译的配置文件，可以在后续文章 tsconfig.json 中了解配置项。配置后直接执行 tsc 命令就会读取配置并整体编译

TypeScript 基本用法 ​

类型声明 ​

类型推断 ​

TS 编译 ​

TypeScript 基本用法

类型声明

类型推断

TS 编译