/* 常用类型*/
// 1. string 字符串类型export const str: string = "helloworld";str.substr(3);
// 2. number 数字类型let num: number = 100;num++;
// 3. boolean 布尔类型const bool: boolean = true;
// 4. 数组类型const numArr: number[] = [1, 2, 3];numArr.map((num) => ++num);
// 5. 对象类型type User = {  name: string;  age: number;  isAdmin: boolean;};const user: User = {  name: "xiaoming",  age: 18,  isAdmin: false};const { name, age, isAdmin } = user;
// 6. 函数类型type Fn = (n: number) => number;const fn: Fn = (num) => ++num;fn(1);

/* 类型判断 */
export function printId(id: string | number) {  if (typeof id === 'string') {    console.log(id.toUpperCase());  } else {    console.log(id);  }}
printId(101); // OKprintId('202'); // OK

/* 类型断言 */
export type Position = 'left' | 'right' | 'top' | 'bottom';const setPos = (pos: Position) => {  //...};
const handleChange = (value: string) => {  setPos(value as Position);};
handleChange('left');

/* 属性名不确定的对象 */
export type Paths = {  [key: string]: string;};
// 等同于// export type Paths = Record<string, string>;
const paths: Paths = {};
paths.home = '/home'; //OKpaths.settings = '/settings'; //OKpaths.somePath = '/somePath'; //OK

/* 对象的 key 值 */
export const ErrorMessage = {  : "success",  7: "Permission denied",  9: "Invalid parameters"  //...};
export type ErrorCode = keyof typeof ErrorMessage;
export const logErrMsg = (code: ErrorCode) => {  console.log(ErrorMessage[code]);};

/* 泛型 generics */
type UseState = <T>(v: T) => [T, (v: T) => void];
const useState: UseState = (v) => {  return [    v,    (v) => {      //...    }  ];};
export const Component = () => {  const [num, setNum] = useState(); // OK  const [str, setStr] = useState(""); // OK  const [list, setList] = useState([1, 2, 3]); // OK
  // test  const newNum = num + 1;  setNum(newNum);
  const newStr = str.toUpperCase();  setStr(newStr);
  const newList = list.slice(1);  setList(newList);};

/* 部分对象 Partial */
interface User {  name: string;  age: number;  occupation: string;}
export const users: User[] = [  {    name: "Max Mustermann",    age: 25,    occupation: "Chimney sweep"  },  {    name: "Wilson",    age: 23,    occupation: "Ball"  }];
type Criteria = {  [Property in keyof User]?: User[Property];};
// 等同于// type Criteria = Partial<User>;
export const filterUsers = (users: User[], criteria: Criteria): User[] =>  users.filter((user) => {    const criteriaKeys = Object.keys(criteria) as (keyof Criteria)[];    return criteriaKeys.every((fieldName) => {      return user[fieldName] === criteria[fieldName];    });  });
const usersOfAge23 = filterUsers(users, {  age: 23});

/* 函数中 this 的使用 */// 参考 https://www.*criptlang.org/docs/handbook/2/functions.html#declaring-this-in-a-function
export const debounce = <F extends (...args: any[]) => void>(  fn: F,  delay = 200) => {  let timeout = ;  return function (this: any, ...args: any[]) {    timeout && clearTimeout(timeout);    timeout = window.setTimeout(() => {      fn.apply(this, args);    }, delay);  } as F;};

/* 类型编程-从基础类型构造新类型 */
export type CustomObject<K extends string | number, T> = { [key in K]: T };
// 1. 示例// ObjectOfStringValue 对象的值只能为字符串类型type ObjectOfStringValue = CustomObject<string, string>;const objOfStringValue: ObjectOfStringValue = {  h: "hello", // OK  w: "world" // OK};
// 2. ObjectOfStringValue// ObjectOfStringValue 对象的值只能为数字类型type ObjectOfNumberValue = CustomObject<string, number>;const objOfNumberValue: ObjectOfNumberValue = {  a: 100, // OK  b: 100 // OK};const a = objOfNumberValue.a;
// 3. ObjectOfUserValuetype User = {  username: string;  age: number;};
// ObjectOfUserValue 对象的值只能为User类型type ObjectOfUserValue = CustomObject<string, User>;
const objOfUserValue: ObjectOfUserValue = {  u1: {    username: "xiaoming",    age: 18  }};const { username } = objOfUserValue.u1;

/* 对象类型的继承 */
export interface Response {  data: any;  status: number;  statusText: string;}
// 1. 在 Response 类型的基础上添加 config 属性export interface ResponseWithConfig extends Response {  config: any;}const responseWithConfig: ResponseWithConfig = {  data: 100,  status: ,  statusText: "success",  config: {}};
// 2. 在 Response 类型的基础上改写 data 属性类型export interface StringResponse extends Response {  data: string;}const stringResponse: StringResponse = {  data: "100",  status: ,  statusText: "success"};

/* 对象类型的修改 *//* extends可以继承对象类型，但不可与原类型冲突，此时可以先使用 Omit 去除需要修改的属性 */
export interface TreeNode {  id: number;  value: number;  children?: TreeNode[];}
// 1. 去除 TreeNode 的 id 属性同时修改 children 属性的类型export interface NodeWithoutId extends Omit<TreeNode, "id" | "children"> {  children?: NodeWithoutId[];}
// OKconst nodeWithoutId: NodeWithoutId = {  value: 1,  children: [    {      value: 2    }  ]};

/* 类型编程-条件判断 */
export declare type Person<T extends "User" | "Admin"> = T extends "User"  ? {      username: string;    }  : {      username: string;      role: string;    };
const user: Person<"User"> = { username: "xiaoming" }; // OK
const admin: Person<"Admin"> = { username: "xiaofang", role: "manager" }; // OK

/* React 组件 Props 范型 */
import { useState } from "react";
// value 可为字符串或数字type Value = number | string;interface Props<T extends Value> {  value?: T;  onChange?: (v: T) => void;  type?: "number" | "text";}
const Input = <T extends Value>({  value,  onChange,  type = "text"}: Props<T>) => {  return (    <input      value={value}      onChange={(e) => {        const { value } = e.target;        onChange?.((type === "number" ? parseInt(value, 10) : value) as T);      }}      type={type}    />  );};
// testconst Test = () => {  const [num, setNum] = useState();  const [str, setStr] = useState("");
  return (    <div>      <Input value={num} onChange={(v) => setNum(v)} type="number" />      <Input value={str} onChange={(v) => setStr(v)} />    </div>  );};
export default Input;