How to use TypeScript

从嘉
前端工程师

Press Space for next page

What is TypeScript

Why TypeScript

静态类型检查
类型即文档

How to use TypeScript

显式定义类型
也可以是隐式的
结构化类型定义

interface Point2D {
	x: number;
  y: number;
}

interface Point3D {
	x: number;
  y: number;
  z: number;
}

const point2D: Point2D = {x: 10, y: 10}
const point3D: Point3D = {x: 20, y: 20, z: 20}

function takePoint2D(point: Point2D){}

takePoint2D(point2D) 
takePoint2D(point3D)  
takePoint2D({x: 30})

Other Type

any
unknown
never
枚举
元组

enum Status {
  Success = 200,
  NotFound = 404,
  Error = 500
}

const enum Animal {
  Dog,
  Cat
}

Function

interface
type
?
重载

function add(arg1: number, arg2: number): number {
  return x + y;
}
interface Add {
  (x: number, y: number): number;
}
type Add = (x: number, y: number) => number;

let add: Add = (arg1: string, arg2: string): string => arg1 + arg2; 



const handleData = (x: string): number;
const handleData = (x: number): string;
const handleData = (x: null): number;
const handleData = (x: string | number | null): any => {
  if (typeof x === 'string') {
    return Number(x);
  }
  if (typeof x === 'number') {
    return String(x);
  }
  return -1;
};
handleData(123)   
handleData("123") 
handleData(false)

Class

继承
访问修饰符
只读 & 可选 & 抽象
class type
interface

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

class B extends A {
  job: string;
  constructor(name: string, age: number) {
      super(name, age);
      this.job = "IT";
  }
  getJob() {
      return this.job;
  }
  getNameAndJob() {
      return super.getName() + this.job;
  }
}

Interface

interface Vegetables {
  color?: string;
  type: string;
}

const getVegetables = ({ color, type }: Vegetables) => {
  return `A ${color ? color + " " : ""}${type}`;
};

getVegetables({
  type: "tomato",
  size: "big"     // 'size'不在类型'Vegetables'中
});

泛型

在函数中使用泛型
在类中使用泛型
在自定义类型中使用泛型

function pickObjectKeys<T, K extends keyof T>(obj: T, keys: K[]) {
  let result = {} as Pick<T, K>
  for (const key of keys) {
    if (key in obj) {
      result[key] = obj[key]
    }
  }
  return result
}

const language = {
  name: "TypeScript",
  age: 8,
  extensions: ['ts', 'tsx']
}

const ageAndExtensions = pickObjectKeys(language, ['age', 'extensions'])

类型编程

type SomeType = {
  a: {
    b: {
      c: number;
      d: number;
    };
    e: number;
  };
  f: number;
}

type NestedOmit<T extends Record<string, any>, KeysToOmit extends string> =
  KeysToOmit extends `${infer KeyPart1}.${infer KeyPart2}`
    ?
      KeyPart1 extends keyof T
      ?
        Omit<T, KeyPart1>
        & {
          [NewKeys in KeyPart1]: NestedOmit<T[NewKeys], KeyPart2>
        }
      : T
    : Omit<T, KeysToOmit>;
type Result = NestedOmit<SomeType, 'a.b.c'>