47 posts tagged with "Frontend"

Type Annotations​

• What: Like type declaration in Java.
• How: Syntax as following:

variable: type;

ES/TS Primitive Types​

boolean​

let bool: boolean = true;

npm (Node Packaged Modules) is node's official package manager. You can also see all the versions of node and corresponding npm here.

Overview​

npm CLI documentation

Acronym​

-g​

--global 缩写为 -g，表示安装之后的包将位于系统预设的全局目录之下。

-S​

--save 缩写为 -S，表示安装的包将写入 package.json 里面的 dependencies。

简介​

HTTP/2 主要目的是提高网页性能，最近几年比较火，将其单独抽成一块讲。2015 年，HTTP/2 发布。它不叫 HTTP/2.0，是因为标准委员会不打算再发布子版本了，下一个新版本将是 HTTP/3。

目前还有不少服务还是 HTTP/1.1，NodeJS 也是从 v10 才将 http2 转正。Express5.x 才开始支持 http/2。

可以打开谷歌首页看看，基本上都是 http/2 协议，简写成 h2

TS 允许将一些不同类型的变量相互赋值，虽然某种程度上可能会产生一些不可靠的行为，但增加了语言的灵活性，毕竟它的祖宗 JS 就是靠灵活性起家的，而灵活性已经深入前端的骨髓，有时会不得不做一些妥协。

当一个类型 Y 可以被赋值给另一个类型 X 时，我们就可以说类型 X 兼容类型 Y。

X (目标类型) = Y (源类型)

Primitive type compatibility​

原始类型的兼容性主要关注三点：

简单的说 Node.js 就是运行在服务端的 JavaScript。

• Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
• Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

安装 nvm​

推荐先安装 nvm，再通过 nvm 去安装 Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

npm 与 yarn 常用命令对比​

同操作同名的命令​

Get started​

macOS​

1. 使用脚本安装，每次安装的都是最新版：

curl -o- -L https://yarnpkg.com/install.sh | bash

如需升级，再次运行此命令，然后会出现以下信息：

/Users/xxx/.yarn already exists, possibly from a past Yarn install.
> Remove it (rm -rf /Users/xxx/.yarn) and run this script again.

根据提示，由于已经安装了 yarn，所以需要先删除~/.yarn文件，然后再重新执行该命令，即可安装最新版 yarn。

概述​

泛型即不预先确定的数据类型，具体的类型在使用的时候才能确定。本节将学习ts中的泛型函数。

在软件工程中，开发定义良好且可重用的组件是非常重要的，因为这确保了程序的灵活性和长期可扩展性。使用泛型可以创建可重用的组件，一个组件可以支持多种类型的数据，而用户就可以根据自己的需要的数据类型来使用组件。

泛型函数​

什么是泛型函数​

概述中泛型的概念比较抽象，为了理解什么是泛型函数，我们可以结合一个例子来说明。

如下例所示，identity函数返回传入的参数，但是这个函数的可重用性很差，只能支持number类型。

function identity(arg: number): number {
  return arg;
}

为了支持更多的类型，我们可以将参数设置为联合类型或者any类型。

Interface extends interface​

Interfaces can extend one or more interfaces. This makes writing interfaces flexible and reusable.

interface Person {
  name: string;
  gender: string;
}

interface Employee extends Person {
  department: string;
}

let empObj: Employee = {
  name: 'Kimi',
  gender: 'male',
  department: 'Payment',
};

Interface in TypeScript can be used to define a type and also to implement it in the class. The most scenarios can be summarized as following:

• as object type definition
• as array type definition
• as function type definition
• interface extends interface
• class implements interface

In this section, we mainly focus on the object and array type definition using interface. As function type definition will be introduced in Function: Types section.

Interface likes contract which defines the structure of the object, array, function and also class. However, we need to note that the TypeScript compiler does not convert interface to JavaScript. It uses interface for type checking.