学习笔记——TypeScript基础语法与面向对象

火星飞鸟
636 阅读7分钟

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

1. typescript基础语法

1. 类型声明

  • 类型声明是 TS 非常重要的一个特点
  • 通过类型声明可以指定 TS 中变量（参数、形参）的类型
  • 指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

语法：

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

2. 自动类型判断

  • TS 拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

3. 类型

类型例子描述
number1, -33, 2.5任意数字
stringhi任意字符串
booleantrue、false布尔值 true 或 false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的 any
void空值（undefined）没有值（或 undefined）
never没有值不能是任何值
object{name:'孙悟空'}任意的 JS 对象
array[1,2,3]任意 JS 数组
tuple[4,5]元素，TS 新增类型，固定长度数组
enumenum{A, B}枚举，TS 中新增类型
  • number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
  • boolean
let isDone: boolean = false;
  • string
let color: string = 'blue';
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

  • 字面量

    也可以使用字面量去指定变量的类型，通过字面量可以确定变量的。

    |表示联合类型，或

let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

  • any

    表示的是任意类型，一个变量设置类型为 any 后相当于对该变量关闭了 TS 的类型检测

    any 类型的变量，可以赋值给其他变量，但也将其他变量变为了 any

    声明变量如果不指定类型，则 TS 解析器会自动判断变量的类型为 any （隐式的 any）

    尽量不使用 any

let d: any = 4;
d = 'hello';
d = true;

  • unknown

    表示未知类型的值

    不能赋值给其他类型的变量

    加了类型判断，就可以赋值

let e: unknown;
if (typeof e === 'string') {
    s = e;
}

  • void

    函数的返回值为空

    若没有设定函数返回值类型，自动判断返回值的类型

let unusable: void = undefined;

  • never

    函数永远没有返回值

function error(message: string): never {
    throw new Error(message);
}

  • object

    {}用来指定对象中可以包含哪些属性

    语法：{属性名:属性值,属性名:属性值}

    在属性名后边加上?，表示属性是可选的

    [propName: string]: any 表示任意类型的属性

let obj: object = {};

  • tuple

    固定长度的数组

    [类型, 类型, 类型.....]

let x: [string, number];
x = ['hello', 10];
  • enum
enum Color {
    Red,
    Green,
    Blue,
}
let c: Color = Color.Green;

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

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

  • 类型断言

    有些情况下，变量的类型对于我们来说是很明确，但是 TS 编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

let someValue: unknown = 'this is a string';
let strLength: number = (someValue as string).length;

let someValue: unknown = 'this is a string';
let strLength: number = (<string>someValue).length;
  • 函数结构类型声明
let d: (a: number, b: number) => number;
// 声明d是一个函数：有两个都是number的参数，返回值为number

2. typescript面向对象

1. 定义类

类的属性：

  • 实例属性：直接定义的属性，通过对象的实例访问
  • 静态属性（类属性）：static开头，无需创建实例，通过类去访问
  • 只读属性：readonly开头，无法修改

类的方法：

  • 实例方法：直接定义的方法
  • 类方法：static开头，通过类去访问
class Person {
    // 直接定义的属性
    age = 18;
    // 静态属性（类属性）
    static gender = 'man';
    // 只读属性
    readonly name = 'Jack';

    // 实例方法
    sayHello() {
        console.log('Hello!');
    }

    // 类方法
    static sayHi() {
        console.log('Hi!');
    }
}

const Jack = new Person();

console.log(Jack.name);
console.log(Jack.age);
console.log(Person.gender);

Jack.sayHello();
Person.sayHi();

2. 构造函数

constructor()被称为构造函数，构造函数会在创建实例对象时自动调用。

  • 在实例方法中，this表示当前当前的对象实例

  • 在构造函数中，当前对象就是当前新建的对象

  • 可以通过this向新建的对象中添加属性

class Dog {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    bark() {
        console.log(this.name);
    }
}

const dog = new Dog('小黑', 2);
const dog2 = new Dog('小白', 3);

dog.bark(); // 小黑
dog2.bark(); // 小白

3. 继承

  • 使用关键字extends实现继承
  • 子类将会拥有父类所有的方法和属性
  • 可以在子类中添加父类没有的属性和方法
  • 重写：子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
  • 在类的方法中，super表示当前类的父类
  • 若子类中写了构造函数，必须在子类构造函数中手动对父类的构造函数进行调用（super表示父类）
// 父类
class Animal {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log('动物叫~');
    }
}

// 子类：狗
class Dog extends Animal {
    sayHello() {
        console.log('wang wang~');
        // super就表示当前类的父类
        super.sayHello();
    }
}

// 子类：猫
class Cat extends Animal {
    gender: string;

    constructor(name: string, age: number, gender: string) {
        // 手动调用父类的构造函数，参数为name, age
        super(name, age);
        this.gender = gender;
    }

    run() {
        console.log(`${this.name}在跑！`);
    }
    sayHello() {
        console.log('miao miao~');
    }
}

const dog = new Dog('柯基', 2);
const cat = new Cat('布偶', 4, '雌');

dog.sayHello();
// wang wang~
// 动物叫~

console.log(cat); // Cat { name: '布偶', age: 4, gender: '雌' }
cat.run(); // 布偶在跑！

4. 抽象类、抽象方法

  • 以abstract开头的类是抽象类
  • 抽象类不能用来创建对象，是专门用来被继承的类
  • 抽象类中可以添加抽象方法，以abstract开头，没有方法体
  • 抽象方法只能定义在抽象类或接口中，子类必须对抽象方法进行重写
abstract class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
    abstract sayHello(): void;
}

class Dog extends Animal {
    age: number;

    constructor(name: string, age: number) {
        super(name);
        this.age = age;
    }
    sayHello() {
        console.log(`我是${this.name}`);
    }
}

const dog = new Dog('旺财', 2);
dog.sayHello(); // 我是旺财

5. 接口

  • 接口interface用来定义一个类结构，规定应该包含的属性和方法

  • 也可以当成类型声明去使用

  • 接口中的所有的属性都不能有实际的值，只定义对象的结构

  • 接口中所有的方法都是抽象方法

  • 定义类时，可以使类去实现一个接口

    class 类名 implements 接口名{}

// 定义接口
interface myInterface {
    name: string;
}

// 补充这个接口
interface myInterface {
    age: number;
    sayHello(): void;
}

class Person implements myInterface {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHello() {
        console.log('Hello~');
    }
}

6. 属性封装

属性修饰符

对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装。定义类时，可以在属性前添加属性的修饰符：

  • public：公有属性，可以在任意位置访问（修改），默认值
  • private：私有属性，只能在类内部进行访问（修改），但外部可以利用类的方法访问私有属性
  • protected：受保护的属性，只能在当前类和当前类的子类中访问（修改）

可以直接将属性定义在构造函数中，以下两端代码等价：

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class Person {
    constructor(public name: string, public age: number) {}
}
// public不能忘记

属性存取器

  • 对于一些不希望被任意修改的属性，可以将其设置为private
  • 直接将其设置为private将导致无法再通过对象修改其中的属性
  • 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
  • 读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
class Person {
    private age: number;
    constructor(_age: number) {
        this.age = _age;
    }
    get _age() {
        return this.age;
    }
    set _age(value) {
        if (value > 0) {
            this.age = value;
        }
    }
}

const Tom = new Person(12);
// “age”为私有属性，只能在类“Person”中访问
// 所以访问的是 _age
Tom._age = 18; // 可以更改
console.log(Tom._age); // 18
Tom._age = -18; // 不满足条件，无法更改
console.log(Tom._age); //  18

7. 泛型

在定义函数或类时，如果遇到类型不明确就可以使用泛型。

function fn<T>(a: T): T {
    return a;
}

// 可以直接调用具有泛型的函数
let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>('hello'); // 指定泛型

// 泛型可以同时指定多个
function fn<T, K>(a: T, b: K): T {
    console.log(b);
    return a;
}
fn<number, string>(123, 'hello');

// 定义类时可以使用泛型
class MyClass<T> {
    name: T;
    constructor(name: T) {
        this.name = name;
    }
}
const Person = new MyClass<string>('Jack');

interface Inter {
    length: number;
}

// T extends Inter 表示泛型T必须是Inter实现类（子类）
function fn<T extends Inter>(a: T): number {
    return a.length;
}
avatar
文章
阅读
粉丝