进击TypeScript(核心、高级特性及工程相关)

const regions = [
    {
        label: '四川省',
        value: 1
    },
    {
        label: '泸州市',
        value: 20
    },
    {
        label: '龙马潭区',
        value: 3310
    }
];
const region = regions.map((ele) => ele.values); 
// 属性“values”在类型“{ label: string; value: number; }”上不存在。你是否指的是“value”?ts(2551)

T | never => T // never与T取并集为T，这可以看出never就是一个空集合，任何值都不能注解为never。
T & unknown => T // unknown与T取交集为T，所以其它类型为unknown类型的子集合。

// never
let error = () => {
    throw new Error('error')
}
let endless = () => {
    while(true) {}
}

type NonNullable<T> = T extends null | undefined ? never : T
type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]

let value: any;

value.foo.bar;  // OK
value.trim();   // OK
value();        // OK
new value();    // OK
value[0][1];    // OK


let value2: unknown;

value2.foo.bar;  // Error
value2.trim();   // Error
value2();        // Error
new value2();    // Error
value2[0][1];    // Error

/**
 * A custom type guard function that determines whether
 * `value` is an array that only contains numbers.
 */
function isNumberArray(value: unknown): value is number[] {
    return Array.isArray(value) && value.every((element) => typeof element === 'number');
}

const unknownValue: unknown[] = [ 15, 23, 8, 4, 42, 16 ];
const unknownValue2: unknown[] = [ '1', 23, 8, 4, 42, 16 ];

if (isNumberArray(unknownValue)) {
    // Within this branch, `unknownValue` has type `number[]`,
    // so we can spread the numbers as arguments to `Math.max`
    const max = Math.max(...unknownValue);
    console.log(max);
}

// 原始类型
const user: string = "Echo Zhou"
const haha: boolean = false

// 函数
function warnUser(): void {
    alert("This is my warning message");
}

// 数组
let arr1: number[] = [1, 2, 3]

// 元组
let tuple: [number, string] = [0, '1']

interface IWarningModProps {
    form: FormProps['form'];
    visible: boolean;
    handleModalVisible: (flag: boolean) => void;
    closeModal: () => void;
    threshold: FetchCreThresholdSuccData['info']
    customerId: number;
}

abstract class A {
    public A1: string = 'TS';
    private A2: number = 123;
    protected A3: string = 'GOOD';
    static A4: number = 123;

    public FA1() {
        console.log('123');
    }
    private FA2() {}
    protected FA3() {}
    static FA4() { // 抽象方法必须被子类实现
        console.log('Dog sleep');
    }
    abstract FA5(): void;
}

class B extends A {
    public B1: string = '123';
    private B2: number = 123;
    protected B3: string = '1234';
    static B4: number = 1234;

    F5() {}
    private FB5() {}
    protected FB6() {}
    static FB7() {
        console.log('Dog sleep');
    }
    public FA5() {}
}
//实例化 B
let b = new B();

// 通过接口提取不同类之间的共性，类implements接口提高了面向对象的灵活性
interface Alarm {
    alert(): void;
}

interface Light {
    lightOn(): void;
    lightOff(): void;
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

interface MilkshakeProps {
  name: string;
  price: number;
}

interface MilkshakeMethods {
  getIngredients(): string[];
}

// 接口的声明合并
interface Milkshake extends MilkshakeProps, MilkshakeMethods {}
// 相当于type的交叉类型
type Milkshake = MilkshakeProps & MilkshakeMethods;

interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> { }

interface DirProps {
  // ...此处省略
}
class Dir extends Component<DirProps, DirState> {
}

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { RemoveStorage } from '@/utils/utils';
import { GetStorage } from '@/utils/utils';
import { message } from 'antd';


const axiosInstance = axios.create(axiosConfig)


export interface IHttpClient {
    getStoreConfig: () => {
        baseURL: string;
        headers: {
            webToken: string;
        };
    };
    get: <T>(url: string, config?: AxiosRequestConfig) => Promise<T>;
    post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<T>;
}
...// 此处省略 ，例如添加通用配置、拦截器等。
const _http = axiosInstance;
class Axios implements IHttpClient {
    public getStoreConfig() {
        return {
            baseURL: '/xxx/api',
            headers: { webToken: GetStorage('token') }
        };
    }
    
    public async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
        const configInfo = config ? config : this.getStoreConfig();
        const response: AxiosResponse = await _http.get(url, configInfo);
        return response;
    }

    public async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
        const configInfo = config ? config : this.getStoreConfig();
        const response: AxiosResponse = await _http.post(url, data, configInfo);
        return response;
    }
}

export const fetch: IHttpClient = new Axios();

/// <reference no-default-lib="true"/>

interface PromiseConstructor {
    /**
     * A reference to the prototype.
     */
    readonly prototype: Promise<any>;

    /**
     * Creates a new Promise.
     * @param executor A callback used to initialize the promise. This callback is passed two arguments:
     * a resolve callback used to resolve the promise with a value or the result of another promise,
     * and a reject callback used to reject the promise with a provided reason or error.
     */
    new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
    ...
 
    /**
     * Creates a new rejected promise for the provided reason.
     * @param reason The reason the promise was rejected.
     * @returns A new rejected Promise.
     */
    reject<T = never>(reason?: any): Promise<T>;

    /**
     * Creates a new resolved promise for the provided value.
     * @param value A promise.
     * @returns A promise whose internal state matches the provided promise.
     */
    resolve<T>(value: T | PromiseLike<T>): Promise<T>;

    /**
     * Creates a new resolved promise .
     * @returns A resolved promise.
     */
    resolve(): Promise<void>;
}

declare var Promise: PromiseConstructor;

const defaultColConfig = {
  xs: 24,
  sm: 24,
  md: 12,
  lg: 12,
  xl: 8,
  xxl: 6,
};
type colConfig = keyof typeof defaultColConfig 
// type colConfig = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"

interface Iobj1 {
    a: number;
}
type typea = Iobj1['a']; // string

let obj1 = {
    a: 1,
    b: 2,
    c: 3
};
function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
    return keys.map((key) => obj[key]);
}
const a1 = getValues(obj1, [ 'a', 'b' ]); // [1,2]

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

type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>; 
/* type ThreeStringProps = {
    prop1: string;
    prop2: string;
    prop3: string;
} */

// Partial: 将一个map所有属性变为可选的
type Partial<T> = { [P in keyof T]?: T[P] } 
interface Obj {
    a: string;
    b: number;
}
type PartialObj = Partial<Obj>

// Pick: 提取map中想要的属性
type PickObj = Pick<Obj, 'a' | 'b'> 
interface Customer {
    id: number;
    name: string;
    address: string;
    region: string;
    parent: number;
}
type KeyProps = Pick<Customer, 'id' | 'name'>;

// Record: 构造具有类型K为type 的属性的类型T, 可用于将一个类型的属性映射到另一个类型。
type Record<K extends keyof any, T> = { [P in K]: T }; 

type ThreeStringProps = Record<'prop1' | 'prop2' | 'prop3', string>; 
/* type ThreeStringProps = {
    prop1: string;
    prop2: string;
    prop3: string;
} */

type RecordObj = Record<'x' | 'y', Obj>

type ReturnType<T> = T extends (...args: any[]) => infer P ? P : any;

function transCus () {
  return {
    name: 'echo',
    region: ['四川省', '泸州市', '龙马潭区'],
    address: 'xxx',
    metaType: 3,
    type: 3
  }
}
type Customer = ReturnType<typeof transCus> 
/*
type Customer = {
    name: string;
    region: string[];
    address: string;
    metaType: number;
    type: number;
}
*/
               

npm i @types/jquery -D

// 模块插件
import m from 'moment';
declare module 'moment' {
    export function myFunction(): void;
}
m.myFunction = () => {}

{
   "files": [
     "src/a.ts"
   ],
   "include": [
    "src/*" // 只编译src一级目录下的文件
   ],
  "compilerOptions": {
      // "incremental": true,                // 增量编译
      // "tsBuildInfoFile": "./buildFile",   // 增量编译文件的存储位置
      // "diagnostics": true,                // 打印诊断信息

      // "target": "es5",           // 目标语言的版本
      // "module": "commonjs",      // 生成代码的模块标准
      // "outFile": "./app.js",     // 将多个相互依赖的文件生成一个文件，可以用在 AMD 模块中

      // "lib": [],                 // TS 需要引用的库，即声明文件，es5 默认 "dom", "es5", "scripthost"

      // "allowJs": true,           // 允许编译 JS 文件（js、jsx）
      // "checkJs": true,           // 允许在 JS 文件中报错，通常与 allowJS 一起使用
      // "outDir": "./out",         // 指定输出目录
      // "rootDir": "./",           // 指定输入文件目录（用于输出）

      // "declaration": true,         // 会为我们自动生成声明文件
      // "declarationDir": "./d",     // 声明文件的路径
      // "emitDeclarationOnly": true, // 只生成声明文件
      // "sourceMap": true,           // 生成目标文件的 sourceMap
      // "inlineSourceMap": true,     // 生成目标文件的 inline sourceMap
      // "declarationMap": true,      // 生成声明文件的 sourceMap
      // "typeRoots": [],             // 声明文件目录，默认 node_modules/@types
      // "types": [],                 // 声明文件包

      // "removeComments": true,    // 删除注释

      // "noEmit": true,            // 不输出文件
      // "noEmitOnError": true,     // 发生错误时不输出文件

      // "noEmitHelpers": true,     // 不生成 helper 函数，需额外安装 ts-helpers
      // "importHelpers": true,     // 通过 tslib 引入 helper 函数，文件必须是模块

      // "downlevelIteration": true,    // 降级遍历器的实现（es3/5）

      // "strict": true,                        // 开启所有严格的类型检查
      // "alwaysStrict": false,                 // 在代码中注入 "use strict";
      // "noImplicitAny": false,                // 不允许隐式的 any 类型
      // "strictNullChecks": false,             // 不允许把 null、undefined 赋值给其他类型变量
      // "strictFunctionTypes": false           // 不允许函数参数双向协变
      // "strictPropertyInitialization": false, // 类的实例属性必须初始化
      // "strictBindCallApply": false,          // 严格的 bind/call/apply 检查
      // "noImplicitThis": false,               // 不允许 this 有隐式的 any 类型

      // "noUnusedLocals": true,                // 检查只声明，未使用的局部变量
      // "noUnusedParameters": true,            // 检查未使用的函数参数
      // "noFallthroughCasesInSwitch": true,    // 防止 switch 语句贯穿
      // "noImplicitReturns": true,             // 每个分支都要有返回值

      // "esModuleInterop": true,               // 允许 export = 导出，由import from 导入
      // "allowUmdGlobalAccess": true,          // 允许在模块中访问 UMD 全局变量
      // "moduleResolution": "node",            // 模块解析策略
      // "baseUrl": "./",                       // 解析非相对模块的基地址
      // "paths": {                             // 路径映射，相对于 baseUrl
      //   "jquery": ["node_modules/jquery/dist/jquery.slim.min.js"]
      // },
      // "rootDirs": ["src", "out"],            // 将多个目录放在一个虚拟目录下，用于运行时

      // "listEmittedFiles": true,        // 打印输出的文件
      // "listFiles": true,               // 打印编译的文件（包括引用的声明文件）
  }
}