1. 概述
- Typescript 是 js 的超集（相当于 js 的扩展，并且这个扩展包含 js 的任何功能）
- ts 新增了 类型系统，代码更加易于维护，使用其开发大型项目更加友好
- Vue3 源码大部分使用 TS 重写，未来的趋势
优势：
- 类型化：开发类型化，有效避免了很多因语言本身的灵活所导致的 Bug 的出现
- 提高代码可读
- 增强了 API ，枚举等补充 API
- 可以使用任何原生 JS 特性（ES6 等）
2.使用
2.1. 原理
TS => 解析 => JS => 浏览器执行 / node环境运行
2.2. 安装
npm i -g typescript
2.3. 使用
直接创建以 ts 为后缀文件即可
运行时直接 输入 tsc + 文件 (tsc --wacth 文件.ts每次修改后会自动生成 js 文件)，会生成编译后的 js 文件，之后就可以在 node 环境运行了
或者 下载 ts-node 包直接执行， ts-node + 文件名即可
3. 基础
相对于 js ，数据类型的声明也有不同
3.1. 基本类型声明
声明基本类型 let name: type = val
let age: number = 10
console.log(age， typeof age) // 10 number
3.2. 数组声明
let arr: string[] = ['val', 'val']（此数组中的 item项 必须为 string 类型）
let arr: number[] = ['val', 'val']（此数组中的 item项 必须为 number 类型）
上面的数组项可以为 undefind 、 null
3.3. 函数声明
函数创建时可指定返回值类型
function fn()：number {
return 10 // 指定返回值类型时，必须有 return 关键字
}
// 接收返回值的变量也需要指定类型
let num: number = fn()
// 也可以直接使用返回值
console.log(fn() * 10) // 100
指定参数时需要注意写明参数类型
function fn(nums: number[], strs: string[], n: number, s: string) {
}
// 注意： 参数若是不传会报错，如下
fn() // 报错
但是可以给参数指定默认值来避免这种情况,如下
function fn(nums: number[] = [], strs: string[] = [], n: number = 1, s: string = '') {
}
fn()
注意：使用 ts 指定返回值类型的函数，不可以省略大括号
3.4. 对象声明
声明对象时，可以给对象的属性指定类型。声明方式也会有所不同，如下
扫描二维码关注公众号，回复： 12728141 查看本文章
// 1. 声明类型
let obj: {
name: string;
age: number;
fn1: (name: string) => void; // 无返回值的函数
fn2: (name: number) => number; // 有返回值的函数
}
// 上面只是声明对象的类型，并没有给对象复制，此时打印对象是 undefined
// 2. 赋值
obj = {
name: '张三',
age: 18,
fn1(name: string) {
console.log(name) },
fn2(name: number) {
return 1 }
}
上面这种方式有两个弊端，一：结构不清晰，二：不可复用。
为了解决此问题， ts 提供了 接口 interface 来定义对象类型模板，如下
// 1. 定义可复用接口
interface IUser {
name: string,
age: number,
sayHi: () => void // 无返回值
nums: () => number[] // 返回值为 number 的数组
}
// 2. 调用接口模板
let obj1: IUser = {
name: '张三',
age: 18,
sayHi() {
console.log('hello 张三')
},
// 指定了数组类型，但是也可以为空数组
nums() {
return []
}
}
推荐使用接口 interface 来定义对象模板，然后再调用对象模板创建对象
注意：创建对象时，必须属性 一 一 对应，修改值时也需要对应模板类型
3.5. 类型推论
在 ts 中，某些没有明确指出类型的地方，类型推论会帮助提供类型
在这些地方，可以不写明类型
3.6. 类型断言
在使用 ts 操作 DOM 时，获取元素后，元素默认为
Element类型，所以只可以操作元素的固有属性（id、class等）
使用类型断言可以指定更加具体的类型，从而达到一些此类型独有的操作
使用 as 关键字来使用 类型断言 （也可以使用 <类型>+变量）
// 1.
let img = document.querySelector('#image') // 默认 Element 类型
// 2. h1 标签
let img = document.querySelector('#title') as HTMLHeadingElement
// 手动指定类型为 HTMLHeadingElement
// 3. img 标签
let img = document.querySelector('#image') as HTMLImageElement
// 手动指定类型为 HTMLImageElement
img.src // 可成功获取此元素的属性
console.dir(img) // 以对象形式打印当前元素
在某些逻辑处理可能会遇到类型问题时，使用类型断言可以很好的解决
function fn(num: string | number): number {
let len = (num as string).length // let len = (<string>num).length
return len
}
fn('abc') // 3
上面函数的参数可能为 string 或 number，但如果为 number 时，取 length 则会报错，这时使用类型断言，将 num 选择为 string 属性即可,。
类型断言会在代码编译时，将变量强制转化为指定的类型