typescript 常用类型
- js 已有类型
- 原始类型：number \ string \ boolean \ null \ underfined \ symbol
- 对象类型：object（包括数组、对象、函数等对象）
- ts 新增类型
- 联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void 、any 等
联合类型
let arr: (number | string)[] = [1, 'a', 2]; //联合类型声明类型别名
// 使用 type 关键字来创建类型别名
// 类型别名，可以是任何合法的变量名称
// 创建类型别名后，直接使用该类型别名作为变量的类型注解 即可
type CustomArray = (number | string)[];
let arr1: CustomArray = [1, 2, 'a', 'b'];函数类型
// 定义 参数 和 返回值 类型
function add(num1: number, num2: number): number {
return num1 + num2
}
// 函数表达式声明函数
const add1 = (num1: number, num2: number): number => {
return num1 + num2
}
const add2: (num1: number, num2: number) => number = (num1, num2) => {
return num1 + num2
}
// 如果函数没有返回值，函数返回值类型为 void
function greet(name: string): void {
console.log('hello');
}
// 可选参数
// 参数名称后面添加 ？
// 必选参数不可以在可选参数之后
function mySlice(start?: number, end?: number): void {
console.log(start, end);
}对象类型
// 如果一行代码只指定一个属性类型，可以去掉分号 ；
// 方法的类型也可以使用箭头函数形式
let person: { name: string; age: number; sayHi(): void; greet(name: string): void } = {
name: '刘老师',
age: 18,
sayHi() { },
greet(name) { },
}
let person1: {
name: string;
age: number;
sayHi: () => void
greet: (name: string) => void
} = {
name: '刘老师',
age: 18,
sayHi() { },
greet(name) { },
}
// 对象可选属性
function myAxios(config: { url: string; method?: string }) { }
myAxios({
url: '',
// method:
})接口类型
// 使用 interface 关键字声明接口, 描述对象的类型，达到复用的目的
interface IPerson {
name: string
age: number
sayHi(): void
}
let person2: IPerson = {
name: '李老师',
age: 18,
sayHi() { },
}
let person3: IPerson = {
name: '李老师',
age: 18,
sayHi() { },
}
// 接口 interface 和 类型别名 type 的区别
// 相同点：都可以给对象指定类型
// 不同点：接口，只能为对象指定类型；类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
type IPerson2 = {
name: string
age: number
sayHi(): void
}
let person4: IPerson2 = {
name: '李老师',
age: 18,
sayHi() { },
}
// 两个接口有相同的属性或方法，可以将公共的属性或方法抽离出来,通过继承来实现复用
interface Point2D { x: number; y: number }
// 使用继承实现复用
interface Point3D extends Point2D {
z: number
}
let p3: Point3D = {
x: 1,
y: 2,
z: 3
}元组类型
// 是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型
let position : [number, number] = [1, 2];类型推断
// 类型推论的两个场景：1.声明变量并初始化值；2.函数返回值
// 能省略类型注解的地方就省略
let a = 18 //不用写类型注解类型断言
const aLink = document.getElementById('link');
// 注意：该方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性
// 因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法
// 解决方式：这种情况下就需要使用类型断言指定更加具体的类型
// 使用类型断言：
const aLink = document.getElementById('link') as HTMLAnchorElement;
// 解释:
// 使用 as 关键字实现类型断言
// 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
// 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了
// 另一种语法，使用 <> 语法，这种语法形式不常用知道即可:
// 该语法，知道即可：在react的jsx中使用会报错
const aLink = <HTMLAnchorElement>document.getElementById('link');字面量类型
字面量类型配合联合类型一起使用。
// 字面量类型
let str1 = '张三';
const str2 = '张三';
type Direction = 'left' | 'right' | 'up' | 'down';
// 使用自定义类型:
function changeDirection(direction: Direction) {
console.log(direction);
}
// 调用函数时，会有类型提示：
changeDirection('up');枚举
枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。
数字枚举：
- 枚举成员的值为数字的枚举；
- 枚举成员是有值的，默认为：从 0 开始自增的数值；
字符串枚举：
- 枚举成员的值为字符串的枚举
- 字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值
一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效
// 创建枚举
enum Direction2 {
Up,
Down,
Left,
Right,
}
// 使用枚举类型
function changeDirection2(direction: Direction2) {
console.log(direction);
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection2(Direction2.Up);
// 数字枚举
enum Direction {
Up = 2,
Down = 4,
Left = 6,
Right = 8,
}
// 字符串枚举
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}
// 枚举实现原理
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
// 会被编译为以下 JS 代码：
var Direction;
(function (Direction) {
Direction['Up'] = 'UP'
Direction['Down'] = 'DOWN'
Direction['Left'] = 'LEFT'
Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})void
不推荐使用 any
let obj: any = { x: 0 };
obj.bar = 100;
obj();
const n: number = obj;Typeof 运算符
使用 typeof 操作符来获取变量 的类型
typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文(区别于 JS 代码)
注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）
使用场景：根据已有变量的值，获取该值的类型，来简化类型书写
let p = { x: 1, y: 2 };
function formatPoint(point: { x: number; y: number }) {}
formatPoint(p);
function formatPoint(point: typeof p) {}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
