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. 对象声明
声明对象时,可以给对象的属性指定类型。声明方式也会有所不同,如下
// 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
属性即可,。
类型断言会在代码编译时,将变量强制转化为指定的类型
4. 枚举
当变量的值,只会是固定的某个值之一时,就需要枚举
枚举成员只读,不可写
// 声明方式
enum 枚举名称 { 枚举成员1, 枚举成员1, ... }
// 枚举名称可以作为变量注解使用
enum AllName {
Bob = 'Bob',
Jack = 'Jack'
}
let myName: AllName
let yourNmae: AllName
myName= AllName.Bob // 'Bob'
yourNmae= AllName.Jack // 'Jack'