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 定义的枚举类型:和普通枚举的区别是它会在编译阶段被删除,并且不能包含计算成员