Skip to main content

Typescript

· 4 min read
LIU

Typescript​

  • 静态类型风格的类型系统
  • javascript的超集
  • 从es6到es10甚至是esnext的语法支持
  • 类型检查、自动补全类型方法
  • ts的思想就是获得类型
//原始类型

//数组类型
let arrOfNumber : number[] = [1,2,3]

//元组类型
let user : [string,number] = ['viking',20]

//ts中凡事在冒号后面的内容，都是在声明类型，和实际的代码逻辑没有关系
const a1 :(x:number,y:number) => number


interface 接口​

  • 是一个约束
  • 对对象的形状（shape）进行描述
  • Duck Typing（鸭子类型）
// readonly 类似与const，但是它是约束属性
// ? 可选
interface IPerson {
  readonly id: number;
  name: string;
  age?: number;
}

let viking: Person = {
  id: 1,
  name: "custom",
  age: 20,
};

function 函数​

  • 约束输入和输出
function sum(x: number, y: string, z?: number): string {
  return x + y;
}

let res = sum(1, "2");

// 冒号后面都是声明类型
let add2 :(x: number, y: string, z?: number)=> string = sum

// interface 声明函数类型
// 用键值对应输入输出
interface ISum{
    (x: number, y: string, z?: number)：string
}

union types联合类型​

let types : number | string
types = 1
types = 'str'

交叉类型​

interface IName{
    name:string
}
type IPerson = IName & { age:number}
let person:Iperson = { name:'abc',age:10}

as 类型断言​

function get( x:string | number):number{
    let str = x as string
    return str.lengh
}

类​

访问修饰符
//private   只有当前类内部能调用
//protected     只有子类能调用
//readonly  只能读不能写

enum 枚举​

enum Direction{
    up,
    down,
    left,
    right
}
console.log(Direction.down)     // 1
console.log(Direction[2])       // left

内部是通过双向赋值实现

image-20210818164902102

  • 使用常量枚举，可以提升性能

generics 泛型​

  • 可以灵活约束参数的类型
function echo<T>(arg:T):T{
    return arg
}

let a = echo(111)

function ec2 <T,U> (arg:[T,U]):[U,T]{
    return [arg[1],arg[0]]
}

let b = ec2([2,'222'])

约束泛型​

function ec2 <T,U> (arg:[T,U]):[U,T]{
    return [arg[1],arg[0]]
}

let b = ec2([2,'222'])

interface hasLength {
    length:number|string
}

function a1<T extends hasLength>(arg:T):T{
    console.log(arg.length)
    return arg
}

let c = a1([1,2,3])
let d = a1({length:'11'})
let e = a1('555')


// Promise
interface GithubResp {
  data: object;
  code: number;
}

function gitApi<T>(url: string): Promise<T> {
  return fetch(url).then((resp) => resp.json());
}

gitApi<GithubResp>('git.user').then(resp => {

})

在 类 和 接口（interface）中的应用​

  • 创建一个拥有特定类型的容器
//类
class Queue<T> {
  private data = [];
  push(item:T) {
    return this.data.push(item);
  }
  pop() {
    return this.data.pop();
  }
}

let f = new Queue<number>()     //
let g = f.push(111)
//接口
interface test<T,U>{
    num:T,
    num2:U
}

let h :test<number,string> = {num:1,num2:'abc'}
let i :test<string[],number> = {num:['a,b'],num2:111}

// 两种写法
let j :number[] = [1,2,3]
let k :Array<number> = [2,4]

类型别名​

  • 灵活，宽泛
  • 创建一个简单的写法
let sum : (x:number, y:number) => number
const res = sum(1,2)
//
type plus = (x:number, y:number) => number
let sum2:plus
const res2  = sum2(2,3)
//
const str:'name' = 'name'
const num: 1 = 1
type dir = 'up' | 'down' | 'left'
let where :dir = 'up'
//
//交叉类型
interface IName{
    name: string
}
type IPerson = IName & {age:number}
let person:IPerson = {name:'1',age:2}

声明文件​

  • 声明语句一般放在 .d.ts 文件中
// jQuery.d.ts
// declare 并不是声明一个变量，只是定义一个变量的类型，只是用于编译时候的检查
declare var jQuery:(selector:string)=>any

针对不同库，社区有对应的声明文件，可直接安装，或者本身已经包含

内置类型​

  • 提供一些方便的功能

image-20210818202619695