**【这是我参加【第四届青训营】笔记创作活动的第1天】 **
1.TypeScript介绍
TypeScript简称:TS,是JavaScript的超集。
(1)JS有的TS都有,JS写的代码在TS的环境下都能跑。
(2)在JS基础之上,为JS添加了类型支持。TypeScript=Type+JavaScript
TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
// TypeScript 代码有明确的数据类型 let age1: number = 18 // JavaScript 代码没有明确的类型 let age2 = 18
2.TypeScript初体验 2.1下包 全局安装:npm i -g typescript。 验证是否安装成功:tsc –v (查看 typescript 的版本)
2.2编译并运行TS代码
步骤
(1) 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
(2)编译。将 TS 编译为 JS
在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
(3)执行 JS 代码。
1.在node中运行。在终端中输入命令，node hello.js。
2.在浏览器中运行。
步骤
(1) 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
(2)编译。将 TS 编译为 JS
在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
(3)执行 JS 代码。
1.在node中运行。在终端中输入命令，node hello.js。
2.在浏览器中运行。
3.ts-node 简化运行TS的步骤 使用 npm i -g ts-node 命令下包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。(初学阶段可以使用ts-node来运行代码,项目阶段就不会再这样使用了)。
4.运行ts代码报错问题 4.1 console.log报错问题 Cannot find name 'console'. Do you need to change your target library? Try changing thelibcompiler option to include 'dom'.
原因：没有创建ts项目，没有写配置文件
解决：用tsc --init命名，在根目录下生成配置文件 tsconfig.json
4.2 同名的变量冲突问题 原因：目前写的代码不是模块化的环境，定义的变量都是全局的。
解决：
1.方式1：写代码时，用{ }整体给包起来
2.方式2：export {}
5.TS类型注解 5.1格式&示例 格式
let 变量名: 类型 = 初始值
示例：
let age: number = 18
5.2 报错
// 类型注解
let age: number = 18
// 错误代码： let age: number = '19' // 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
6.TS的类型\
6.1常用基础类型(分为两类)
JS 已有类型
1.原始类型：numberring/boolean/null/undefined/symbol
2.对象类型：object（包括，数组、对象、函数等对象）
TS 新增类型
1.联合类型
- 自定义类型(类型别名)
3.接口
4.元组
5.字面量类型
6.枚举
-
void
-
any
-
unkown
7.原始类型
numberring/boolean/null/undefined/symbol
// 数值类型 let age: number = 18
// 字符串类型 let myName: string = '小花'
// 布尔类型 let isLoading: boolean = false
// undefined let un: undefined = undefined
// null let timer:null = null
// symbol let uniKey:symbol = Symbol()
8.类型推论 在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写
8.1 2种常见场景 声明变量并初始化时 决定函数返回值时
// 变量 age 的类型被自动推断为：number let age = 18
// 函数返回值的类型被自动推断为：number function add(num1: number, num2: number) { return num1 + num2 }
8.2 VSCode中的编码技巧 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯
