「TypeScript 快速入门」01——简介一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

1 什么是 TypeScript

TypeScript 是微软开发的一个编程语言，它在 JavaScript 的基础上添加了静态类型系统

1. 没有类型约束

和其他语言不同，JS 的变量没有类型约束，一个变量可以被赋值为各种类型

let a = 1;
a = "JavaScript";
a = true;
a = function () {};

2. 解释型语言

JS 是一门解释型语言，没有编译阶段，它在运行时才会进行类型检查

基于以上两点，JS 代码的类型错误容易导致运行时错误，造成线上 bug

以下代码在运行时才会报错：

let a = 1;
a.forEach(() => {});

1. 类型约束

TypeScript 可以在声明变量时指定类型

// 变量 a 的类型为 number
let a: number = 1;

2. 编译阶段

TypeScript 拥有编译阶段，通过编译后代码会转换成 JS 代码

TypeScript 在编译阶段会进行类型检查，检查未通过会报错

以下代码无法通过编译，因为 number 类型没有forEach方法

let a: number = 1;
a.forEach(() => {});

类型系统按照“类型检查时机”分类动态类型和静态类型系统

动态类型：代码运行时才会进行类型检查。比如 JS。类型错误可能导致发生运行时错误

静态类型：代码编译时就会进行类型检查。比如 TS。类型错误在编译时就会被发现

TypeScript 的命令行工具安装方法：

npm install -g typescript

此命令会在全局安装tsc命令，安装成功后可以在任何地方执行tsc命令

tsc hello.ts

以上命令可以将 hello.ts 编译成 hello.js

复制以下代码到hello.ts中

function hello(): string {
  return "Hello TypeScript";
}
let str: string = hello();
console.log(str);

然后执行以下命令将 ts(Typescript) 编译成 js(JavaScript) 文件

tsc hello.ts

成功后会生成hello.js

function hello() {
  return "Hello TypeScript";
}
var str = hello();
console.log(str);

对比两段代码可以发现，ts 代码中多了: stirng

ts 用:（前后有无空格均可）来指定类型

hello.ts代码的意思是：hello 函数返回类型为字符串，变量 str 的类型也是字符串

指定类型后的变量必须接收同类型的值

hello.ts 中：字符串类型的 str 可以接受返回类型为字符串的 hello 函数的返回值