前端学习-TypeScript菜鸟教程-002-TypeScript基础知识

菜鸟教程链接

基本是阅读教程，记笔记大部分为直接复制

基础类型

• any,number,string,boolean,数组(如let x:number[] = [1,2]或let x:Array<number> = [1,2]),元组(let x: [string, number])
• enum

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;

• void : 用于标识方法返回值的类型，表示该方法没有返回值。
• null,undefined
• never
  never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

变量声明

• TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误

let num:number = "hello"  

• 类型断言（Type Assertion）用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

var str = '1' 
// var str2:number = <number> <any> str   //str、str2 是 string 类型
var str2:number = <number> (str as any)   //str、str2 是 string 类型
console.log(str2)

函数

• 函数返回值

function function_name():return_type { 
    // 语句
    return value; 
}

• 带参函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

• 可选参数和默认参数

function buildName(firstName: string, lastName?: string = 'bene') {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确 Bob bene
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确 Bob Adams

• 剩余参数

function addNumbers(...nums:number[]) {  
    var i;   
    var sum:number = 0; 
    
    for(i = 0;i<nums.length;i++) { 
       sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
 } 
 addNumbers(1,2,3)  // 6
 addNumbers(10,10,10,10,10) // 50

• 匿名函数
  可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式

var res = function( [arguments] ) { ... }

• 构造函数

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

• 箭头函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

Map对象

• 创建/初始化Map

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

联合类型

可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

let val:string|number;
let arr:number[]|string[]; 

接口

接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

• 接口定义

interface interface_name { 
}

• 接口属性、方法、使用

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 

• 接口和数组
  接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
 // 类型正确 
agelist["runoob"] = 15  
 
// 类型错误，输出  error TS2322: Type '"google"' is not assignable to type 'number'.
// agelist[2] = "google"

接口继承

• 单接口继承

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

• 多接口继承

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

类

实例

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)   // 读取发动机型号 :  XXSY1
 
// 访问方法
obj.disp()  // 函数中显示发动机型号  :   XXSY1

类的继承

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

class child_class_name extends parent_class_name

类的继承：实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

继承类的方法重写

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。
其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") 
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。")
   } 
}

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。
• protected : 受保护，可以被其自身以及其子类访问。
• private : 私有，只能被其定义所在的类访问。

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的

类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate )

对象

Typescript 中的对象必须是特定类型的实例。

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

泛型

泛型标识符 T、U、V等

泛型函数（Generic Functions）

创建一个可以处理不同类型的函数

function identity<T>(arg: T): T {
    return arg;
}

// 使用泛型函数
let result = identity<string>("Hello");
console.log(result); // 输出: Hello

let numberResult = identity<number>(42);
console.log(numberResult); // 输出: 42

泛型接口（Generic Interfaces）

// 基本语法
interface Pair<T, U> {
    first: T;
    second: U;
}

// 使用泛型接口
let pair: Pair<string, number> = { first: "hello", second: 42 };
console.log(pair); // 输出: { first: 'hello', second: 42 }

泛型类（Generic Classes）

// 基本语法
class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

// 使用泛型类
let stringBox = new Box<string>("TypeScript");
console.log(stringBox.getValue()); // 输出: TypeScript

泛型约束（Generic Constraints）

在这个例子中，定义了一个泛型函数 logLength，它接受一个类型为 T 的参数，但有一个约束条件，即 T 必须实现 Lengthwise 接口，该接口要求有 length 属性。因此，可以正确调用 logLength("hello")，但不能调用 logLength(42)，因为数字没有 length 属性。

// 基本语法
interface Lengthwise {
    length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
    console.log(arg.length);
}

// 正确的使用
logLength("hello"); // 输出: 5

// 错误的使用，因为数字没有 length 属性
logLength(42); // 错误

泛型与默认值

// 基本语法
function defaultValue<T = string>(arg: T): T {
    return arg;
}

// 使用带默认值的泛型函数
let result1 = defaultValue("hello"); // 推断为 string 类型
let result2 = defaultValue(42);      // 推断为 number 类型

TypeScript 命名空间

看完感觉我不是特别理解，先放链接在这里

模块

教程链接

声明文件

声明文件以 .d.ts 为后缀，例如：person.d.ts

// 如何声明（在.d.ts文件中）不包含实现，它只是类型声明
declare module Module_Name {
}

// 把声明文件加入到 TypeScript 中
/// <reference path = " runoob.d.ts" />