TypeScript的定义

TypeScript 简称：TS，是 JavaScript 的超集

1. TS是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。
2. TypeScript 是一种给 JavaScript 添加特性的语言扩展。TypeScript = Type + JavaScript。

TS和JS的区别

动态和静态编程语言

js属于动态类型的编程语言，TS属于静态类型的编程语言

• JS：边解释边执行，错误只能在运行阶段才能发现。
• TS: 需要静态编译，再执行(不能直接执行，需要编译成js才能执行)

TS完全兼容javascript，它可以编译成javascript

TypeScript安装

目标

搭建一个可以运行TS的环境来学习ts

全局安装编译 TS 的工具包

安装：npm i -g typescript

• typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 ts -> js 的转化
• 验证是否安装成功：tsc –v (查看 typescript 的版本)

如果运行失败,检查环境变量(path)中是否有TypeScript的安装地址(默认地址:C:\Users\用户名\AppData\Roaming\npm)

TS的类型注解

类型注解的作用 : 为变量添加类型约束

格式 :let 变量名: 类型 = 初始值

例: let num : number = 20

TS的类型

常用基础类型

TS 中的常用基础类型分为两类

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
   10. 等

注意：

1. 原始类型在 TS 和 JS 中写法一致
2. 对象类型在 TS 中更加细化，每个具体的对象（比如: 数组、对象、函数...）都有自己的类型语法

原始类型

掌握原始类型的类型注解

number/string/boolean/null/undefined/symbol

• 特点：简单，这些类型，完全按照 JS 中类型的名称来书写

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()

类型推论

类型推论的场景

在TS的环境中,在某些没有明确指定类型的情况下,TS的类型推论机制会自动提供类型

常见场景

会发生类型推论的两种场景：

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

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

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

联合类型

定义:可以将变量设置多种类型,赋值时可以根据设置的类型来赋值

格式

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

例子

let arr: (number | string) [] = []
let arr: Array<number | string> = []

// 类型推论
let arr = [1, '1']

类型别名

定义: 给类型取一个新的名字 type 别名 = 类型

作用

1. 给类型起别名
2. 定义了新类型

例子

type newType = string | number
let var1: newtype = 'abc'
var1 = 20

数组类型

目标

掌握在ts中使用数组的方法。

两种写法

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

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

定义数组

let arr1 : string[] = ['a','bc']
let arr2 : Array<string> = ['a','bc']
let arr3 = ['a','bc'] //类型推论

小练习:定义一个数组元素,可能是字符串类型,也可能是数值类型

let arr4: (string | number)[] = ['a','100']
let arr5 = ['a','100']