1. 类型注解
类型注解是 变量后面约定类型的语法,用来约定类型,明确提示
// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;
TS数据类型
TS 常用类型:
JS 已有类型
简单类型,number string boolean null undefined
复杂类型,对象 数组 函数
TS 新增类型
联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等
简单类型
完全按照 JS 的类型来书写即可
let age: number = 18;
let myName: string = '王小明';
let isEating: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;
复杂类型
数组类型
// 写法一:(推荐)
let numbers: number[] = [1, 3, 5];
// 写法二:
let strings: Array<string> = ['a', 'b', 'c'];
对象类型
let obj : {name:string,age:number} = {name:'jack',age:18}
let person: {
name: string;
sayHi(): void;
} = {
name: 'jack',
sayHi() {},
};
额外内容:
对象中的函数是箭头函数时
let person: {
name: string
sayHi: () => void
} = {
name: 'jack',
sayHi() {},
};
对象中的属性是可选时,关键字是 ? ,例如axios中的get请求method就是可以省略
// axios({url,method}) 如果是 get 请求 method 可以省略
const axios = (config: { url: string; method?: string }) => {};
函数类型
// 普通函数
function add1(a: number, b: number): number {
return 1
}
// 函数表达式
const arr5 = function (a: number, b: number): number {
return a + b
}
const add = (a: number, b: number): number => {
return 1
}
// 箭头函数
const add2: () => string = () => {
return '1'
}
const add3: (a: number, b: number) => number = (a, b) => {
return 1
}
TS新增类型
1.联合类型
类型与类型之间使用 | 连接,代表类型可以是它们当中的其中一种,这种类型叫:联合类型
当数组中既有 number 又有 string 类型时,例如 arr=[‘1’,a] 这种,就要用到| 来连接了,写法是
let arr:( number | string)[]=['1',a]
再举个例子:
let arr=[
{
id: 1,
name: 'jack',
hobby: ['唱歌'],
family: {
mother: 'jack妈妈'
}
},{
id: 2,
name: 'rose',
hobby: ['跳舞'],
family: {
mother: 'rose妈妈'
}
}
]
2.自定义类型(类型别名)type
类型别名:
type 类型别名 = 具体类型 基本语法
定义类型别名,遵循大驼峰命名规范,类似于变量
使用类型别名,与类型注解的写法一样即可
当同一类型(复杂)被多次使用时,可以通过类型别名,简化 该类型的使用
let arr: ( number | string )[] = [ 1, 'a', 4]
// 使用类型别名写法: type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr: CustomArr = [1, 'a', 4];
let arr2: CustomArr = [2, 'b', 8];
2.1 type的交叉类型
使用 & 可以合并连接的对象类型,也叫:交叉类型
// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {
x: number;
y: number;
};
// 使用 交叉类型 来实现接口继承的功能:
// 使用 交叉类型 后,Point3D === { x: number; y: number; z: number }
type Point3D = Point2D & {
z: number;
};
let o: Point3D = {
x: 1,
y: 2,
z: 3,
};
3. 接口 interface
interface 后面是接口名称,和类型别名的意思一样。
指定 接口名称 作为变量的类型使用。
接口的每一行只能有 一个 属性或方法,每一行不需要加分号。
使用 extends 实现接口继承,达到类型复用。
// 通过interface定义对象类型
interface Person {
name: string;
age: number;
sayHi: () => void;
}
// 使用类型
let person: Person = {
name: 'jack',
age: 19,
sayHi() {},
};
3.1 接口的extends 继承
接口继承的语法:interface 接口A extends 接口B {}
继承后 接口A 拥有 接口B 的所有属性和函数的类型声明
interface Point2D {
x: number;
y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {
z: number;
}
// 继承后 Point3D 的结构:{ x: number; y: number; z: number }
3.2 type和interface 的相同点与区别
关键的区别在于不能重新打开类型以添加新属性,而接口总是可扩展的。
interface type
支持:对象类型 支持:对象类型,其他类型
复用:可以继承 复用:交叉类型
它们都可以定义对象类型
它们都可以复用,interface 使用 extends , type 使用 &
type 不能重复定义,interface 可以重复定义但是会合并
详解不同的点:
type 不可重复定义
type Person = {
name: string;
};
// 标识符“Person”重复 Error
type Person = {
age: number;
};
interface 重复定义会合并
interface Person {
name: string;
}
interface Person {
age: number;
}
// 类型会合并,注意:属性类型和方法类型不能重复定义
const p: Person = {
name: 'jack',
age: 18,
};
4. 类型推断
在 TS 中存在类型推断机制,在没有指定类型的情况下,TS 也会给变量提供类型。
// 函数返回值的类型被自动推断为:number
const add = (num1: number, num2: number) => {
return num1 + num2;
};
将来在开发项目的时候,能省略类型注解的地方就省略,充分利用TS推断 的能力,提高开发效率。
如果你不知道类型怎么写,可以把鼠标放至变量上,可以通过 Vscode 提示看到类型
5. 字面量类型
使用 js字面量 作为变量类型,这种类型就是字面量类型,使用字面量类型更加精确、严谨
let str1 = 'Hello TS';
const str2 = 'Hello TS';
// str1的字面量是string str2的字面量是'Hello TS'
// 因为const声明的变量不能再改变,而str2 是 const 声明的,值只能是 Hello TS,所以类型只能是 Hello TS
再例如性别只有男和女
type Gender = '男' | '女'
let gender: Gender = '男'
gender = '女'
字面量类型配合联合类型来使用,表示:一组明确的可选的值
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,会有类型提示:
changeDirection('up')
6. any
any 类型的作用是逃避 TS 的类型检查
显式any情况:当变量的类型指定为 any 的时候,不会有任何错误,也不会有代码提示,TS会忽略类型检查
let obj: any = { age: 18 }
obj.bar = '100'
const n: number = obj
console.log('n',n);
隐式any的情况:声明变量不给类型或初始值,函数参数不给类型或初始值
// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn = (n) => {}
7. 类型断言 -as
一种将变量或表达式的类型强制转换为开发者指定的类型的方式
使用 as 关键字实现类型断言也可以使用尖括号(<>)语法进行类型断言(不推荐)
关键字 as 后面的类型是一个更加具体的类型
使用场景 :消除类型检查错误、处理联合类型、处理any类型
这里,我们将一个any类型的变量str断言为string类型,并使用它的length属性获取字符串的长度。
// 1. 使用尖括号语法的类型断言:
let str: any = "hello";
let len1: number = (<string>str).length;
// 2.使用as语法的类型断言:
let str: any = "hello";
let len2: number = (str as string).length;
标签:string,基础,TS,number,语法,let,类型,type From: https://blog.csdn.net/2301_79847249/article/details/140586715