[深入浅出TypeScript | 青训营笔记]

我是个靓崽
99 阅读4分钟

一.为什么要学习TS

ts的特性

  • ts是js的超集，可以用于解决大型项目的代码复杂性
  • ts是强类型语言，支持静态和动态类型
  • ts可以在编译期间就发现并纠正错误
  • ts不允许改变变量的数据类型
TS与JS的特点

tsVjs.png

ts带来了什么

ts不仅仅是一门语言，更是一个生产力工具，他带来了：

  • 类型安全，和java、c++一样
  • 支持下一代的特性
  • 他有完善的工具栏

二.TS基础

基础类型

在ts中基础类型主要用于声明一个值或变量的类型，用于标识这个值或者变量的类型

  1. boolean：布尔类型，表示true或false。
  2. number：数字类型，表示整数或浮点数。
  3. string：字符串类型，表示一串字符。
  4. 枚举 enum：表示一组有名字的常量。
  5. any：任意类型，表示可以是任何类型，允许被赋值也允许被反向赋值
  6. unknown：和 any 类似，但 unknown 只允许被赋值
  7. void：空类型，表示没有返回值的函数
  8. nerver：永远不存在的类型，表示不会返回任何值的函数或抛出异常的函数
  9. 数组：表示一个数组，可以使用泛型来指定数组元素的类型
  10. 元组：表示一个固定长度的数组，可以指定每个元素的类型

函数类型

ts函数类型时需要定影输入的参数类型和输出的类型

函数类型的输入参数支持可选参数和默认参数，输出类型可以自动推断，没有返回值时默认为 void。

function add(x: number[]): number
function add(x: number[] = [1, 2]): number
function add(x: number[], y?: number[]): number
复制代码

函数重载是指可以对同名函数进行多次定义，ts会自动匹配对应的函数定义进行解析

interface

interface 用于定义对象类型，对象类型是对键值对的描述。

interface 支持可选属性、只读属性、可以用于描述函数类型、也可以描述自定义属性

interface Info {
    id: number;
}
interface Person {
    readonly name: string; // 只读属性
    age: number;
    height?: number; // 可选属性
    info: Info; // 自定义属性
}
复制代码

类

ts中类的写法和js差不多，增加了一些修饰符：public、private、protected等；且只能被继承，不能被实例化；作为积累，抽象方法必须被子类继承。

  1. public：公共访问权限，可以在类的内部和外部访问。
  2. private：私有访问权限，只能在类的内部访问。
  3. protected：受保护的访问权限，可以在类的内部和子类中访问。
class Person {
    public name: string;
    private age: number;
    protected gender: string; 
    constructor(name: string, age: number, gender: string) { 
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm a ${this.gender}.`);
    }
}
class Student extends Person {
    study() {
        console.log(`${this.name} is studying.`);
    }
}
let person = new Person("Alice", 30, "female"); 
person.sayHello(); // 输出Hello, my name is Alice, I'm 30 years old, and I'm a female. 
console.log(person.age); // 报错，无法访问私有属性age 
console.log(person.gender); // 报错，无法访问受保护属性gender 
let student = new Student("Bob", 18, "male");student.sayHello(); // 输出Hello, my name is Bob, I'm undefined years old, and I'm a male. 
student.study(); // 输出Bob is studying. 
console.log(student.gender); // 报错，无法访问受保护属性gender
复制代码

三.TS进阶

高级类型

  1. 联合类型: 一种类型组合的机制，可以表示一个值可以是多种类型中的一种。可以使用|符号来定义联合类型。
  2. 交叉类型: 一种类型组合的机制，可以表示一个值具有多种类型的属性和方法。可以使用&符号来定义交叉类型.
  3. 类型断言: 一种声明指定类型的机制，用 as 来进行标识。
  4. 类型别名: 一种给类型起别名的机制。和interface类似，但type可以定义基本类型，interface不行；interface 可以合并重复类型，type 不行。
  5. 泛型：泛型是一种参数化类型的机制，临时占位用。可以在定义函数、类、接口等时使用；提高代码的复用性和可读性。可以使用尖括号<>来定义泛型类型参数。
let num: number | string; // 联合类型
interface Person {
    name: string;
    age: number;
}
let Student: Person & { gender: string }; // 联合类型

// 类型断言
let a;
let b = (a as Person);

// 类型别名
type Point = {
    x: number;
    y: number;
}
let point: Point = {
    x: 1,
    y: 2,
};
// 泛型
function print<T>(arg: T): T {
    console.log(arg);
}
print<string>('hello') // 指定 T 为 string
print('hello') // ts自动推导 T 为 string
复制代码

操作符

  1. typeof：获取类型
  2. keyof：获取所有的键
  3. in：遍历枚举类型
  4. T[k]：索引访问
  5. extends：泛型约束
interface Person {
    name: string;
    age: number;
}
type sem: Person = { name: 'a', age: 18 };
type Sem = typeof sem; // type Sem = Person

type K1 = keyof Person; // 'name' | 'age'

type Keys = 'a' | 'b' | 'c';
type Obj = {
    [k in Keys]: any
}

let type1 = Person['name']

复制代码

四.实战&工程向

声明文件

  • 可以通过declare进行声明
  • 通过 .d.ts 声明文件定义
  • 可以通过 @type 使用第三方库的类型包
  • 通过tscongig.josn 定义ts的配置
avatar
文章
阅读
粉丝