分类 typescript 下的文章

解决vue+TS项目中报错：Cannot read property ‘push‘ of undefined

2024-08-10

错误解释：

这个错误通常表示你尝试调用一个未定义对象的 push 方法。在 JavaScript 中，push 是数组的一个方法，用于向数组末尾添加一个或多个元素，并返回新的长度。如果你尝试在一个不是数组的变量上调用 push 方法，就会出现这个错误。

解决方法：

确认你在调用 push 方法的对象是一个数组。
如果对象可能是 undefined，在调用 push 之前进行检查。

示例代码：




// 假设有一个可能未定义的数组
let myArray: any[];
 
// 在调用push之前检查myArray是否定义
if (myArray) {
  myArray.push('newItem');
}
 
// 或者更安全的做法是先判断是否是数组
if (Array.isArray(myArray)) {
  myArray.push('newItem');
}
 
// 如果myArray可能未初始化，可以先初始化为空数组
myArray = myArray || [];
myArray.push('newItem');

在 Vue + TypeScript 项目中，如果是在组件中遇到这个问题，确保你的数据属性是一个数组，并且在调用 push 之前组件已经正确挂载，避免在组件的生命周期钩子中出现此类问题。

- 阅读更多 -

Vue3，Vite3，TS，Naive-UI整合TailwindCSS

System

2024-08-10

所有,typescript

在Vue 3, Vite 3, TS, Naive-UI项目中整合Tailwind CSS，你需要按照以下步骤操作：

初始化项目：




npm create vite@latest my-app --template vue-ts
cd my-app

安装Tailwind CSS：




npm install -D tailwindcss postcss autoprefixer

在项目根目录创建tailwind.config.js和postcss.config.js文件：

tailwind.config.js:




module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js:




module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

在src/styles/index.css中引入Tailwind CSS：




@tailwind base;
@tailwind components;
@tailwind utilities;

在vite.config.js中配置Tailwind CSS：




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/index.css";`,
      },
    },
  },
});

安装Naive-UI：




npm install naive-ui

在main.ts中引入Naive-UI和Tailwind CSS：




import { createApp } from 'vue';
import App from './App.vue';
import { NConfigProvider } from 'naive-ui';
import 'naive-ui/dist/index.css';
import './styles/index.css'; // Tailwind CSS entry point
 
const app = createApp(App);
 
app.use(NConfigProvider);
 
app.mount('#app');

在index.html中添加Tailwind CSS purge layer：




<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... -->
</head>
<body>
  <div id="app"></div>
  <!-- Tailwind CSS purge layer -->
  <div class="tailwind-test"></div>
  <!-- ... -->
</body>
</html>

在src/styles/index.css中添加Tailwind directives：




@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer utilities {
  .tailwind-test {
    @apply your-utility-class;
  }
}

确保替换your-utility-class为你希望应用的Tailwind CSS实用工具类。

以上步骤完成后，运行npm run dev启动项目，Tailwind CSS和Naive-UI应该已经整合到你的Vue 3, Vite 3, TS, Naive-UI项目中。

- 阅读更多 -

Nextjs了解内容

System

2024-08-10

所有,typescript

Next.js 是一个用于在服务端渲染 React 应用程序的框架，它提供了很多功能，如自动代码分割、自动静态优化、路由预加载等。

以下是一些 Next.js 的常用方法和概念：

获取数据：Next.js 提供了两种方法获取数据，一种是通过 getInitialProps 方法，它可以在页面初始化时获取服务器端的数据，并渲染页面。另一种是通过 next/server 中的 fetch 方法，可以在客户端或服务器端使用。




import fetch from 'isomorphic-unfetch';
 
async function getData() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  return data;
}
 
export default async function Page() {
  const data = await getData();
  return <div>{data}</div>;
}

静态导入：Next.js 支持静态导入，可以导入 JSON, CSS, CSS module, Images 等静态资源。




import Image from 'next/image';
import styles from './styles.module.css';
import data from './data.json';
 
function Home() {
  return (
    <div className={styles.container}>
      <Image src="/example.jpg" alt="example image" />
      <p>{data.text}</p>
    </div>
  );
}
 
export default Home;

动态导入：Next.js 支持动态导入，可以根据需要按需加载页面或组件。




import dynamic from 'next/dynamic';
 
const DynamicComponent = dynamic(import('../components/component'), {
  ssr: false,
});
 
function Home() {
  return (
    <div>
      <Header />
      <DynamicComponent />
    </div>
  );
}
 
export default Home;

路由：Next.js 使用文件系统作为路由，每个页面的组件都是通过文件系统的路径来定义的。




// pages/about.js
function About() {
  return <div>About</div>;
}
 
export default About;

自定义服务器：Next.js 允许你自定义服务器，可以用来配置自定义行为或集成现有的服务器。




// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
 
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;
 
    if (pathname === '/a') {
      app.render(req, res, '/a', query);
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, () => {
    console.log('Running on http://localhost:3000');
  });
});

导出静态页面：Next.js 支持导出静态页面，可以用于预渲染或生成静态站点。




// pages/index.js
function Home() {
  return <div>Home</div>;
}
 
export default

- 阅读更多 -

TypeScript 初体验：注释和输出语句

System

2024-08-10

所有,typescript




// 这是单行注释
/*
这是多行注释
可以跨越多行
*/
 
// 输出语句
console.log("Hello, TypeScript!");
 
// 定义一个函数
function greet(name: string) {
    return `Hello, ${name}!`;
}
 
// 调用函数并输出结果
console.log(greet("Alice"));
 
// 定义带有类型注解的变量
let age: number = 25;
 
// 输出变量
console.log(age);
 
// 使用类型推断定义变量
let isStudent = true;
 
// 输出变量
console.log(isStudent);

这段代码展示了如何在TypeScript中使用单行注释、多行注释、控制台输出以及函数定义和调用。同时，演示了如何使用类型注解和类型推断来定义变量，并在控制台输出这些变量的值。这是学习TypeScript的一个基本入门示例。

- 阅读更多 -

前端工程化配置-husky + eslint + lint-staged

System

2024-08-10

所有,typescript




// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "eslint": "^7.12.1",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.4"
  }
}

这个配置文件定义了在git提交前运行lint-staged的husky钩子。lint-staged会针对指定的文件（在这个例子中是所有js，jsx，ts，和tsx后缀的文件）运行eslint，并且如果eslint --fix命令修复了代码问题，它会自动将这些修复后的文件重新添加到git暂存区。这有助于保证团队成员的代码风格一致，并减少了一些因手动检查和修复代码导致的错误。

- 阅读更多 -

vue3+vite+TypeScript打包优化

System

2024-08-10

所有,typescript

在Vue 3 + Vite + TypeScript项目中，可以通过以下方法进行打包优化：

使用生产环境变量：
在vite.config.ts中设置define选项，使用import.meta.env.MODE来判断是否为生产环境，以启用生产环境的优化。
代码分割：
使用Vite的代码分割特性，它会自动地将你的代码分割成多个chunk，并在需要时按需加载。
树摇插件：
使用vite-plugin-purge-icons等插件来移除未使用的图标，减少包体积。
配置Terser压缩：
在vite.config.ts中配置build.terserOptions来进一步压缩生成的包。
使用CDN外链：
通过配置Vite插件来将依赖项外链到CDN，减少包体积。

以下是一个简化的vite.config.ts配置示例：




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext',
    outDir: 'dist',
    terserOptions: {
      compress: {
        // 生产环境开启压缩
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log'] // 自定义需要移除的函数
      },
      mangle: true,
      output: {
        comments: false,
      },
    },
  },
  server: {
    open: true,
  },
});

在实际操作中，你可能需要根据项目具体情况进行更详细的优化配置，比如配置Terser的compress和mangle选项来进一步优化包体积和压缩比例。

- 阅读更多 -

ts获取枚举对应类型

System

2024-08-10

所有,typescript

在TypeScript中，你可以使用内置的typeof关键字来获取枚举对应的类型。这里是一个简单的例子：




enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue',
}
 
type ColorType = typeof Color;
 
// 使用枚举对应的类型
function printColor(color: ColorType) {
  console.log(color);
}
 
printColor(Color.Red); // 输出: 'red'
printColor(Color.Green); // 输出: 'green'
printColor(Color.Blue); // 输出: 'blue'

在这个例子中，ColorType是一个类型别名，它被指定为Color枚举的类型。在printColor函数中，我们使用这个类型来指定color参数的类型，这样就可以在编译时确保只有枚举中定义的值可以被传递给该函数。

- 阅读更多 -

Typescript 全栈最值得学习的技术栈 TRPC

System

2024-08-10

所有,typescript

TRPC 是一种用于 TypeScript 的全栈远程过程调用（RPC）库。它提供了客户端和服务器之间的强类型通信，以及服务端的强类型代码生成。

以下是一个简单的例子，展示如何使用 TRPC 创建一个简单的服务端和客户端。

首先，安装 TRPC 相关依赖：




npm install trpc

服务端代码 (trpc-server.ts):




import { TRPCError } from '@trpc/server';
import { createRouter } from '@trpc/server/router';
import { createHTTPServer } from '@trpc/server/adapters/HTTP';
 
// 创建 RPC 路由
const router = createRouter().query('hello', {
  input: {
    text: {
      kind: 'string',
      description: 'Text to say hello to',
    },
  },
  async resolve({ input }) {
    if (!input.text) {
      throw new TRPCError({ code: 'BAD_REQUEST', message: 'No text provided' });
    }
    return `Hello, ${input.text}!`;
  },
});
 
// 创建 HTTP 服务器
const server = createHTTPServer({
  router,
  // 可以在这里添加中间件等
});
 
// 启动服务器
server.start(8080);

客户端代码 (trpc-client.ts):




import { TRPCClient } from '@trpc/client';
 
// 创建 TRPC 客户端
const client = new TRPCClient({
  url: 'http://localhost:8080/trpc',
});
 
async function main() {
  try {
    const result = await client.query('hello', { text: 'World' });
    console.log(result); // 输出: Hello, World!
  } catch (error) {
    console.error(error);
  }
}
 
main();

在这个例子中，服务端定义了一个名为 hello 的查询方法，接受一个字符串参数 text。客户端连接到服务端，并调用 hello 方法，传递参数，然后打印结果。

这只是一个简单的例子，TRPC 提供了更多高级功能，如中间件、认证、并发控制等，以及与现代前端框架（如 React、Vue 或 Svelte）的集成。

- 阅读更多 -

TypeScript中abstract抽象类、抽象成员

System

2024-08-10

所有,typescript

在TypeScript中，我们可以使用abstract关键字来创建抽象类和抽象成员。抽象类不能被直接实例化，抽象成员仅提供声明，在子类中必须被实现。

抽象类：

抽象类中的抽象成员必须在子类中被实现。




abstract class Animal {
    abstract makeSound(): void;
}
 
class Dog extends Animal {
    makeSound() {
        console.log('Woof!');
    }
}
 
const dog = new Dog();
dog.makeSound(); // Output: Woof!

抽象方法：

抽象类中可以包含抽象方法，这些方法没有具体实现，必须在子类中被实现。




abstract class Animal {
    abstract makeSound(): void;
}
 
class Dog extends Animal {
    makeSound() {
        console.log('Woof!');
    }
}
 
const dog = new Dog();
dog.makeSound(); // Output: Woof!

抽象属性：

抽象类可以包含抽象属性，这些属性必须在子类中被实现。




abstract class Animal {
    abstract name: string;
}
 
class Dog extends Animal {
    name = 'Dog';
}
 
const dog = new Dog();
console.log(dog.name); // Output: Dog

抽象访问器：

抽象类可以包含抽象的get和set访问器，这些访问器必须在子类中被实现。




abstract class Animal {
    private _age: number;
    abstract get age(): number;
    abstract set age(value: number);
}
 
class Dog extends Animal {
    get age() {
        return this._age;
    }
 
    set age(value: number) {
        this._age = value;
    }
}
 
const dog = new Dog();
dog.age = 5;
console.log(dog.age); // Output: 5

抽象类的使用注意点：

抽象类不能直接实例化，只能被用作子类的基类。
子类继承了一个抽象类，必须实现所有抽象的方法和属性。
抽象类可以包含抽象方法和抽象属性，也可以包含普通的方法和属性。
抽象类的子类必须包含抽象类中的所有抽象成员的实现，除非它自己也是抽象类。

- 阅读更多 -

ts文件引入外部资源报错问题

System

2024-08-10

所有,typescript

报错问题描述不够详细，但通常当你在TypeScript项目中引入外部资源时遇到错误，可能是由于以下原因：

路径错误：检查引用资源的路径是否正确，是否与实际文件位置匹配。
类型声明缺失：如果资源是一个模块，确保有正确的类型声明文件（.d.ts），或者使用declare module来声明模块的类型。
配置问题：检查tsconfig.json中的include和exclude设置，确保目标资源文件没有被排除在外。
模块解析问题：如果使用了非标准的模块解析策略，可能需要配置baseUrl和paths选项。

解决方法取决于具体错误：

对于路径错误，修正文件引用路径。
如果缺少类型声明，可以安装相应的类型定义文件（如使用npm或yarn），或者手动创建.d.ts文件声明模块类型。
调整tsconfig.json中的路径配置。
如果是模块解析问题，调整baseUrl和paths选项。

具体解决方案需要根据实际报错信息和项目配置进行调整。

- 阅读更多 -