TypeScript 笔记 ​

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

enum Color {
  red, // 默认为0
  green,
  blue,
}

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

enum Color {
  Red,
  Blue,
  Green,
}

let color = Color.Blue;

// 会被编译成

var Color;
(function (Color) {
  Color[(Color['Red'] = 0)] = 'Red';
  Color[(Color['Blue'] = 1)] = 'Blue';
  Color[(Color['Green'] = 2)] = 'Green';
})(Color || (Color = {}));
var color = Color.Blue;

const enum Color {
  Red,
  Blue,
  Green,
}

let color = Color.Blue;

// 会被编译成

var color = 1; /* Blue */

let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed
// you know the environment better than TypeScript.
obj.foo();
obj();
obj.bar = 100;
obj = 'hello';
const n: number = obj;

function foo(a: unknown) {
  a.split(''); // Object is of type 'unknown'
}

function foo(a: unknown) {
  if (typeof a === 'string') {
    a.split('');
  }
}

function bar(): never {
  throw new Error('xxx');
}

function bar(): never {
  while (1) {}
}

function printId(id: number | string) {
  console.log(id.toUpperCase());
  // Property 'toUpperCase' does not exist on type 'string | number'.
  //Property 'toUpperCase' does not exist on type 'number'.
}

function printId(id: number | string) {
  if (typeof id === 'string') {
    // In this branch, id is of type 'string'
    console.log(id.toUpperCase());
  } else {
    // Here, id is of type 'number'
    console.log(id);
  }
}

type WindowStates = 'open' | 'closed' | 'minimized';
type LockStates = 'locked' | 'unlocked';
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

function greet(person: { name: string; age: number }) {
  return 'Hello ' + person.name;
}

interface Person {
  readonly name: string;
}

interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}

interface AddressWithUnit extends BasicAddress {
  unit: string;
}

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

interface ColorfulCircle extends Colorful, Circle {}

const cc: ColorfulCircle = {
  color: 'red',
  radius: 42,
};

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

interface Alarm {
  price: number;
}
interface Alarm {
  weight: number;
}

相当于;

interface Alarm {
  price: number;
  weight: number;
}

type StringNumberPair = [string, number];

//使用
let p: StringNumberPair = ['1', 1];

//方式一
function doSomething(pair: readonly [string, number]) {
  pair[0] = 'hello!'; // Cannot assign to '0' because it is a read-only property.
}

//方式二
const red: ReadonlyArray<number> = [255, 0, 0];

//方式三
const red: Readonly<number[]> = [255, 0, 0];

let point = [3, 4] as const;

function sum(x: number, y: number): number {
  return x + y;
}

// 错误写法
let mySum = function (x: number, y: number): number {
  return x + y;
};

// 正确写法
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};

type foo = () => void;

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc = function (source: string, subString: string) {
  return source.search(subString) !== -1;
};

function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

function buildName(firstName: string = 'Tom', lastName: string) {
  return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

function push(array: number[], ...items: number[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

//元组类型的剩余参数
function f(...args: [boolean, number]) {}

常规元组类型，示例如下：
function f0(...args: [boolean, number]) {}
// 等同于：function f1(args_0: boolean, args_1: number) {}
带有可选元素的元组类型，示例如下：
function f0(...args: [boolean, string?]) {}
// 等同于：function f1(args_0: boolean, args_1?: string) {}
带有剩余元素的元组类型，示例如下：
function f0(...args: [boolean, ...string[]]) {}
// 等同于 function f1(args_0: boolean, ...args_1: string[]) {}

function f0([x, y]: [number, number]) {}
f0([0, 1]);

function f1({ x, y }: { x: number; y: number }) {}
f1({ x: 0, y: 1 });

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

declare const F: {
  new (x: number): Number; // <- 构造签名
  (x: number): number; // <- 调用签名
};
// 作为普通函数调用
const a: number = F(1);
// 作为构造函数调用
const b: Number = new F(1);

function foo(this: { name: string }) {
   this.name = 'Patrick';
}

值 as 类型;

function liveDangerously(x?: number | null) {
  // No error
  console.log(x!.toFixed());
}

liveDangerously(); // TypeError: Cannot read property 'toFixed' of undefined

declare var jQuery: (selector: string) => any;

function identity0(arg: any): any {
  return arg;
}
// 相当于type T = arg的类型
function identity<T>(arg: T): T {
  return arg;
}
identity<string>('玩转vue 3全家桶'); // 这个T就是string，所以返回值必须得是string
identity<number>(1);

function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

function identity<T>(arg: T): T {
  return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

// 定义泛型接口
interface Identity<T> {
  attr: T;
}

// 用真实类型替换泛型接口的类型变量
// Identity<number>作为一个整体相当于一个接口名
let a: Identity<number> = { attr: 10 };
// Identity<string>作为一个整体相当于一个接口名
let b: Identity<string> = { attr: 'hello' };

// 错误，类型不匹配，数字10是数字类型，而类型变量为布尔类型
// error TS2322: Type 'number' is not assignable to type 'boolean'.
let c: Identity<boolean> = { attr: 10 };

// 一个复杂点的例子
function fn() {}
let c: Identity<typeof fn> = {
  attr() {},
};

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

function createArray<T = string>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

type Point = {
  x: number;
  y: number;
};

type ID = number | string;

type T = T; // 编译错误！类型别名 'T' 存在循环的自身引用

type T0 = { name: T0 };
type T1 = () => T1;
type T2 = new () => T2;

type T0 = Array<T0>;

type T1 = T1[];

type T3 = [number, T3];

interface A<T> {
  name: T;
}
type T0 = A<T0>;

class B<T> {
  name: T | undefined;
}
type T1 = B<T1>;

const recursiveData = [
  {
    name: 'First',
    children: [
      {
        name: 'Second',
        children: [
          {
            name: 'Third',
            children: [
              {
                name: 'Fourth',
                children: [
                  {
                    name: 'Fifth',
                    children: [
                      // On and on...
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];

type RecursiveObject = {
  name: string;
  children?: RecursiveObject[];
};

type RecursiveObjects = RecursiveObject[];

interface RecursiveObject {
  name: string;
  children?: RecursiveObject[];
}

// and reference it as
const recursiveData: RecursiveObject[];

type NumericType = number | bigint;

interface Circle {}
interface Rectangle {}

type Shape = Circle | Rectangle; // 表示 Shape 是Circle类型，或者是 Rectangle类型

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle; //Shape 既是Colorful 类型，又是Circle类型（也就是类型合并了起来）

// 相当于

interface XXX {
  color: string;
  radius: number;
}

keyof Type

type Point = {
  x: number;
  y: number;
};

type P = keyof Point; // "x" | y"

T[K];

type T={a：boolean； b：string}

type T={x：boolean； y：string}

type Kx='x'；
type TO=T[Kx] ； //boolean

type Ky='y'
type T1=T[Ky] ； //string

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

interface Circle {
  kind: 'circle';
  radius: number;
}

function f(circle: Circle) {
  // 正确，能够推断出 radius 的类型为 'circle' 类型
  const kind = getProperty(circle, 'kind');

  // 正确，能够推断出 radius 的类型为 number 类型
  const radius = getProperty(circle, 'radius');

  // 错误
  const unknown = getProperty(circle, 'unknown');
  //                                   ~~~~~~~~~
  // 编译错误：'unknown'类型不能赋值给'kind' |'radius'
}

// 类型 ExtendsType，接受泛型参数 T 后，通过判断 T 是不是布尔值来返回不同的类型字符串
type ExtendsType = T extends boolean ? 'number' : 'string | void';

// 下面的代码中我们通过 k in Courses 语法，相当于遍历了 Courses 所有的类型作为 CourseObj 的属性，值的类型是 number。
type Courses = '玩转Vue 3' | '重学前端';
type CourseObj = {
  [k in Courses]: number; // 遍历Courses类型作为key
};
// 上面的代码等于下面的定义
// type CourseObj = {
//     玩转Vue 3: number;
//     重学前端: number;
// }

// 示例1：使用infer来推断函数的返回值类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

type func = () => number;
type variable = string;
type funcReturnType = ReturnType<func>; // funcReturnType 类型为 number
type varReturnType = ReturnType<variable>; // varReturnType 类型为 any

// 示例2：infer P 表示待推断的函数参数
type ParamType<T> = T extends (arg: infer P) => any ? P : T;

interface User {
  name: string;
  age: number;
}

type Func = (user: User) => void;

type Param = ParamType<Func>; // Param = User
type AA = ParamType<string>; // string

interface Todo {
  title: string;
  description: string;
}

let update: Partial<Todo> = { title: 'xxx' };

// 使⽤泛型和映射类型keyof实现Partial
type Partial<T> = {
  [P in keyof T]?: T[P];
};

type Required<T> = {
  [P in keyof T]-?: T[P];
};

type Exclude<T, U> = T extends U ? never : T;
// type T = Exclude<1 | 2 | 3 | 4 | 5, 3 | 4> // T = 1 | 2 | 5

type Extract<T, U> = T extends U ? T : never;

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
};

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

type roles = 'tester' | 'developer' | 'manager';
const staffCount: Record<roles, number> = {
  tester: 10,
  developer: 20,
  manager: 1,
};

interface Staff {
  name: string;
  salary: number;
}

type StaffJson = Record<keyof Staff, string>;

const product: StaffJson = {
  name: 'John',
  salary: '3000',
};

class C {
  x = 0;
  y = 0;
}

// type T0 = C
type T0 = InstanceType<typeof C>;

// type T1 = any
type T1 = InstanceType<any>;

// type T2 = never
type T2 = InstanceType<never>;

(this.$refs.pullRefreshList as InstanceType<typeof WsList>).reset();

type ObjectDescriptor<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

let obj = makeObject({
  data: { x: 0, y: 0 },
  methods: {
    moveBy(dx: number, dy: number) {
      this.x += dx; // Strongly typed this
      this.y += dy; // Strongly typed this
    },
  },
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");//这是一个处于第三阶段的提案。

import { myExport } from '/modules/my-module.js';

import { foo, bar } from '/modules/my-module.js';

import { reallyReallyLongModuleExportName as sn } from '/modules/my-module.js';

import * as myModule from '/modules/my-module.js';

import myDefault from '/modules/my-module.js';

import myDefault, * as myModule from '/modules/my-module.js';
// 或者
import myDefault, { foo, bar } from '/modules/my-module.js';

import '/modules/my-module.js';

currentChange(v:number) : void {
  this.pageInfo.page = v;
  this.getList();
},

uoploadPicHead: {
  Authorization: 'Bearer ' + getToken()
} as { Authorization : string },

tagIds: {
  type: Array as PropType<string[]>,
  default: () => []
},
coopModeType: {
  type: Number as PropType<1 | 2 | 3 | 4>,
  default: 1
},
selectPersonnelList: {
  type: Array as PropType<Array<ISelectPersonnelList>>,
  default: () => []
},

// 声明一个不带参数且不返回任何值的函数
type CallbackFunc = () => void;
// 接受零个或多个任何类型的参数且不返回任何值的函数
type CallbackFuncParams = (...args: any[]) => void;
// 指定一组其他参数（例如，字符串，数字，然后是一组额外的args）
type CallbackFuncSomeParams = (arg1: string, arg2: number, ...args: any[]) => void;

HTMLElemet 元素没有 href


<a>, <link>, <area>, <base>. <style>

 HTMLAnchorElement,
 HTMLLinkElement,
 HTMLAreaElement,
 HTMLBaseElement.
 HTMLStyleElement

const tempForm:IForm = { ...this.investDialog.form };
const tempForm = { ...this.investDialog.form } as IForm;


// 这种都要用ITabObj吗？
computed: {
  tabList(): ITabObj[] {
    return this.$route.meta.tabList as ITabObj[];
  }
},

type CallbackFuncParams = (...args: any[]) => void;

data() {
    return {
      // debounce: () => {}
      debounce: (() => {}) as CallbackFuncParams
    };
  },

this.selectList as unknown as Array<{ label: string; isUser: boolean }>;

方案1:
在 shims-vue.d.ts 文件中加入代码 declare module 'lodashe'

方案2:
npm i --save-dev @types/lodash

const main = new Promise((resolve, reject) => {
  resolve(1);
});

const main = new Promise<number>((resolve, reject) => {
  resolve(1);
});

const main = new Promise((resolve: (arg: number) => void, reject) => {
  resolve(1);
});