【入门】TypeScript基本使用

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.在浏览器中运行。

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常用基础类型(分为两类)

1. JS 已有类型

   1.原始类型：number/string/boolean/null/undefined/symbol

   2.对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1.联合类型
   
   2. 自定义类型(类型别名)
   
   3.接口
   
   4.元组
   
   5.字面量类型
   
   6.枚举
   
   7. void
   
   8. any
   
   9. unkown
   

7.原始类型

number/string/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种常见场景

1. 声明变量并初始化时
2. 决定函数返回值时

// 变量 age 的类型被自动推断为：number
let age = 18

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

8.2 VSCode中的编码技巧

• 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型
• 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯
• 

9.联合类型

9.1 格式

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

9.2 示例

let var1: string | number = 1
var1 = '1'

9.3 应用场景

定时器id

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer=setTimeout(()=>{
   },1000)

10.类型别名

10.1 格式

type 别名 = 类型

10.2 使用

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

10.3 场景

给复杂类型起别名

 type NewType = string | number

 let a: NewType = 1
 let b: NewType = '1'

别名可以是任意的合法字符串，一般首字母大写

11. 数组类型

11.1 格式

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

11.2 示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二ÿ