ts-angular-snippets-soygeekgirl 0.0.2

新的介绍内容：

ts-angular-snippets-soygeekgirl README

使用这些快捷代码片段，加速您的Angular开发！

特性

HTML片段

_si _irc _ircf ngfor _for ngforli _forli _ifs

TypeScript片段

interface_cfi 从文件名创建接口 _ci 从选中文本创建接口

enum_cfe 从文件名创建枚举 _ce 从选中文本创建枚举

types_cft 从文件名创建类型 _ct 从选中文本创建类型

private variable constructor_pv 创建只读私有变量

public variables_puvb 创建布尔型公共变量 _puvs 创建字符串型公共变量 _puvn 创建数字型公共变量 _puva 创建数组型公共变量

TODO_td

条件语句_c| _c&

已知问题

如果您有任何疑问或遇到问题，请通过LinkedIn联系我。

发布说明

测试创建HTML和TypeScript的快捷代码片段。

0.0.2

添加了新的公共变量、接口、枚举和类型的快捷代码片段。README中增加了Angular入门小指南。

感谢使用ts-angular-snippets-soygeekgirl！

Angular TypeScript小指南

Angular团队协作常见实践指南

在独自开发或团队协作中犯了一些错误后，我意识到保持项目稳定和开发过程顺畅的关键是遵循一定的代码规则和结构。因此，我创建了这份小指南，旨在标准化代码编写，促进团队协作，采用被认为是清洁代码的实践。

使用Angular CLI

使用Angular CLI来生成新的组件、指令、模块、服务和管道。

Angular CLI命令

// 安装Angular CLI
npm install -g @angular/cli@版本号

// 检查版本
ng version

// 创建新应用
ng new 应用名称

// 生成组件、指令、模块、服务、管道、库
ng generate component|directive|module|service|pipe|library<名称>

// 使用快捷方式生成
ng g c 组件名称
ng g s 服务名称
ng g m 模块名称
ng g d 指令名称
ng g p 管道名称
ng g lib 库名称
ng generate guard

// 启动项目
ng serve

// 测试
ng test

// 安装包
npm install 包名称

// 添加依赖包
ng add @依赖包名称

操作符

可选链操作符 (?.)

// 对象?.属性
const user = {
  name: "Juan",
  age: 30,
};
const address = user?.address;

三元运算符 (? : )

const isLoggedIn = true;
const message = isLoggedIn ? "Bienvenido" : "Inicia sesión";

空值合并操作符 (??)

const foo = null ?? "默认字符串";

非空断言操作符 (!)

@Input() public misDatos!: datos;
this.form.get('name')!.setValue('pancho');

解构赋值

const user = {
  name: "Pedro",
  age: 35,
};

const { name, age } = user; // name将是"Pedro"，age将是35

const test = [1, 2, 3];

const [first, second] = test; // 1, 2

变量、函数、方法

使用描述性名称，使其易于理解其功能或含义。遵循5秒规则，如果在5秒内无法理解变量或方法的作用，则应重命名。布尔值变量应以is开头且不使用否定形式，如isValid、isDisabledSaveButton。

方法

getCurrentType() 或 getCurrentTypeById(id:number):void 方法如果不返回任何值，则应使用void类型，否则使用相应的类型或DTO。

使用public或private关键字，根据具体情况。

例如：

private getCurrentType():void{

}
public getCurrentTypeById(id:number):void{

}

构造函数

使用private readonly _名称: 组件，并在名称前加下划线。

例如：this._servicio.metodo()

接口

定义对象结构，包含属性和方法，提高类型定义的灵活性和重用性。

export interface UserInterface {
  text: string;
  age?: number;
}
let user: UserInterface;

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

  greet(): string;
}

let user: User = {
  name: "Soy geekgirl",
  email: "soy@geekgirl.com",
  age: 30,
  greet() {
    return `Hi, i'm ${this.name}`;
  },
};

枚举

用于定义一组有限且相关的常量值，如用户类型、角色、状态等，提高类型安全性和代码可读性。

export enum UserRole {
  Admin,
  Moderator,
  User,
}

let currentUserRole: UserRole = UserRole.Admin;

export enum TypeUserEnum {
  ADMIN = 1,
  BASIC = 3,
}

类型

使用类型别名简化复杂或基本类型的语法，适用于不需要额外逻辑或属性的类型。

export type myType = {
  type: "basic" | "admin";
};
let currentType: myType = {
  type: "basic",
};

模型：Class、Interface还是DTO？

使用接口作为DTO来处理数据请求，因为接口可以定义类型和结构。例如，在GET请求中使用接口可以快速将JSON转换为接口，如RapidApi或JSON to TS。

export interface UserModel {
  //...
}

文件/目录命名

保持命名规则以提高代码的可读性。使用连字符("-")分隔文件名中的单词，使用点号(".")分隔文件名和文件类型。推荐的命名模式是：

<文件名>.<类型>.ts|.css|.html

// 示例
文件名.component.ts
文件名.enum.ts
文件名.model.ts

Barrels

注意：此概念是从我参考的指南中复制而来，我曾在Vuex项目中使用过，但当时不知道这种技术称为Barrels。

使用"Barrels"来帮助组织项目。每个包含.ts文件的文件夹中添加一个名为"index.ts"的文件，导出所有可导出的变量，形成一种层次结构，简化import语句。

示例：

假设有三个不同的组件在./app/modules/home/component中：

export class SomeComponent {}
export class SomeClass {}
export class SomeService {}

在./app/modules/home/component中添加这个barrel：

export * from "./some.model.ts";
export * from "./some.service.ts";
export { SomeComponent } from "./some.component.ts";

现在只需从这个barrel中导入所需内容：

import { SomeComponent, SomeService, SomeClass } from "../some"; // index隐式包含

惰性加载

仅加载正在使用的模块。

import ...;

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./modules').then( m => m.HomeModule ) },
  { path: '**', redirectTo: 'home' }
];

@NgModule({...})
export class AppRoutingModule { }

Angular编码风格

可以参考官方Angular编码风格指南：

1. 文件代码行数限制在400行，如果超出应考虑分解为更小的组件，便于测试和维护。
2. 定义小函数，尽量让每个函数只完成一个任务。
3. 声明组件、变量、函数等时遵循规则，属性和方法名称应始终使用小写和camelCase。
4. 在import和模块之间以及第三方和自定义模块之间留空行。
5. 使用自定义前缀，在某些情况下这是好做法，特别是当组件名称与其他组件或原生组件相似时，以防止名称冲突。
6. 尽可能遵循单一职责原则。
7. 不使用命名空间，请查看Google的编码风格指南。

我的参考资料

官方Angular编码风格指南、Google AngularJS编码风格指南、Google TypeScript编码风格指南、github.com/USpiri/angular-guideline。

更多信息请访问我的LinkedIn页面@soygeekgirl。祝您开发愉快！