清风逐月 | 我思故我在
2022-12-05 | 学习笔记 | UNLOCK | 更新时间:2022-12-5 14:8

TypeScript的学习笔记

TypeScript是JavaScript的超集，它可以编译成纯JavaScript。它的特点。始于JavaScript，终于JavaScript，强大的工具构建 大型应用程序，先进的 JavaScript。

简单安装

全局安装TypeScript

npm install -g typescript || yarn add global typescript

拥有特点

类型推断：不需要指定变量的类型（函数的返回值类型），TypeScript可以根据某些规则自动地为其推断出一个类型
类型检查：TypeScript编译器在为相关代码中的变量的类型（函数的返回值类型）做出检查动作

功能介绍

类型注解

  • 基础类型 :string
// 原始类型 string number boolean null undefined symbol
let aaa: string = "字符串";
let bbb: boolean = false;
let ccc: number = 123;
let ddd: null = null;
let fff: undefined = undefined;
let eee: symbol = symbol(123)

// 复杂类型
let aaa: number[] = [1, 2, 3];
let bbb: Array<number> = [1, 2, 3];

let aaa: any = 4; // any：代表所有类型。即不确定
let bbb: void = undefined; // void：表示没有任何类型 只能是null，undefined
  • 类型断言 as string
let someValue: any = "this is a string";

// 类型断言：我知道someValue是string，不用管
let strLength: number = (<string>someValue).length;  // 尖括号语法
let strLength: number = (someValue as string).length;// as语法

interface SquareConfig {
    color?: string;
    width?: number;
}
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig); // SquareConfig 可以有任意数量的属性

** 当你在TypeScript里使用JSX时，只有 as语法断言是被允许的 **

接口

  • 简单接口 interface
// 接口，用来描述对象
interface Person {
    firstName: string
    lastName: string
    aaa?:number // 可选属性
    readonly bbb: number; //只读属性
}

let user = { firstName: "Jane", lastName: "User" };
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
document.body.innerHTML = greeter(user);
  • 只读属性 readonly
interface Person {
    readonly bbb: number; //只读
}

let p1: Point = { x: 10, y: 20 };  //只读

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a; //只读
  • 接口继承 extends
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

类

  • 简单示例 class
// class类，可以和接口一起使用
class Student {
    fullName: string
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    private _fullName: string; //私有属性
    get fullName(): string(){
      return this._fullName;
    }
    set fullName(newName: string){
      this._fullName = newName;
    }
}

let user = new Student("Jane", "M.", "User");
  • 继承 extends
class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

// Dog 类 继承了 Animal
class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
  • 公有 public
class Animal {
    aaa: number; //默认为公有
    public bbb: string;  // public 公有
    // ...
}
  • 私有 private
class Animal {
    private ccc: string; // private 私有
    // ...
}
  • 受保护的 protected
class Animal {
    protected fff: string;//protected 受保护的;和私有类似，但是可以被继承
    // ...
}

函数

  • 简单示例 function 
function add(x: number, y: number): number { //返回类型
    return x + y;
}
// 函数类型包含参数类型和返回类型
let myAdd = function(x: number, y: number): number { return x + y; };
let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; };
  • 函数重载
function add(x:number){
  return x + 1
} 
function add(x:string){
  return x + "1"
}

//在调用相关函数的时候会一个个去匹配，直到找到那个合适的
add(54)

泛型

  • 简单示例 <T> :T
// 通过类型变量T ，得知函数返回类型也是T ，和传入参数的类型一样
function identity<T>(arg: T): T {
    return arg;
}
  • 泛型约束 T extends
interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // 传入的类型必须满足接口属性
    return arg;
}

枚举

  • 简单枚举 enum
// 数字枚举：从1开始，自增加，不设置则默认0 开始
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

// 字符串枚举
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

高级类型

  • 交叉类型 T & U
// 函数返回参数 既可以是T 也可以是U , 取二者的并集
function extend<T, U>(first: T, second: U): T & U {
    let result = <T & U>{};
    for (let id in first) {
        (<any>result)[id] = (<any>first)[id];
    }
    for (let id in second) {
        if (!result.hasOwnProperty(id)) {
            (<any>result)[id] = (<any>second)[id];
        }
    }
    return result;
}
  • 联合类型 string | number
//和交叉类型相似，但不相同，取二者的其中一个

function padLeft(value: string, padding: string | number) {
    // ...
}
  • 类型保护 pet is Fish

由于特定的方法或属性和方法可能是某个类型的独有，这个给时候就需要类型保护来防止错误,可以通过以下方法实现

类型断言 xxx as string

let aaa = "字符串"
console.log(aaa as string)

in语法 xxx in XXX

var aaa=1;bbb=[1,2,3]
if(aaa in bbb){
    console.log('hello')
}

type语法 typeof xxx === xxx

var aaa = 1
if(typeof aaa === 'number'){
    console.log('this is number')
}

字面量类型

function isFish(pet: Fish | Bird): pet is Fish {
    return (<Fish>pet).swim !== undefined;
}

配置介绍

tsconfig.json
{
   "compilerOptions": {
       "typeRoots" : ["./typings"],  // typeRoots：只有列出目录下的包才会使用
       "types" : ["node", "lodash", "express"], // types：只有列出来的包才会使用
       "include": [ "src/**/*" ],    // 使用"include"引入的文件可以使用"exclude"属性过滤
       "exclude": ["dist", "node_modules"] //
   }
}
TypeScript