文章目录
TypeScript 是什么
TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。
TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持）。
TypeScript是微软开发的开源编程语言，可以在任何运行JavaScript的地方运行。
TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。- 静态类型：编译期做类型检查。
- 动态类型：执行期做类型检查。
- 代码编译和代码执行的顺序：1 编译 2 执行。简单来说
TS可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间
TypeScript基本使用
安装编译 TS 的工具包
- 安装命令：
npm i -g typescript
typescript包：用来编译 TS 代码的包，提供了tsc命令，实现了TS -> JS的转化。
验证是否安装成功（查看 typescript 的版本）：
tsc –v
运行编译TS
- 创建 hello.ts 文件（注意：TS 文件的后缀名为
.ts）。 - 将 TS 编译为 JS：在终端中输入命令，
tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）。 - 执行 JS 代码：在终端中输入命令，
node hello.js。
简化TS运行步骤
简化方式： 使用 ts-node 包，直接在 Node.js 中执行 TS 代码。
安装命令：（ts-node 包提供了 ts-node 命令）
npm install -D tslib @types/node
使用方式：
ts-node hello.ts
解释： ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码。
TypeScript 常用类型
类型注解
let age: number = 18
说明：代码中的 : number 就是类型注解。
作用：为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number（数值类型）。
解释：约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。
常用基础类型
JS 已有类型
原始类型
numberstringbooleannullundefinedsymbol
let age: number = 18
let personName: string = '张三'
let bol: boolean = false
let test: null = undefined
let test1: null = null
let test2: undefined = undefined
let test3: undefined = null
let test4: symbol = Symbol()
对象类型
数组类型
- 两种写法：（推荐使用
number[]写法）
let numbers: number[] = [1, 2, 3]
let numbers2: Array<number> = [1, 2, 3]
let strings: string[] = ['1', '2']
let strings2: Array<string> = ['1','2']
函数类型
- 两种方式
- 单独指定参数，返回值的类型
function add (num1: number, num2:number):number {
return num1 + num2
}
const add1 = (num1:number, num2:number): number => {
return num1 + num2
}
- 同时指定参数，返回值的类型
注意：这种形式只适用于函数表达式
// 同时指定参数，返回值类型
const add: (num1: number, num2: number) => number = (num1, num2) => {
return num1 + num2
}
- 可选参数
在可传可不传参数后面添加
？
注意：可选参数只能出现在参数列表的最后，也就是说在可选参数后面不能再出现必选参数（TS有提示）
function mySlice(start?: number, end?: number): void {
console.log('开始索引', start, '结束索引', end)
}
对象类型
TS 中对象的类型就是在描述对象的结构。
let person: {
name: string;
age: number;
sayHi(): void
sayHi1: () => void
} = {
name: '张三',
age: 18,
sayHi(){
console.log('hello world')
},
sayHi1: () => {}
}
- 可选属性
// axios({...})的get请求可以省略method
function myAxios(config:{
url: string;
methods?: string
}) {
console.log(config)
}
TS 新增类型
联合类型 自定义类型（类型别名） 接口 元组 字面量类型 枚举 void any 等。
联合类型
let arr: (number | string) [] = [1, 2, 'a']
解释：| （竖线）在 TS 中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）。
类型别名
类型别名（自定义类型）：为任意类型起别名
当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用
- 使用
type关键字来创建类型别名。 - 类型别名（比如，此处的
CustomArray），可以是任意合法的变量名称。 - 创建类型别名后，直接使用该类型别名作为变量的类型注解即可。
type customArry = (number | string) []
let arr1: customArry = [1, 2, 'a', 'b']
接口
一个对象类型被多次使用时，一般会使用
接口（interface）来描述对象的类型，达到复用的目的
interface Person {
name: string
age: number
sayHi: () => void
}
let person1: Person = {
name: '张三',
age: 18,
sayHi: () => {
console.log('helllo TS')
}
}
- 与type(类型别名)比较
- 相同点
- 都可以给对象指定类型
- 不同点
- 接口： 只能为对象指定类型
- 类型别名：可以为任意类型指定别名
- 相同点
- extends(继承)
// interface Point2D {x: number; y: number}
// interface Point3D {x: number; y: number; z: number}
// 使用继承
interface Point2D {x: number; y: number}
interface Point3D extends Point2D {z : number}
let point: Point3D = {
x: 1,
y: 2,
z: 3
}
- 使用
extends（继承）关键字实现了接口 Point3D 继承 Point2D。 - 继承后，Point3D 就有了 Point2D 的所有属性和方法（此时，Point3D 同时有 x、y、z 三个属性）。
元组(Tuple)
元组类型是另一种类型的数组，
它确切地知道包含多少个元素，以及特定索引对应的类型。
// 地图中使用经纬度
// 使用数组（可以出现任意多个数字）
let position: number[] = [123.00, 100.10]
// 使用元组（对应个数，更为严谨）
let dot: [number, number] = [100.00, 100.00]
类型推论
在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型。
-
声明变量并初始化时
-
决定还是返回值时
类型断言
- 使用场景
- 有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。
注意：getElementById 方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a标签特有的 href 等属性。
因此，这个类型太宽泛（不具体），无法操作 href 等 a 标签特有的属性或方法。
解决方式：这种情况下就需要使用类型断言指定更加具体的类型。
技巧：在浏览器控制台，通过 console.dir() 打印 DOM 元素，在属性列表的最后面，即可看到该元素的类型
- 两种写法
- 使用
as关键字实现类型断言
const aLink1 = document.getElementById('result_logo') as HTMLAnchorElement
- 使用
<>语法
const aLink2 = <HTMLAppletElement>document.getElementById('result_logo')
字面量类型
let str = 'hello string'
const str1 = 'hello ts'
此处的hello ts就是字面量类型，str是一个变量，它的值可以是任意字符串，所以类型为string，str1是一个常量它的值只能是'hello ts'，所以它的类型为'hello ts',也就是说某个特定的字符串也可以作为TS中的类型，除字符串外，任意JS字面量（对象、数字等）都可以作为类型使用。
- 字面量类型使用场景
字面量类型配合联合类型一起使用。用来表示一组明确的可选值列表。
function change (direction: 'up' | 'down' | 'left' | 'right') {
console.log(direction)
}
解释：参数 direction 的值只能是 up/down/left/right 中的任意一个。
优势：相比于 string 类型，使用字面量类型更加精确、严谨。
枚举类型
enum Direction {Up, Down, Left, right}
let str3: Direction = Direction.Up
function changeEnum (val: Direction) {
console.log(val)
}
changeEnum(Direction.Down)
// 1
- 特点
- 类似于 JS 中的对象，直接通过点
（.）语法访问枚举的成员。 - 枚举成员是有值的，默认为：
从 0 开始自增的数值
- 也可以给枚举中的成员初始化值
enum Direction {Up = 10, Down, Left, right}
- 枚举成员的值为数字的枚举，称为：
数字枚举。 字符串枚举：枚举成员的值是字符串。(字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值。)
enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
编译后
var Direction;
(function (Direction) {
Direction["Up"] = "Up";
Direction["Down"] = "Down";
Direction["Left"] = "Left";
Direction["Right"] = "Right";
})(Direction || (Direction = {}));
说明：枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表。
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效。
any类型
不推荐使用 any！这会让 TypeScript 变为 “AnyScript”（失去 TS 类型保护的优势）
let obj: any = 'sdad'
let strw: any = {}
obj()
//以上操作都不会有任何类型错误提示，即使可能存在错误！
- 其他隐式具有 any 类型的情况：
注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型！
TS中的typeof运算符
- JS中的typeof操作符
console.log(typeof 'Hello')
// string
let p = {a: 1, b: 2}
function fun(pre: typeof p) {} // =>等价于 fun({a: number, b:number})
fun({a: 2, b: 5})
1. typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文（区别于 JS 代码）。
2. 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。