天天看点

Typescript笔记未完待续…

基本命令

tsc -v

查看版本号

tsc **.ts

编译ts文件为js文件

cat 文件名

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

基本用法

变量声明

let 变量名: 变量类型 = 值	
           

数据类型

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

元组和数组

数组

元组tuple

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

接口Interface

TypeScript 的核心原则之一是类型检查侧重于值的形状。
interface 接口名 {
  readonly 属性: type; // 只读属性
  属性名1: type1; // 必选属性
  属性名2?: type2; // 可选属性
}

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

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

声明函数类型方法:

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

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

函数Function

使用

// 方法1
function 函数名 (参数名: 类型): 返回值类型 {
  
}
// 方法2
const 函数名 = (参数名: 类型): 返回值类型 => {
  
}
           
  1. 由使用方法1可以看出, 函数的输入输出都可以设置数据类型。
  2. 由使用方法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: 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 类型名
           

例子

类型守卫

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.常量名
           

字符串枚举

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');
           

常量枚举翻译后代码

泛型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

中使用时,需要声明文件。

第三方库

.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不报错。
           

未完待续…