JavaScript中所有事物(字符串、数值、数组、函数)都是对象,都有属性和方法。1、用函数定义对象,然后new对象实例。2、用Object定义并创建对象实例var o = new Object(true);
类其实是function:function带同名构造函数和return对象。
prototype给对象添加属性或方法
1、基础类型
数据类型 | 关键字 | 描述 |
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
数字类型 | number | 它可以用来表示整数和分数。
|
字符串类型 | string | 一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。
|
布尔类型 | boolean | 表示逻辑值:true 和 false。
|
数组类型 | 无 | 声明变量为数组。
|
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
|
枚举 | enum | 枚举类型用于定义数值集合。
|
void | void | 用于标识方法返回值的类型,表示该方法没有返回值。
|
null | null | 表示对象值缺失。 |
undefined | undefined | 用于初始化变量为一个未定义的值 |
never | never | never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。 |
注意:TypeScript 和 JavaScript 没有整数类型。
any:类型免于检查,一路绿灯
unknown:使用之前要类型检查,
never:throw new Error('Unable to greet');
2、类型推断
(1)、变量声明时没有类型但是有赋值,TypeScript 编译器利用类型推断来推断类型
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
--该段代码报错了
(2)、变量声明时没有类型且没有赋值,不管之后有没有赋值,都会被推断成 any
类型而完全不被类型检查:
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
--该段代码不会报错。
3、类型强制转换(类型断言)
var str2:number = <number> '1'
var str2:number = '1' as number,//通常我们使用as的方法
类型断言其他用法:1、将一个联合类型断言为其中一个类型 2、将一个父类断言为更加具体的子类 3、将任何一个类型断言为any 4、将any断言为其他类型
变量作用域:全局作用域、类作用域、局部作用域
let局部变量,常量const,全局变量var
4、运算符
短路运算符(&& 与 ||):&&第一个参数是false就直接返回false,第二个不会执行;||第一个参数是true就直接返回true第2个不会执行。
typeof 返回操作数的数据类型。
instanceof 运算符用于判断对象是否为指定的类型
判断类型方法:if(typeof person === 'string'), if(Array.isArray(person)),if(objinstanceofPerson)
5、函数
在 TypeScript 的类型定义中,=>
用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型
函数定义的2种方式:函数声明、函数表达式
// 函数声明(Function Declaration)
function sum(x, y) {
return x + y;
}
// 函数表达式(Function Expression)----匿名函数
let mySum = function (x, y) {
return x + y;
};
可选参数:放最后,用文号标识。lastName?:string
默认参数:lastName:string='a'
剩余参数:不知道要传多少个参数,将一个不确定数量的参数作为一个数组传入。...nums:number[]
#匿名函数:将函数赋值给一个变量。var res = function( [arguments] ) { ... }用res来调用函数
匿名函数自调用:匿名函数自调用在函数后使用 ()。(function( [arguments] ) { ... })()
#Lambda 函数:箭头函数。var foo = (x:number)=>{10 + x} 等价于function foo(x:number){return 10+x}
6、其他基础类型
数字::var num =1;
字符串:var txt = "string";
数组:var numlist:number[] = [2,4,6,8]
多维数组:var multi:number[][] = [[1,2,3],[23,24,25]]
解构赋值:将数组或对象赋值给变量。let [a, b, c] = foo();let {x: x, y: y, z: z} = bar();
循环
for()
for…of 遍历数组、字符串、Maps、Sets。用来替代for...in和forEach
every 和 some 取代 forEach,forEach无返回
while
do...while
7、元祖
元祖允许一个已知元素数量和类型的数组,各元素的类型不必相同
const studentInfo: [string, string, number] = ["Jack", "Tom", 123];
const studentList: [string, string, number][] = [
["Tom1", "Jack1", 21],
["Tom2", "Jack2", 22],
["Tom3", "Jack3", 23],
];
push() 向元组添加元素,添加在最后面。
pop() 从元组中移除元素(最后一个),并返回移除的元素。
8、联合类型
通过管道(|)将变量设置多种类型。var val:string|number=12
联合类型数组:var arr:number[]|string[];
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错
联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型
9、接口
接口:作用1、作为类的抽象,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。作用2、定义对象的类型。
用接口定义对象类型
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
用接口定义函数:给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
return source.search(subString) !== -1;
}
用接口定义数组:--其实是任意属性的扩展:任意属性+属性键是number的
interface StringArray {
[prop: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
虽然接口也可以用来描述数组,但是我们一般不会这么做,因为这种方式比常规方式复杂多了
接口的可选属性
interface Person {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom'
};
接口的任意属性--表示属性可以任意名字+任何数量
interface A {
[prop: string]: number;
}
const obj: A = {
a: 1,
b: 3,
};
[prop: string]: number
的意思是,A
类型的对象可以有任意属性,string
指的是属性的键都是字符串类型的,number
则是指定了属性值的类型。
interface Person {
name: string;
age?: number;
[prop: string]: string;
}//报错了
一旦定义了任意属性,那么其他属性的类型都必须是该任意属性的类型的子集:
一个接口中只能定义一个任意属性
只读属性readonly
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
id: 89757,
name: 'Tom',
gender: 'male'
};
tom.id = 9527;//这一行报错了
对象中的只读属性只能在创建的时候被赋值,之后不能再次赋值
10、类、对象、命名空间
接口:继承关键字:extends,接口可继承多个接口
类构成
使用 class
定义类,使用 constructor
定义构造函数。
通过 new
生成新实例的时候,会自动调用构造函数。
class Animal {
public name;
constructor(name) {
this.name = name;
}
sayHi() {
return `My name is ${this.name}`;
}
}
let a = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
存取器
使用 getter 和 setter 可以改变属性的赋值和读取行为:
class Animal {
constructor(name) {
this.name = name;
}
get name() {
return 'Jack';
}
set name(value) {
console.log('setter: ' + value);
}
}
let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack
abstract
用于定义抽象类和其中的抽象方法。
extends继承:1次只能继承一个类,不能继承多个类。用super引用父类属性和方法。方法重写。static
访问控制修饰符:public,protected,private
类可以实现接口,使用关键字 implements,
多态:
命名空间:引入命名空间文件/// <reference path = "SomeFileName.ts" />
11、用type--定义类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
类型别名常用于联合类型。
12、用type--定义字符串字面量类型
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello'), 'scroll'); // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错,event 不能为 'dblclick'
上例中,我们使用 type
定了一个字符串字面量类型 EventNames
,它只能取三种字符串中的一种。
13、泛型<T>
指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray<string>(3, 'x'); // ['x', 'x', 'x'](这里也可以不手动指定,而让类型推论自动推算出来)
上例中,我们在函数名后添加了 <T>
,其中 T
用来指代任意输入的类型,在后面的输入 value: T
和输出 Array<T>
中即可使用了
多个泛型参数
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]
14、声明合并
函数声明合并:多个函数声明+1个函数实现
接口声明合并:多个接口声明+1个接口实现
类的声明合并:多个类声明+1个类实现
合并规则:属性合并。属性同名必须同类型,否则报错。
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
15、声明文件
用来引入第三方js库。以 .d.ts 为后缀。引入申明文件格式:/// <reference path = " runoob.d.ts" />