TypeScript
EDB
这个作者很懒,什么都没留下…
展开
-
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 · 2046 阅读 · 0 评论 -
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 · 428 阅读 · 0 评论 -
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 · 271 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
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 · 209 阅读 · 0 评论 -
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 · 257 阅读 · 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 · 181 阅读 · 0 评论 -
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 · 147 阅读 · 0 评论 -
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 · 152 阅读 · 0 评论 -
typescript 文档阅读笔记 Decorators
装饰器目前正处于 stage2,如果要使用它,需要将 experimentalDecorators 置为 true。{ "compilerOptions": { "experimentalDecorators": true }}装饰器可以添加到类的声明、方法、属性、访问器、参数。使用 @expression 进行申明,这个 expression 会在运行时被调用。例如 @sealed:function sealed(target) { // do something with原创 2021-01-17 14:44:29 · 223 阅读 · 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 · 163 阅读 · 0 评论 -
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 · 208 阅读 · 0 评论 -
typescript 文档阅读笔记-DOM Manipulation
typescript 本身提供了DOM API的类型定义。以下类型在在 lib.dom.d.ts 都可以找到。这里着重说一下 HTMLElement 元素节点对应的类型:原创 2020-12-24 20:23:00 · 216 阅读 · 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 · 199 阅读 · 0 评论 -
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 · 280 阅读 · 0 评论 -
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 · 141 阅读 · 0 评论 -
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 · 499 阅读 · 0 评论 -
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 · 421 阅读 · 0 评论 -
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 · 221 阅读 · 0 评论 -
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 · 431 阅读 · 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 · 169 阅读 · 1 评论 -
声明文件
概述什么是声明文件:以.d.ts 结尾的文件有什么作用:有些文件因为是 js 写的,没有类型声明,这个时候可以使用声明文件为 js 代码提供类型声明,不然在 ts 中会报错声明文件声明的位置:tsconfig.json 中 include 表示我们的 ts 代码写在哪里,只要我们的声明文件在这个指定的目录内即可,如 src可以放置到 node_modules/@types 文件夹中手动在 tsconfig.json 中通过typeRoots,指定声明文件在哪里,配置了后,就只以这个目录为准与原创 2020-07-28 00:47:49 · 494 阅读 · 0 评论 -
类型演算
根据已知的类型计算出一个新的类型三个关键字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 · 250 阅读 · 0 评论 -
装饰器
目前 js 支持装饰器。但还未进入标准。是一种面向对象的编程方式解决什么问题分离关注点。例如:对用户对象中的数据进行验证重复代码问题能够带来额外的信息量,看可以为某些属性、类、参数、方法提供元数据信息上述前两个问题产生的根源:某些信息,在定义时,能够附加的信息量有限装饰器的本质在 js 中,装饰器是一个函数,因为是 js 的东西,所以会残云运行。类装饰器...原创 2020-07-23 14:19:09 · 317 阅读 · 0 评论 -
深入理解类和接口
面向对象概述TS 为前端面向对象带来了好处,JS 没有类型检查,如果使用面向对象的方式开发,会产生大量的接口,而大量的接口会导致调用复杂度剧增,这种复杂度必须通过严格的类型检查来避免错误。面向对象中有许多非常成熟的模式,能处理复杂问题类的继承可以覆盖父类中的同名属性、方法,但是不能覆盖类型,类型需要跟父类保持一致类型匹配:子类的对象始终可以赋值给父类,但是赋值后只能使用父类的成员class Person { name: ''}class Child { age: 20}let原创 2020-07-19 23:30:52 · 233 阅读 · 0 评论 -
多泛型
多泛型function mixinArray<T, K> (arr1: T[], arr2: K[]): (T | K)[] { let result: (T | K)[] = []; ... return result}原创 2020-01-12 20:38:48 · 249 阅读 · 0 评论 -
泛型
泛型有时书写函数的时候,会丢失一些类型信息,多个位置的类型应该保持一致或者有关联的信息。泛型是指,附属于函数、类、接口、类型别名之上的类型在函数中使用泛型// 随便取一个名字,一般用 T,表示类型function take<T>(arr: T[], n: number) :T[]{ if(n >= arr.length) { return arr } cons...原创 2020-01-08 16:58:54 · 158 阅读 · 0 评论 -
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 · 329 阅读 · 0 评论 -
类型兼容性
类型兼容性如果 a = b b 如果能够赋值给 a,那么称这两个类型兼容。一个总的原则,鸭子辩型法(子结构辩型法): 目标类型需要某一些特征,赋值的类型只要能满足该特征就可以基本类型:完全匹配对象类型:鸭子辩型法interface Duck { sound: 'gagaga' swin(): void}let person = { name: 'longjincen', a...原创 2019-12-16 16:33:57 · 300 阅读 · 0 评论 -
接口
用于约束类、对象、函数的契约(标准)契约的形式API 文档,弱标准代码约束,强标准类型别名跟接口的区别是,接口可以用来约束类接口约束对象interface User { name: string age: number}let u:User = { name: string, age: number}接口约束函数// 约束对象中的函数interface Use...原创 2019-12-16 16:14:39 · 199 阅读 · 0 评论 -
TS 中的模块化
模块语法直接使用 Es6 的模块化语句就可以了导入 ts 文件时,不要加后缀名,因为编译后是 js 文件,没有 .ts编译结果中的模块化可配置,直接配置 compolerOptions.module 就可配置编译结果中使用的编译模块语法如果编译结果的模块化标准是 ES6, 没有区别如果编译结果的模块化标准是 commonjs :导出的声明会变成 exports 的属性,***默认的导...原创 2019-12-15 18:07:06 · 1776 阅读 · 0 评论 -
扩展类型-枚举类型
扩展类型:类型别名、枚举、接口、类。字面量类型的问题在类型约束位置,会产生重复代码,可以使用类型别名解决该问题逻辑含义和真实的值产生了混淆,会导致修改真实的值的时候,产生大量的修改字面量类型不会进入到编译结果,比如我们想循环便利它的值,那么就不行。所以需要使用枚举如果定义一个枚举enum Gender{ male = "男", female = "女"}Gender.ma...原创 2019-12-15 14:06:13 · 338 阅读 · 0 评论 -
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 · 360 阅读 · 0 评论 -
TypeScript 概念
Ts 是静态的,js 一行一行的边解析边执行,Ts 增强了类型检查和面向对象。Ts 最终是通过 tsc 编译成 js 然后取执行的,所以最终执行的是 js 代码。原创 2019-12-11 13:20:20 · 165 阅读 · 0 评论