ts学习总结

11 篇文章 1 订阅
1 篇文章 0 订阅

ts学习总结
ts最重要的特性:类型系统、适用于任何规模

数值

let num: number = 1

但是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字

字符串

let name: string = 'wujuan'

布尔值

let isDone: boolean = false
使用构造函数 Boolean 创造的对象不是布尔值
let createdByNewBoolean: boolean = new Boolean(1) 则会报错, 事实上 new Boolean() 返回的是一个 Boolean 对象
但是直接调用Boolean也可以返回一个boolean类型
let createdByBoolean: boolean = Boolean(1);

在 TypeScript 中,boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数。其他基本类型(除了 null 和 undefined)一样。

Null 和 Undefined

let un: undefined = undefined
let nu: null = null

任意值

任意值(Any)用来表示允许赋值为任意类型。

let myname: any = '111'
myname = 111

tips:

1.在任意值上访问任何属性和方法都是允许的

2.变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:

void

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void:

function myname(): void {
    console.log("Myname is WJ");
}

联合类型

联合类型表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

对象类型–接口

interface Person {
    name: string;
    age: number;
}

let lily: Person = {
    name: 'lily',
    age: 28
}

定义的变量比接口多了或少了一些属性都是不允许的

interface Person {
    name: string;
    age: number;
}

let lily: Person = {
    name: 'lily'
}

Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

let Nike: Person = {
    name: 'Nike',
    age: 25,
    sex: 'female'
}

Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

若某个属性不是完全需要的,可以使用可选属性

interface Person {
    name: string;
    age?: number;
}

let lily: Person = {
    name: 'lily'
}

但是仍不允许添加未定义的属性:

interface Person {
    name: string;
    age?: number;
}

let lily: Person = {
    name: 'lily',
    sex: 'male'
}
Type '{ name: string; sex: string; }' is not assignable to type 'Person'.
  Object literal may only specify known properties, and 'sex' does not exist in type 'Person'.

如果希望一个接口允许有任意的属性,可以使用如下方法:

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    sex: 'male'
};

一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let lily: Person = {
    name: 'lily',
	age: 25,
    sex: 'male'
};
Property 'age' of type 'number | undefined' is not assignable to string index type 'string'.
Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
  Property 'age' is incompatible with index signature.
    Type 'number' is not assignable to type 'string'.

任意属性的值允许是 string,但是可选属性 age 的值却是 number,number 不是 string 的子属性,所以报错了,若想解决上述报错可以使用联合类型

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number | undefined;
}

let lily: Person = {
    name: 'lily',
	age: 25,
    sex: 'male'
};

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值,你可以在属性名前用readonly来指定只读属性:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let lily: Person = {
    id: 7625,
    name: 'lily',
    sex: 'male'
};

若在此时改变id的值 lily.id = 7658则会报错Cannot assign to ‘id’ because it is a read-only property.

数组类型

在ts中,数组类型有多种定义方式

方式一:类型+[]

let arr: number[] = [1, 2, 3, 4, 5]

表示该数组为数字类型的数组,不能接受其他类型的参数

方式二:数组泛型

let arr: Array<number> = [1, 2, 3, 4, 5]

方式三: 使用接口表示数组

interface numArray {
   [propName: number]: number;
}

let numArr: numArray = [1, 2, 3, 4]

如果不想约束数组元素的类型
let arr: any[] = [1, ‘str’, false]

函数类型

函数定义的方式有两种:函数声明和函数表达式

函数声明:

function sum(x: number, y: number): number {
    return x+y
}

函数表达式:

let mySum = function (x: number, y: number): number {
    return x + y;
};
用接口定义函数的形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

函数的可选参数:和接口的可选参数类似,使用?来表示可选参数,但是可选参数必须在必选参数后面,可选参数后面不允许再出现必需参数了:

function introduce(name: string, age?: number) {
    if(age) {
        return `My name is ${name}, 我今年${age}岁`
    }else {
        return `My name is ${name}`
    }
}
let Nike = introduce('Nike', 21)

函数的参数默认值:可以给函数添加默认值

function introduce(name: string, age: number = 32) {
    if(age) {
        return `My name is ${name}, 我今年${age}岁`
    }else {
        return `My name is ${name}`
    }
}
let Nike = introduce('Nike')

剩余参数:可以使用 …rest 的方式获取函数中的剩余参数

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a: any[] = [];
push(a, 1, 2, 3);

类型断言

类型断言(Type Assertion)可以用来手动指定一个值的类型

值 as 类型 

tips:

1、联合类型可以被断言为其中一个类型

2、父类可以被断言为子类

3、任何类型都可以被断言为 any

4、any 可以被断言为任何类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法,使用类型断言可以避免访问其没有属性和方法时的编译报错,但是在运行时没有该属性或者方法还是会报错

枚举

枚举(Enum)类型用于取值被限定在一定范围内的场景,枚举使用 enum 关键字来定义,枚举成员会被赋值为从0开始递增的数字,同时也会对枚举值和枚举名进行反向映射

enum Color {
    blue,
    yellow,
    red,
    green
}
console.log(Color['blue'] === 0) // true
console.log(Color[1] === 'yellow') // true

常数枚举
常数枚举是使用const enum 定义的枚举类型:和普通枚举的区别是它会在编译阶段被删除,并且不能包含计算成员

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值