TypeScript(上)持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

1、ts是啥?

TypeScript 是微软开发的开源编程语言。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript,可以在任何运行 JavaScript 的地方运行

TypeScript 简称：TS，是 JavaScript 的超集。

简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript

TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

2、初体验

全局安装编译 TS 的工具包 npm i -g typescript 或 yarn global add typescript

tsc –v 查看版本

编译并运行 TS 代码

步骤

创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
编译。将 TS 编译为 JS

在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
执行 JS 代码。
1. 在node中运行。在终端中输入命令，node hello.js
2. 在浏览器中运行。

3、ts-node 简化运行 TS 的步骤

`下包 npm i -g ts-node`

使用方式：ts-node hello.ts

相当于：1、 tsc 命令 2、 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

如果ts代码里有 console.log 的话，就会报错

4、console.log报错问题

原因：没有创建ts项目，没有写配置文件

解决：用tsc --init命名，在根目录下生成配置文件 tsconfig.json

同名的变量冲突问题

原因：目前写的代码不是模块化的环境，定义的变量都是全局的。

解决：

方式1：写代码时，用{ }整体给包起来
方式2：export {}

5、TS类型注解

给变量添加类型约束。作用：为变量添加类型约束

// 类型注解
let a: number = 3

说明：代码中的 : number 就是类型注解

6、TS的类型

/** 常用基础类型(两大类)
 * 
 * 1、js本身已有的类型(原始类型) string number boolearn null nudefined symbol
 * 2、新增类型
 *   联合类型
 *   自定义类型
 *   接口
 *   元组
 *   字面量类型
 *   枚举
 *   any
 *   void
 *   unkown
 */

7、类型推论

// 类型推论
let b = 3   // (自动推论 let b: number = 3)

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

// 自动推断为: any
let timer = null
timer = setTimeout(() => {})

// tsc --init 不然报错
console.log(a + b);

8、联合类型

// 联合类型
let t1: null | number = null
t1 = setTimeout(() => {})

9、类型别名

// 类型别名
type s = string
let a1: s = '12'