typescript基础语法学习笔记

TypeScript基础语法

安装TS

• 使用npm工具安装TS

• 安装后查看tsc版本

TS数据类型

原始数据类型

• number(数值类型)
• boolean(只有true和false)
• string
• null
• undefined(未定义，只有一种取值)
• void
• any(任意类型)

联合类型

• 具有多种类型的变量
• 联合类型的变量取值可以是联合类型中的其中一种

联合类型作用

function sayHello(student: string | string[]): void {
if(typeof student ===
'string') {
console.log("Hello,
" + student + "!");
} else {
for(let val of student) {
console.log("Hello,
" + val + "!");
}
}
}
sayHello('Alice');
sayHello(['Alice'
,
'Bob'
,
'Tom']);

函数

• 函数的参数和返回值明确类型

• 函数的返回值可以是void类型

• 可选参数

  • 可选参数只能出现在参数列表的右侧

• 参数默认值

function dispChar(count: number, ch: string =
'*'): void {
for(let i=0;i<count;i++) {
console.log(ch);
}
}
dispChar(3);
dispChar(3,
'A');

• 剩余参数

function sum(...values): number {
let result = 0;
for(let val of values) {
result += val;
}
return result;
}
console.log(sum(1,2,3,4)); // 输出10
console.log(sum(1,2,3,4,5)); // 输出15

数组

TS定义数组

let names: string[] = ['Alice','Bob','Tom']; // 定义字符串数组
let names: string[] = ['Alice', 5,'Tom']; // 字符串数组中不能有数值型
let names: any[] = ['Alice', 5,'Tom']; //正确

多维数组

• n维数组是每个元素是n-1维数组的一维数组
• 多维数组可以是不规则的

接口

TS中用接口定义对象的类型

• 是对象的原型，与java的接口不一样

interface Student {
sid: string,
sname: string,
age: number
}

let alice: Student = {
sid: '1083710314',
sname: 'Alice',
age: 18
};
console.log(alice.sid); // 输出1083710314
console.log(alice.sname); // 输出Alice
console.log(alice.age + 1); // 输出19

可选属性

interface Student {
sid: string,
sname: string,
age?: number//加个问号
}

只读属性

interface Student {
readonly sid: string,
sname: string,
age: number
}

元组

• 可存放不同类型元素的集合

let alice: [number, string, string] = [1083710314,
'Alice','CS'];
console.log(alice[0]); // 输出1083710314
console.log(alice[1]); // 输出Alice
console.log(alice[2]); // 输出CS
console.log(alice.slice(1)); // 输出[ 'Alice','CS' ]
alice[2] ='SE';
console.log(alice); // 输出[ 1083710314,'Alice','SE' ]

枚举

• 限制了范围

enum Level {
EXCELLENT ='A',
GOOD ='B',
MEDIUM ='C',
PASS ='D',
FAILED ='E'
};

类

抽象类和访问权限

• abstract
• public、private、protected

abstract class Person {
protected _name: string;
public get name(): string {
return this._name;
}
public set name(name: string) {
this._name = name;
}
public abstract sayHello(): void;
}

class Student extends Person {
private _sid: number;
private _major: string;
public constructor(name: string, sid: number, major: string) {
super(); // 调用父类构造器
this._name = name; // 可访问父类的protected成员
this._sid = sid;
this._major = major;
}
public get sid(): number { return this._sid; }
public set sid(sid: number) { this._sid = sid; }
public get major(): string { return this._major; }
public set major(major: string) { this._major = major; }
public sayHello(): void {
console.log(`I am ${this.name} from ${this.major} major.`);
}
}
let p: Person = new Student('Alice', 1083710314, 'CS');
p.sayHello(); // 输出I am Alice from CS major.
let s: Student = <Student>p; // 强制类型转换
s.major = 'SS'; // 调用setter方法
s.sayHello(); // 输出I am Alice from SS major.

泛型

什么是泛型

• 泛型是将类型作为参数，为不同类型的输入重用相同的代码
• 函数、类和接口都可以使用泛型

function max<T>(a: T, b: T): T { // 泛型函数
if(a > b) return a;
return b;
}
console.log(max(3, 7)); // 输出7
console.log(max('Alice','Bob')); // 输出Bob

• 可以有多个泛型参数

function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
console.log(swap(['Nine', 9])); // 输出[9,'Nine']

泛型约束

• 泛型继承接口，接口中的方法和属性用来约束泛型

interface Lengthwise {
length: number;
}
function split<T extends Lengthwise>(arg: T): void {
for(let i=0;i<arg.length;i++) {
console.log(arg[i]);
}
}
split('Hello');
// split(9527); 这样的调用会出错，因为数值类型没有length属性

• 约束泛型方法

interface CharAtable {
charAt(index: number): string;
}
function getfirstChar<T extends CharAtable>(arg: T): void {
console.log(arg.charAt(0));
}
getfirstChar('Hello'); // 输出H

泛型类

class MaxClass<T> {
list: T[] = [];
add(value: T): void {
this.list.push(value);
}
max(): T {
let maxValue = this.list[0];
for(let value of this.list) {
if(value > maxValue) {
maxValue = value;
}
}
return maxValue;
}
}

• 可以在里面放任意类型的数组，比较大小

let mcNumbers = new MaxClass<number>();
mcNumbers.add(3);
mcNumbers.add(5);
mcNumbers.add(2);
mcNumbers.add(9);
mcNumbers.add(6);
console.log(mcNumbers.max()); // 输出9
let mcNames = new MaxClass<string>();
mcNames.add('Alice');
mcNames.add('Tom');
mcNames.add('Bob');
console.log(mcNames.max()); // 输出Tom