TypeScript

数据类型

JS 内置的数据类型
stringnumberbooleanundefinednull、object、bigint、symbol

默认可以把 nullundefined 赋值给其他类型

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 接口类型定义
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值