TypeScript零基础教程（一）：开启静态类型的新世界

王木太南
210 阅读5分钟

前言

最近刚刚开启了Typescript的学习旅程，正在通过阮一峰的TS教程和网上的一些开源项目进行typescript的从零开始的学习，为方便今后的开发和面试，于是决定将TS的一些重要知识点通过总结和实践记录下来以供日后参考。

1. 介绍

首先，Typescript作为Javascript的超集，其目的是增强Javascript的功能，使其更适合多人合作的企业级项目。它继承了JS的全部语法，所有 JS 脚本都可以当作 TS 脚本（但是可能会报错），此外它再增加了一些自己的语法。
而TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。本篇文章主要介绍它的基本用法。

2. 类型声明

TypeScript最明显的特征，就是为 JavaScript 变量加上了类型声明。

  1. 类型声明的写法，一律为在标识符后面添加“冒号 + 类型”。
  2. 函数参数和返回值，也是这样来声明类型。
  3. 变量的值应该与声明的类型一致,否则ts会报错。
  4. 变量只有赋值后才能使用，否则会报错。
    示例如下：
let a:number
function toString(num: number): string { 
    return String(num); 
}
let b:string=123//报错

let x: number; 
console.log(x); // 报错

以上示例中：

  • 声明变量a的类型为number
  • 函数toString的参数num是number类型，但是它的返回值的类型为string
  • 变量b的声明类型与值的类型不一致，导致报错
  • 变量x没有赋值，导致报错

3. 类型推断

1.若变量没有声明类型，ts会自己推断其类型。2.若变量变量已被判断为一种类型，再更改为其它类型的值，会报错。3.TypeScript 也可以推断函数的返回值。示例如下：

let a = 1;
a = 'c';// 报错

function addOne(n:number){
    return String(n+1);
}

以上示例中：

  • 变量a的类型没有声明，但它被赋值为1，因此它被ts推断为number类型
  • 由于a已ts推断为number类型，再将其值更改为字符串类型的‘c’，导致了报错
  • 函数addOne没有声明其返回值的类型，但由于返回值为String(n+1),因此ts会推断其为字符串类型

4. ts的编译

  • JavaScript 的运行环境（浏览器和 Node.js）不认识 TypeScript 代码（最新版本的node已经内置了ts支持，因此node已经可以编译ts了）。所以，TypeScript 项目要想运行，必须先转为 JavaScript 代码，这个代码转换的过程就叫做“编译”（compile）。
  • TypeScript 官方没有做运行环境，只提供编译器。编译时，会将类型声明和类型相关的代码全部删除，只留下能运行的 JavaScript 代码，并且不会改变 JavaScript 的运行结果。
  • 因此，TypeScript 的类型检查只是编译时的类型检查，而不是运行时的类型检查。一旦代码编译为 JavaScript，运行时就不再检查类型了。

5. 值与类型

学习 TypeScript 需要分清楚“值”（value）和“类型”（type）。

  • “类型”是针对“值”的，可以视为是后者的一个元属性。每一个值在 TypeScript 里面都是有类型的。比如，3是一个值，它的类型是number。
  • TypeScript 代码只涉及类型，不涉及值。所有跟“值”相关的处理，都由 JavaScript 完成。
  • 在TypeScript 项目里面，存在两种代码：
    1.底层的“值代码”，它使用 JavaScript 语法
    2.上层的“类型代码”，它使用 TypeScript 的类型语法。
  • 这两种代码是可以分离的，TypeScript 的编译过程，就是把“类型代码”全部拿掉，只保留“值代码”。

6. tsc编译器

tsc是ts官方提供的编译器，可以将ts脚本编译成js

  1. 安装
    npm全局安装
npm install -g typescript

查看版本

tsc -v
  1. 编译脚本指令
tsc example.ts
#一次编译多个文件
tsc file1.ts file2.ts file3.ts
#使用--outFile参数，将多个 TypeScript 脚本编译成一个 JavaScript 文件
tsc file1.ts file2.ts --outFile app.js
#使用--outDir参数将文件指定保存到其他目录，下面命令会在`dist`子目录下生成`app.js`
tsc app.ts --outDir dist
#使用--target参数，指定编译后的 JavaScript 版本
tsc --target es2015 app.ts
  1. 编译错误的处理
    编译过程中，如果没有报错，tsc命令不会有任何显示。如果编译报错，tsc命令就会显示报错信息，但是这种情况下，依然会编译生成 JavaScript 脚本。这是因为 TypeScript 团队认为，编译器的作用只是给出编译错误，至于怎么处理这些错误，那就是开发者自己的判断了。开发者更了解自己的代码，所以不管怎样，编译产物都会生成，让开发者决定下一步怎么处理。
  • 如果希望一旦报错就停止编译，不生成编译产物，可以使用--noEmitOnError参数。
tsc --noEmitOnError app.ts
  1. tsconfig.json
    TypeScript 允许将tsc的编译参数，写在配置文件tsconfig.json。只要当前目录有这个文件，tsc就会自动读取，所以运行时可以不写参数。
tsc file1.ts file2.ts --outFile dist/app.js

上面这个命令写成tsconfig.json，就是下面这样。

{
  "files": ["file1.ts", "file2.ts"],
  "compilerOptions": {
    "outFile": "dist/app.js"
  }
}

有了这个配置文件，编译时直接调用tsc命令就可以了。

tsc

7. ts-node 模块

ts-node 是一个非官方的 npm 模块，可以直接运行 TypeScript 代码。

使用时，可以先全局安装它。

npm install -g ts-node

安装后，就可以直接运行 TypeScript 脚本。

ts-node script.ts

如果不安装 ts-node，也可以通过 npx 调用它来运行 TypeScript 脚本。

npx ts-node script.ts

如果执行 ts-node 命令不带有任何参数，它会提供一个 TypeScript 的命令行 REPL 运行环境，你可以在这个环境中输入 TypeScript 代码，逐行执行。示例如下：

$ ts-node 
> const twice = (x:string) => x + x; 
> twice('abc') 
'abcabc' 
>

要退出这个 REPL 环境，可以按下 Ctrl + d，或者输入.exit。 如果只是想简单运行 TypeScript 代码看看结果，ts-node 不失为一个便捷的方法。

结尾

以上就是今天分享的全部内容，码字不易，如果觉得对你有帮助的话，可以点赞收藏关注，感谢！

avatar
文章
阅读
粉丝