Typescript笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44173943/article/details/125748146

基本命令

tsc -v查看版本号

tsc **.ts编译ts文件为js文件

cat 文件名读取文件内容(windows、linux通用)

基本用法

变量声明

let 变量名: 变量类型 = 值

数据类型

布尔boolean、字符串string、数字number、undefined、null、任意any

元组和数组

数组

let 数组名: 类型[] = []

元组tuple

限定数据类型和数组长度的数组。

let 元组名: [type1, type2, ...] = [value1, value2, ...	]

接口Interface

TypeScript 的核心原则之一是类型检查侧重于值的形状。

interface 接口名 {
  readonly 属性: type; // 只读属性
  属性名1: type1； // 必选属性
  属性名2?: type2； // 可选属性
}

let 实例: 接口名 = {
  属性名1: value1
}

只读属性：只能在第一次创建对象时才能修改。

声明函数类型方法：

interface 函数类型名 {
  (参数名: type, ...): 返回值类型
}

没有返回值，返回值类型可以使用void。

函数Function

使用

// 方法1
function 函数名 (参数名: 类型): 返回值类型 {
  
}
// 方法2
const 函数名 = (参数名: 类型): 返回值类型 => {
  
}

由使用方法1可以看出，函数的输入输出都可以设置数据类型。

由使用方法2可以看出，函数也是一种类型。

const add = (x: number, y: number, z?: number): number => {
    if(z) {
        return x + y
    }else {
        return x
    }
}

// 示范1
let add2: string = add // error
// 示范2
let add2: (x: number, y: number, z?: number) => number = add //success
// 示范3 增加使用接口声明函数类型
const add = (x: number, y: number, z?: number): number => {
    if(z) {
        return x + y
    }else {
        return x
    }
}
interface ISum {
    (x: number, y: number, z?: number): number
}
let add2: ISum = add

类型推断、联合类型、交叉类型和类型断言

类型推断

let num = 1

其本质上是let num: number = 1，内部已经帮我们完成了这件事。

联合类型

有时并不知道传入的值类型是什么，只知道我需要哪几种类型。由此出现了联合类型，输入的数据类型只能是其中之一，否则编译报错。

// 变量声明
let numOrStr: number | string

此时numOrStr只能使用number类型和string类型共有的方法和属性。

交叉类型

当需要传入的类型是几种类型的集合，就可以使用交叉类型。

interface IName {
    name: string
}

type numberAndName = IName & { age: number }
let obj: numberAndName = {
    name: '123',
    age: 999
}

此时变量obj不仅要有name属性，还要有age属性。

类型断言

告诉typescript 编译器，我知道类型是什么。注意，这并不是类型转换！！！

numOrStr as 类型名

例子

const num = numOrStr as number

类型守卫

typeof类型守卫

// 变量声明
let a: number | string
// 假装已经输入a，但是我们不知道
if(typeof a === 'string') {
  // 此时a可以使用string的方法
  a.length
} else {
  // 此时a可以使用number的方法
  a.toString()
}

类

访问修饰符

public（默认）、private、protected

public：公开的，啥都可。
private：私有的，只有本类里可使用。
protected：保护的，只有本类以及子类里可使用。

实现接口

implements关键字实现接口。

接口可以继承接口
一个类可以实现多个接口

枚举

定义一些带名字的常量，它们都是只读的。

数字枚举

enum Direction {
  Up, // Direction[0]
  Down, // Direction[1]
  Left = 6, // Direction[6]
  Right // Direction[7]
}

默认第一个常量从0开始，依次递增。

如果对其中的常量重新赋值数值类型，则前面不动，后面依次递增。

访问

支持反向映射。

下标

Direction[num]

打点

Direction.常量名

字符串枚举

enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left  = 'LEFT',
    Right = 'RIGHT'
}

访问

Direction.Up

不支持反向枚举。

常量枚举

const enum Direction {
  // do something
}

区别于普通的枚举，仅仅在于将ts翻译为js代码时，不会真正的创建枚举属性的数组，而是将使用到的属性值直接参与代码。

普通枚举翻译后代码

var Direction;
(function (Direction) {
    Direction["Up"] = "UP";
    Direction["Down"] = "DOWN";
    Direction["Left"] = "LEFT";
    Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));
console.log(Direction.Up === 'UP');

常量枚举翻译后代码

console.log("UP" /* Up */ === 'UP');

泛型Generics

定义函数、接口或类时，不预先指定具体类型，在使用的时候再指定具体类型。

// 函数
function identity<T>(arg: T): T {
	return arg;
}
// 接口
interface KeyPair<T, U> {
    key: T;
    value: U
}
// 类
class Queue<T> {
    private data: Array<T> = []; // Array是内置接口
    push(item: T) {
        return this.data.push(item)
    }
    pop(): T {
        return this.data.shift() as T
    }
}

约束泛型

使T继承参与约束的接口，示例如下。

interface IWithLength {
  length: number
}

function identity<T extends IWithLength>(arg: T): T {
  // 传入的参数arg必须拥有length属性。
  return arg;
}

类型别名type aliase

用法

// 定义
type 别名 = ...

例子

// 类型别名
type stringOrNumber = string | number
let a: stringOrNumber = 1
// 常量别名
type directions = 'left' | 'right' | 'up' | 'down'
let d: directions = 'left'

声明文件

第三方库在ts中使用时，需要声明文件。

declare ** 别名 **

第三方库.d.ts搜索：https://www.typescriptlang.org/dt/search?search=

相关规范整合：https://github.com/DefinitelyTyped/DefinitelyTyped

内置类型

Array、document、Math、Partial（可选所有属性）、Omit（忽略某属性），示例如下：

interface IPerson {
    name: string
    age: number
}
let boen: IPerson = { name: 'Boen', age: 50} // name、age必选属性

type IPartial = Partial<IPerson> 
type IOmit = Omit<IPerson, 'age'>


let a:IPartial = {} // 使用Partial类指定IPerson类型后，所有属性可选，ts不报错。
let b:IOmit = {name: '123'} // 使用Omit类指定IPerson类型和字面量age后，age属性被忽略，ts不报错。