- 博客(133)
- 收藏
- 关注
RSS订阅原创 npm 官方文档阅读
账户npm login 登录npm whoami 查看当前登录信息源可以通过 npmrc 这个工具来管理源npm i npmrc -g // 创建 npmrc -c namenpm config set registry xxx// 切换npmrc nameAbout scopesWhen you sign up for an npm user account or create an organization, you are granted a scope that mat
2021-09-18 00:39:30
1308
转载 typescript 文档阅读笔记 - declaration 声明文件
新语法索引declare var 声明全局变量declare function 声明全局方法declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明（含有子属性的）全局对象interface 和 type 声明全局类型export 导出变量export namespace 导出（含有子属性的）对象export default ES6 默认导出export = commonjs 导出模块export as namespac
2021-05-05 16:57:08
1922
原创 typescript 文档阅读笔记 - Triple-Slash 指令
/// 后面的 xml 会被当指令只能放到文件的顶部< reference path="…" />将 path 指定的文件包含进来< reference types="…" />declares a dependency on a package. For example, including /// <reference types="node" /> in a declaration file declares that this file uses n.
2021-04-27 20:13:12
368
原创 typescript 文档阅读笔记 - Module Resolution
默认情况下，模块查找方式有两种：classic、nodejs 的模块查找规则。typescript 的模块查找规则中模仿了 nodejs 的模块查找规则。对于使用相对路径进行导入的查找规则: 在 /root/src/moduleA.ts 中 import { b } from “./moduleB”，查找顺序如下/root/src/moduleB.ts/root/src/moduleB.tsx/root/src/moduleB.d.ts/root/src/moduleB/package.json
2021-04-25 17:50:32
190
原创 typescript 文档阅读笔记 - jsx
typescript 支持将 jsx 编译为 javascript。如果想在 ts 中使用 jsx，需要做两件事情。将文件命名为 .tsx启用 jsxTs 附带了 3 中 jsx 模式：preserve、react、react-native，这机制模式只会影响生成阶段，不会影响类型检查preserve：这个模式不会对 jsx 做任何处理，只会把 .tsx -> .jsx。以便于将转换交给其他工具，例如（babel）react：会将 jsx 进行转换，使用 React.createEle
2021-04-25 15:30:49
166
原创 typescript 文档阅读笔记-Declaration Merging
将多个相同的声明合并为一个接口 interface 合并如果被合并的接口有相同的 key（key 为非函数成员），但是他们的 key 的值对应类型不一致，那么会报错。对于函数成员，如果他们的 key 相同，但是函数类型不一致，那么会被当做函数重载namespaces 合并对于使用 export 导出的成员，会被合并namespace Animals { export class Zebra {}}namespace Animals { export interface Leg
2021-04-25 12:14:36
164
原创 typescript 文档阅读笔记-Type Inference
在 TS 中如果没有显示指定类型，那么类型时被推导出来的。在初始化变量和成员，设置参数默认值以及确定函数返回类型时会发生这种推断。大部分情况下推断是直接了当的，但是有些情况下会有一些细微的差别。Best common type通常情况下，类型推断会取公共的类型，例如：let x = [0, 1, null];// ^ = let x: (number | null)[]但是有些情况下可能取不到公共类型，如下class A { name: string = 'xxxx'}class
2021-02-15 16:00:15
186
1
原创 typescript 文档阅读笔记-Type Compatibility
structural subtyping.如果 x 中的成员在 y 中都有，那么 y 可以赋值给 x。但是注意这里不能直接赋值，需要间接赋值interface Named { name: string;}let x: Named = { name: "Alice", location: "Seattle" }; // ERROR：Named 中没有 location 类型// y's inferred type is { name: string; location: string; }le
2021-02-04 10:49:50
135
原创 typescript 文档阅读笔记-Namespaces
以定义一个 validators 为例。As we add more validators, we’re going to want to have some kind of organization scheme so that we can keep track of our types and not worry about name collisions with other objects. Instead of putting lots of different names into the g
2021-01-27 18:03:10
112
原创 typescript 文档阅读笔记- modules
因为在 js、ts 中，每个文件就是一个 module，凡是通过 import 或者 require 的都是一个 module。Working with Other JavaScript Libraries对于没有使用 ts 编写的第三方库，我们可以使用 .d.ts 文件。我们可以为每个 module 声明一个 .d.ts 文件。// node.d.tsdeclare module "url" { export interface Url { protocol?: string;
2021-01-20 15:02:49
132
原创 typescript 文档阅读笔记 Decorators
装饰器目前正处于 stage2，如果要使用它，需要将 experimentalDecorators 置为 true。{ "compilerOptions": { "experimentalDecorators": true }}装饰器可以添加到类的声明、方法、属性、访问器、参数。使用 @expression 进行申明，这个 expression 会在运行时被调用。例如 @sealed：function sealed(target) { // do something with
2021-01-17 14:44:29
178
1
原创 typescript 文档阅读笔记-Advanced Types
类型保护in 操作符用来判断某个属性是否在对象中function move(pet: Fish | Bird) { if ("swim" in pet) { return pet.swim(); } return pet.fly();}instanceofNullable Types可选的参数的类型会被加上|undefined，可以使用类型保护: typeof、in、?? 操作符、! 操作符interface Vs type Aliases接口跟类型别名很像，几乎所有
2021-01-15 13:20:23
131
原创 typescript 文档阅读笔记-Utility Types
Partial< Type >返回一个所有 property 都可选的 type。// 内部实现type Partial<T> = { [P in keyof T]?: T[P]}// 使用interface Todo { title: string; description: string;}const newTodo: Partial<Todo> = { title: 'title'}Readonly< Type &
2021-01-07 21:28:33
169
原创 typescript 文档阅读笔记-DOM Manipulation
typescript 本身提供了DOM API的类型定义。以下类型在在 lib.dom.d.ts 都可以找到。这里着重说一下 HTMLElement 元素节点对应的类型：
2020-12-24 20:23:00
194
2
原创 typescript 文档阅读笔记-Generics
basic泛型可以提高函数、组件的复用性。能通过泛型记住当前传入的类型。function identify<T>(arg: T): T { return arg}在我们声明了泛型之后就可以通过两种方法来调用方式一：传递参数和需要的泛型信息方式二：使用 ts 的参数类型推断（type argument inference ）。根据参数类型自动推断出泛型 T 的类型// 方式一identify<string>('hello word')// 方式二ident
2020-12-23 19:28:58
164
原创 typescript 文档笔记-Enums
Numeric enums默认从 0 开始，指定了数字字后，后面的枚举的值自动基于该值递增枚举即也是类型enum Direction { Up = 1, Down, Left, Right,}let a:DirectionString enumsenum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right // Error: 字符串类型没有自动递增，必须初始化}Heterogeneou
2020-12-23 16:50:52
123
原创 typescript 文档阅读笔记-Classes
Inheritanceextends、superclass Animal { name: string constructor(name: string) { this.name = name } move(distanceInMeters: number = 0) { console.log(`Animal moved ${distanceInMeters}m.`); }}class Dog extends Animal { constructor(na
2020-12-23 16:11:59
124
原创 typescript 文档阅读笔记-Unions and Intersection Types
Union Types用来组合不同类型let name: string | numberUnions with Common Fields如果某个值的类型是一个联合类型。那么我们只能访问他们公共的变量。可以试试使用类型断言来解决，前提是你明确知道该值是什么类型。也可以通过条件语句先进行判断是某种类型，然后再使用interface Bird { fly(): void; layEggs(): void; state: 1}interface Fish { swim(): v
2020-12-22 20:47:57
455
原创 typescript 文档笔记-Literal Types 字面类型
String Literal Types直接使用文字当做类型。然后这个类型的变量就只能为这些值type Easing = "ease-in" | "ease-out" | "ease-in-out";interface A { name: 'xxx'}let B: 'xxx'Numeric Literal Types直接使用数字当做类型。然后这个类型的变量就只能为这些值type Easing = 1 | 2 | 3 | 4 | 5 | 6interface A { nam
2020-12-22 00:56:09
375
原创 typescript 文档笔记-Functions
ts 会对 function 进行类型推导，但如果情况比较复杂，可能不一定准确，需要我们手动指定。参数默认值如果使用了默认值，相当于类型为可选。不能同时指定默认值和可选// lastName = "Smith" 等于 lastName?: string。function buildName(firstName: string, lastName = "Smith") { // ...}Rest Parametersfunction buildName(firstName: string,
2020-12-22 00:30:17
201
原创 typscript 文档笔记-Interfaces
duck typing or structural subtypinginterface LabeledValue { label: string;}function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label);}let myObj = { size: 10, label: "Size 10 Object" };// 这里必须是以变量的形式，如果是 printLabel({ size: 10,
2020-12-20 04:15:58
379
1
原创 typscript 文档笔记-基本类型
ts 会有自动类型推导。但不是所有的类型都能推导正确。Basic Typebooleannumber: 普通数的表示和各种进制stringbigint: 大数array: type[]、Array<type>tuple（元祖类型）：let a: [type, type, type]。某个变量定义为元祖类型，这个变量就必须跟元祖类型一模一样了enum9（枚举类型）enum xxx { a, b = 2, // 这里指定了 b 为 2，那么后面就会从 2 开始递增。前面的
2020-12-19 19:33:25
155
1
原创 babel 对 ECMAModule的转换
导出 export 和 export default首先会在 exports 对象上定义 __esModule 属性，标志这是使用 ESModule 的导出。Object.defineProperty(exports, "__esModule", { value: true});如果是使用 export 导出，那么会将属性挂在 exports.xxx 上，如果使用的是 export default 上，那么会将属性挂在 exports.default 上。对于 commonjs 由于是直接在
2020-10-03 19:59:01
307
原创 声明文件
概述什么是声明文件：以.d.ts 结尾的文件有什么作用：有些文件因为是 js 写的，没有类型声明，这个时候可以使用声明文件为 js 代码提供类型声明，不然在 ts 中会报错声明文件声明的位置：tsconfig.json 中 include 表示我们的 ts 代码写在哪里，只要我们的声明文件在这个指定的目录内即可，如 src可以放置到 node_modules/@types 文件夹中手动在 tsconfig.json 中通过typeRoots，指定声明文件在哪里，配置了后，就只以这个目录为准与
2020-07-28 00:47:49
449
原创 类型演算
根据已知的类型计算出一个新的类型三个关键字typeof（ts 中的 typeof）: 书写位置为类型约束的位置上面// 希望 b 的类型跟 a 保持一致const a = 'dfsfds'let b: typeof a = 'bb'// 当 typeof 作用于类的实例是时，得到的类型是它的构造函数// 平时直接写 cls: A 来约束类型，cls 必须是 A 的实例// 如果我们想让它的类型时 A 这个构造函数本身，可以像下面这样写class A {}function test(c
2020-07-27 21:01:16
235
原创 装饰器
目前 js 支持装饰器。但还未进入标准。是一种面向对象的编程方式解决什么问题分离关注点。例如：对用户对象中的数据进行验证重复代码问题能够带来额外的信息量，看可以为某些属性、类、参数、方法提供元数据信息上述前两个问题产生的根源：某些信息，在定义时，能够附加的信息量有限装饰器的本质在 js 中，装饰器是一个函数，因为是 js 的东西，所以会残云运行。类装饰器...
2020-07-23 14:19:09
242
原创 深入理解类和接口
面向对象概述TS 为前端面向对象带来了好处，JS 没有类型检查，如果使用面向对象的方式开发，会产生大量的接口，而大量的接口会导致调用复杂度剧增，这种复杂度必须通过严格的类型检查来避免错误。面向对象中有许多非常成熟的模式，能处理复杂问题类的继承可以覆盖父类中的同名属性、方法，但是不能覆盖类型，类型需要跟父类保持一致类型匹配：子类的对象始终可以赋值给父类，但是赋值后只能使用父类的成员class Person { name: ''}class Child { age: 20}let
2020-07-19 23:30:52
192
原创 .npmrc 文件配置
npm 配置文件的权重顺序如下:/path/to/my/project/.npmrc~/.npmrc$PREFIX/etc/npmrc/path/to/npm/npmrc可以使用环境变量 ${VARIABLE_NAME}可以向下面这样写成数组：key[] = "first value"key[] = "second value"可以向下面这样添加注释：#xxxx;xxxx如果在项目中配置了 .npmrc，那么对于 npm i -g 是不会读取其中的配置的。npm 从 com
2020-07-14 21:48:57
3223
原创 eslint 配置规则解释
配置文件eslint --init 会生成一个已经配置好的配置文件。可以使用一个名为 .eslintrc.json 作为的一个单独的配置文件。也可以在 package.json 中指定 eslintConfig 字段{ "extends": "eslint:recommended", //继承 eslint 推荐的规则 "extends": [ "eslint:reco...
2020-04-17 18:55:35
560
原创 多泛型
多泛型function mixinArray<T, K> (arr1: T[], arr2: K[]): (T | K)[] { let result: (T | K)[] = []; ... return result}
2020-01-12 20:38:48
214
原创 泛型
泛型有时书写函数的时候，会丢失一些类型信息，多个位置的类型应该保持一致或者有关联的信息。泛型是指，附属于函数、类、接口、类型别名之上的类型在函数中使用泛型// 随便取一个名字，一般用 T，表示类型function take<T>(arr: T[], n: number) :T[]{ if(n >= arr.length) { return arr } cons...
2020-01-08 16:58:54
144
原创 TS 中的类
属性使用属性列表class User { name: string age: number // 属性访问修饰符，默认是 public public gender: string private height: number protect long: number constructor(name:string, age:number){ this.name = name...
2019-12-23 18:05:56
311
原创 类型兼容性
类型兼容性如果 a = b b 如果能够赋值给 a，那么称这两个类型兼容。一个总的原则，鸭子辩型法(子结构辩型法): 目标类型需要某一些特征，赋值的类型只要能满足该特征就可以基本类型：完全匹配对象类型：鸭子辩型法interface Duck { sound: 'gagaga' swin(): void}let person = { name: 'longjincen', a...
2019-12-16 16:33:57
262
原创 接口
用于约束类、对象、函数的契约（标准）契约的形式API 文档，弱标准代码约束，强标准类型别名跟接口的区别是，接口可以用来约束类接口约束对象interface User { name: string age: number}let u:User = { name: string, age: number}接口约束函数// 约束对象中的函数interface Use...
2019-12-16 16:14:39
161
原创 TS 中的模块化
模块语法直接使用 Es6 的模块化语句就可以了导入 ts 文件时，不要加后缀名，因为编译后是 js 文件，没有 .ts编译结果中的模块化可配置，直接配置 compolerOptions.module 就可配置编译结果中使用的编译模块语法如果编译结果的模块化标准是 ES6, 没有区别如果编译结果的模块化标准是 commonjs ：导出的声明会变成 exports 的属性，***默认的导...
2019-12-15 18:07:06
1716
原创 扩展类型-枚举类型
扩展类型：类型别名、枚举、接口、类。字面量类型的问题在类型约束位置，会产生重复代码，可以使用类型别名解决该问题逻辑含义和真实的值产生了混淆，会导致修改真实的值的时候，产生大量的修改字面量类型不会进入到编译结果，比如我们想循环便利它的值，那么就不行。所以需要使用枚举如果定义一个枚举enum Gender{ male = "男", female = "女"}Gender.ma...
2019-12-15 14:06:13
319
原创 TypeScript 基本类型检查
如何进行类型检查时候用 : let name:string = '13' let nums: number[] = [1] // 每一项为 number 的数组 let nums: Array<number> = [1] // 每一项为 number 的数组 function sum(a: number, b:number): number{ return a + b }...
2019-12-13 13:27:21
323
原创 nodemon使用方法
nodemon 具体的文件名。如果什么都不指明，使用 package.json 的 main 字段rs。 重启nodemon.json。配置文件，可以放到当前工作目录或者 home 目录下面。也可以使用 --config file 来指定自定义的文件如果想把配置放到 package.json 里面，可以放到 nodemonConfig 这个字段下面。如果指定了 --config file ...
2019-12-12 09:43:15
1205
1
原创 TypeScript 概念
Ts 是静态的，js 一行一行的边解析边执行，Ts 增强了类型检查和面向对象。Ts 最终是通过 tsc 编译成 js 然后取执行的，所以最终执行的是 js 代码。
2019-12-11 13:20:20
149
原创 两栏布局、三栏布局
两栏布局float + bfc利用浮动和浮动元素对块级元素不可见(浮动元素会盖住非浮动的块级元素)，然后触发被覆盖的块级元素的 bfc，这样可以是右边蓝色的部分不被左边红色部分覆盖，而是刚好衔接。如果不触发 bfc 可以设置右边的的 margin-left=左边的宽度，但是不能实现右边的元素自适应。<div> <p></p> <p&...
2019-11-07 12:55:56
237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人