数据类型
JS 内置的数据类型
string、number、boolean、undefined、null、object、bigint、symbol
默认可以把 null
和 undefined
赋值给其他类型
Array
普通定义
let arr: number[] = [1, 2, 3];
// or
let arr2: Array<number> = ['1'];
联合类型
let arr: (string | number)[] = ['1', 2];
指定对象成员
interface ArrType{
name: string,
age: number
};
let arr: ArrType[] = [{ name: 'remons', age: 10 }]
函数
声明
function sum(x: number, y:number) :number {
return x + y
}
表达式
const sum: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
}
可选参
function sum(x: number, y: number): number {
if (y) {
return x + y
} else {
return x;
}
}
可选参后不能有必传参
默认值
function sum(x: number, y: number = 1): number {
return x + y
}
剩余参数
function sum(x: number, y: number = 1, ...other: any[]): Array<any> {
const params = [x, y, ...other];
return params;
}
重载
// 设想这样一个场景,有一个函数,有两个参数,我想实现以下几种功能
// 1. 当(a, b); a = number, b = number 时, return a + b : number;
// 2. 当(a, b); a = string, b = string 时, return a + '' + b;
// 即:a = number, b = number; a = string, b = string;
// 这种情况下该如何进行约束呢?
function Add(a: number, b: number): number
function Add(a: string, b: string): string
function Add(a: any, b: any): any {
if (typeof a === 'number' && typeof b === 'number') {
return a + b
}else {
return a + '' + b
}
}
Tuple(元组)
元组最重要的特性是可以限制数组元素的个数和类型,它特别适合用来实现多值返回。用于保存定长定数据类型的数据
解构赋值
const tulpes: [number, string] = [1, 'remons'];
const [age, names] = tulpes;
console.log(age, names) // 1, 'remons'
可选参
const tulpes: [number, string?] = [1];
剩余参数
const tulpes: [number, ...string[]] = [1, 'remons', 'remons2'];
重载
// 设想这样一个场景,有一个函数,有两个参数,我想实现以下几种功能
// 1. 当(a, b); a = number, b = number 时, return a + b : number;
// 2. 当(a, b); a = string, b = string 时, return a + '' + b;
// 即:a = number, b = number; a = string, b = string;
// 这种情况下该如何进行约束呢?
function Add(a: number, b: number): number
function Add(a: string, b: string): string
function Add(a: any, b: any): any {
if (typeof a === 'number' && typeof b === 'number') {
return a + b
}else {
return a + '' + b
}
}
never
永不存在的值的类型
void
无任何类型,例如没有返回值的函数的返回值类型
unknown
未知类型
any
任意类型的变量,不作任何约束
类型断言
const arrNumber: number[] = [1, 2, 3, 4];
const greaterThan2: number = arrNumber.find(num => num > 2);
// Type 'number | undefined' is not assignable to type 'number'.Type 'undefined' is not assignable to type 'number'.
const greaterThan1: number = arrNumber.find(num => num > 1) as number; // OK
非空断言 !
let str: string | undefined | null;
str!.toString()
确定赋值断言 !
let num: number; // so: let num!: number;
changeStr();
console.log(num * 2) // Variable 'num' is used before being assigned.
function changeStr() {
num = 1;
}
字面量
// 单个
let str: 'string' = 'string';
let num: 1 = 1;
let bool: true = true;
// 多个
type literal = 'top' | 'bootom'
联合类型
取值可以为多种类型中的一种
let types: string | number
交叉类型
先举个例子:
let types: string & number
// 很鸡肋,因为没有类型满足 types
真正有用的例如将多个接口类型合并为一个类型
interface types1 {
age: number,
name: string
}
interface types2 {
sex: string
}
type types = types1 & types2;
const obj: types = {
age: 10,
name: 'remons',
sex: 'man'
}
类型别名
用来给一个类型起个新名字。类型别名常用于联合类型
接口
interface types {
age: number,
name: string
}
赋值时,变量形状须和接口形状保持一致
类型别名和接口的区别
语法
// type
type ManType = {
age: number,
name: string
}
type SetMan = (age: number, name: string) => void
// interface
interface ManType {
age: number,
name: string
}
interface SetMan {
(age: number, name: string): void
}
类型别名作用于其他类型
type Name = string;
type Age = number;
type ArrType = [number, string];
接口可定义多次
interface ManType {
name: string
}
interface ManType {
age: number
}
扩展方式
// type
type ManType1 = {
name: string
}
type ManType = ManType1 & {
age: number
}
// interface
interface ManType1 {
name: string
}
interface ManType extends ManType1 {
age: number
}
// type 和 interface 可互相扩展,但都是用各自的语法
可选和只读属性
interface types {
readonly age: number,
name?: string
}
const obj: types = {
age: 10
}
obj.age = 100 // Cannot assign to 'age' because it is a read-only property
任意属性
interface types {
name: string;
age?: number;
[propName: string]: any;
}
// if
// interface types {
// name: string;
// age?: number;
// [propName: string]: string;
// }
// 一旦定义任意属性,确定属性和可选属性的类型都必须是它的类型的子集
const obj: types = {
name: 'remons',
sex: 'man'
}
鸭式辨型法
具有鸭子特征的认为它就是鸭子,也就是通过制定规则来判定对象是否实现这个接口
interface Label {
label: string
}
function logLabel(obj: Label) {
console.log(obj.label)
}
const obj = {
label: 'remons',
value: 1
}
logLabel(obj) // 'remons'
// 会根据类型推论为 { label: string, value: number }, 参照鸭式辨型法,都具有 label
logLabel({ label: 'remons', value: 1 }); // err
// 相当于直接使用 Label 接口类型定义