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	枚举类型用于定义数值集合。 enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days["Sun"] === 0); // true console.log(Days["Mon"] === 1); // true console.log(Days["Tue"] === 2); // true console.log(Days["Sat"] === 6); // true console.log(Days[0] === "Sun"); // true console.log(Days[1] === "Mon"); // true console.log(Days[2] === "Tue"); // true console.log(Days[6] === "Sat"); // true
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" />