初学TypeScript系列（一）携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

TypeScript 是 JavaScript 的一个超集，扩展了JavaScript的语法，增加了类型机制和对 ES6+ 的支持。

TypeScript 的特性

TypeScript 可以编译出纯净、简洁的 JavaScript 代码，并且可以运行在任何浏览器、Node.js 等环境中（任何能运行 JavaScript 的环境）。

a. 静态类型

TypeScript 是静态类型

静态类型指编译阶段就能确定每个变量的类型。TypeScript 在运行前需要先编译为 JavaScript，在编译阶段就会进行类型检查，确定变量的类型，所以在程序中不能改变。

动态类型是指在运行时才会进行类型检查。JavaScript 是一门解释型语言，没有编译阶段，变量的数据类型具有动态性，只有执行时才能确定变量的类型，所以JavaScript是动态类型

b. 弱类型

指允许隐式类型转换，如数字和字符串相加，运行时数字会被隐式类型转换为字符串。

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

安装 TypeScript

全局安装 TypeScript：npm install -g typescript

编写并执行TS程序（简单的例子）

hello.ts（仅仅使用了 .ts 扩展名，代码是 JavaScript ）

function sayHello (person) {
  return 'Hello, ' + person
}

let user = 'TypeScript'

console.log(sayHello(user))

在编辑器的终端命令行上手动编译代码

编译TypeScript文件： tsc hello.ts => 输出结果为一个 hello.js 文件

运行： node hello.js => 输出结果 Hello, TypeScript

注：在vscode编辑器中，编译之后会报错

解决方法： tsc --init => 运行该命令后，根目录会生成一个配置文件，文件名为：tsconfig.json

类型注解

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式，使用 : 指定类型。

TypeScript 只会在编译时对类型进行静态检查，如果发现有错误，编译的时候就会报错。但是编译的时候即使报错了，还是会生成编译结果

function sayHello (person: string) {
  return 'Hello, ' + person
}

let user = 'TypeScript'
// 把user更改为数组 => 编辑器中会提示错误，编译的时候也会出错,但还是会生成js文件
// let user = ['Tani',17]

console.log(sayHello(user)) // Hello, Tani,17

接口（interface）

接口用来描述对象的外观（类型）

interface Person{
  name: string;
  age: number;
}
function sayHello (person: Person) {
  return 'Hello, ' + person.name
}

let user = {
  name: 'Tani',
  age: 17
}
console.log(sayHello(user))  // Hello, Tani

初学TypeScript系列（一）