Typescript FAQ

# type checking
pnpm add -Dw @typescript/native-preview

# 无法排除 node_modules 问题 https://github.com/microsoft/TypeScript/issues/40426
npx tsc -p tsconfig.json --skipLibCheck --maxNodeModuleJsDepth 0 --noEmit

# 减少 node_modules 输出
npx tsc -p tsconfig.json --skipLibCheck --maxNodeModuleJsDepth 0 --noEmit | grep -v '/node_modules'

// 可以遍历的 ENUM
const permissions = ['read', 'write', 'execute'] as const;
type Permission = (typeof permissions)[number];

// 使用 ENUM 且可以遍历的方式
enum Permission {
  Read = 'r',
  Write = 'w',
  Execute = 'x',
}

const Permission = {
  Read: 'r',
  Write: 'w',
  Execute: 'x',
} as const;
type Permission = (typeof Permission)[keyof typeof Permission];

const identity = <T>(value: T): T[] => {
  return [value];
};

// TSX
const identity = <T,>(arg: T): T => arg;

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    alias: {
      '@/': new URL('./src/', import.meta.url).pathname,
    },
  },
});

{
  "jsc": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["@/*"]
    }
  }
}

npm add -D tsconfig-paths

{
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  }
}

// user.ts
// IUserService 仅提供给使用方
export class UserService implements IUserService {}
export interface IUserService {}

// index.ts
// 对外只暴露接口，避免 import 的时候导入源码增加 bundle
export { type IUserService } from 'user.ts';

// client.ts
import type { IUserService } from 'server';
// 客户端不需要 bundle 源码
const svc = getService<IUserService>('user');

declare var __DEV__: boolean;

{
  "compilerOptions": {
    "preserveSymlinks": true
  }
}

interface Example {
  // method shorthand syntax
  func(arg: string): number;

  // regular property with function type
  func: (arg: string) => number;
}

# tsconfig 可以调整为 include 需要的内容
pnpm tsc -p ./tsconfig.json --noEmit false --emitDeclarationOnly true --declaration true --outDir ./dist/types

# 直接生成
pnpm tsc --target ESNext --jsx preserve --declaration --strict --pretty --out ./dist/server.js --module system --moduleResolution node --emitDeclarationOnly ./src/server/routers/_app.ts

export default {
  importOrderParserPlugins: ['typescript', 'decorators-legacy'],
};

import * as React from "react";

type BoxProps<E extends ElementType> = Omit<ComponentProps<E>, 'as'> & {
  as?: E;
};

const Box = <E extends ElementType = 'div'>({ as, ...props }: BoxProps<E>) => {
  const TagName = as || 'div';
  return <TagName {...props} />;
};

type PolymorphicProps<P extends { as?: T }, T extends React.ElementType> = P &
  Omit<React.ComponentPropsWithoutRef<T>, keyof P>;

type ButtonProps<T extends React.ElementType> = PolymorphicProps<
  {
    as?: T;
    icon?: React.ReactNode;
    children?: React.ReactNode;
  },
  T
>;

function Button<T extends React.ElementType = "button">({
  as,
  ...props
}: ButtonProps<T>
) {
  const Component = as || "button";
  return <Component {...props} />;
}

type RequiredKeys<T> = {
  [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K;
}[keyof T];

type OptionalKeys<T> = {
  [K in keyof T]-?: {} extends { [P in K]: T[K] } ? K : never;
}[keyof T];

type PickRequired<T> = Pick<T, RequiredKeys<T>>;

type PickOptional<T> = Pick<T, OptionalKeys<T>>;

type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

type NullableOptional<T> = PickRequired<T> & Nullable<PickOptional<T>>;

import type React, { type ReactNode } from 'react';