typescript基础知识汇总
JavaScript中所有事物(字符串、数值、数组、函数)都是对象,都有属性和方法。1、用函数定义对象,然后new对象实例。2、用Object定义并创建对象实例var o = new Object(true);
类其实是function:function带同名构造函数和return对象。
prototype给对象添加属性或方法
1、基础类型
数据类型 | 关键字 | 描述 |
---|---|---|
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
数字类型 | number |
它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
|
字符串类型 | string |
一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。 let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
|
布尔类型 | boolean |
表示逻辑值:true 和 false。 let flag: boolean = true;
|
数组类型 | 无 |
声明变量为数组。 // 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];
|
元组 | 无 |
元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。 let x: [string, number];
x = ['Runoob', 1]; // 运行正常
x = [1, 'Runoob']; // 报错
console.log(x[0]); // 输出 Runoob
|
枚举 | enum |
枚举类型用于定义数值集合。
|
void | void |
用于标识方法返回值的类型,表示该方法没有返回值。 function hello(): void {
alert("Hello Runoob");
}
|
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(obj instanceof Person)
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" />