Skip to content

参考:

TypeScript 入门教程

尚硅谷TypeScript教程(李立超老师TS新课)

思维导图

画板

很多地方可以类比Java去学习

一、类型声明

typescript
// 声明变量
let a:string
a='1'

// 声明函数参数及返回值
function add(a:number,b:number):number{
      return a+b
}
add(1,2)

二、数据类型

1、原始数据类型

原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt

2、任意值

Any和Unknow的变量都可以赋予任意类型的值

ts中不建议使用Any类型,可以带来一些难以发现的问题。

any

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

将一个变量声明为Any类型或不声明类型时,这个变量可以被赋值为任意类型:

typescript
let a;
a = 1;
a = "s";

let b: any;
b = 1;
b = "hello";

Any类型的变量可以赋予给任意变量,

unknow

可以理解为一个类型安全的Any

3、联合类型

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

typescript
// 联合类型
let c: string | number;
c = "a";
c = 1;

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法:

下边代码中,length不是 stringnumber的共有属性,所以会报错。

typescript
function getLength(something: string | number): number {
    return something.length;
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

三、接口

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

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

let tom: Person = {
    name: 'Tom',
    age: 25
};

可选属性

在属性名后加,代表该属性时可有可无的

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

let tom: Person = {
    name: 'Tom'
};

任意属性

有时候我们希望一个接口允许有任意的属性,可以使用如下方式:

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

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

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

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

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

上例中,任意属性的值允许是 string,但是可选属性 age 的值却是 number,number 不是 string 的子属性,所以报错了。

对于这个问题,可以通过联合类型的方式解决:

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

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

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

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

四、数组类型

在 TypeScript 中,数组类型有多种定义方式,比较灵活。

「类型 + 方括号」表 示法

最简单的方法是使用「类型 + 方括号」来表示数组:

typescript
let fibonacci: number[] = [1, 1, 2, 3, 5];

数组泛型

我们也可以使用数组泛型(Array Generic)Array<elemType>来表示数组:

typescript
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

用接口表示数组

接口也可以用来描述数组:

typescript
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示:只要索引的类型是数字时,那么值的类型必须是数字。

虽然接口也可以用来描述数组,但是我们一般不会这么做,因为这种方式比前两种方式复杂多了。

类数组

类数组(Array-like Object)不是数组类型,比如 arguments:

typescript
function sum() {
    let args: number[] = arguments;
}

// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中,arguments 实际上是一个类数组,不能用普通的数组的方式来描述,而应该用接口:

typescript
function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

在这个例子中,我们除了约束当索引的类型是数字时,值的类型必须是数字之外,也约束了它还有 lengthcallee 两个属性。

事实上常用的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection 等:

typescript
function sum() {			
    let args: IArguments = arguments;
}

其中 IArguments TypeScript 中定义好了的类型,它实际上就是:

typescript
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

五、函数类型

六、类

七、泛型

八、声明文件