typescript
神奇大叔
这个作者很懒,什么都没留下…
展开
-
typescript 类型文件查找规则
第三方库:如果对应的npm包存放在@types中,要使用必须下载,下载的第三方库的类型文件一般在node_modules/@types下,默认情况下,所有的 @types 包都会在编译时应用,任意层的 node_modules/@types 都会被使用,进一步说,在 ./node_modules/@types/ , …/node_modules/@types/, …/…/node_modules/@types/ 都被应用{ "compilerOptions": { "t原创 2022-05-14 16:56:51 · 436 阅读 · 0 评论 -
typescript Symbol类型
Symbol在es6出现的新类型,ts中使用时需要先配置1、配置tsconfig.json "lib": ["es6"], 需要dom时还要将"dom"添加进lib,如:console.log语句2、特性 (1)不能和其他值计算,如加键、字符串拼接等 (2)可以调用.toString()返回字符串 (3)本身作为true类型存在 (4)类似for in遍历时,不会遍历symbol属性 3、语法 let x=Symbol(); 即使再次调用也不会生成相同值 let x=Sym原创 2021-03-08 21:58:44 · 1761 阅读 · 0 评论 -
webpack typescript使用eslint
1、下载 cnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint2、配置.eslintrc.json { "parser":"@typescript-eslint/parser", "plugins":["@typescript-eslint"], "parserOptions": { "project":"./tsconfig.json" }, "ex原创 2021-03-03 15:55:03 · 629 阅读 · 1 评论 -
typescript JSDoc对js文件进行类型检查
(1)修改tsconfig.js "checkJs": true, 对js文件进行类型检查你可以通过添加// @ts-nocheck注释来忽略类型检查;相反,你可以通过去掉--checkJs设置并添加一个// @ts-check注释来选则检查某些.js文件。 你还可以使用// @ts-ignore来忽略本行的错误。如果你使用了tsconfig.json,JS检查将遵照一些严格检查标记,如noImplicitAny,strictNullChecks等。 但因为JS检查是相对宽松的,在使用严格标记时原创 2021-03-02 23:53:27 · 1710 阅读 · 0 评论 -
typescript reflect-metadata设置元数据
在定义类或者类方法的时候,可以设置一些元数据,可以获取到在类与类方法上添加的元数据,元数据指的是描述东西时用的数据。(1)下载 cnpm i reflect-metadata --save(2)使用 方式一:在装饰器函数中使用 方式二:充当装饰器使用...原创 2021-03-02 20:57:08 · 1288 阅读 · 0 评论 -
typescript 使用jsx语法
(1)修改tsconfig.json "jsx": "preserve", 有三种模式 preserve:生成代码中会保留JSX以供后续的转换操作使用(比如:Babel).另外,输出文件会带有.jsx扩展名。 react:会生成React.createElement,在使用前不需要再进行转换操作了,输出文件的扩展名为.js。 react-native:相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js 模式 输入 输出 输出文件扩展名原创 2021-03-02 15:34:17 · 4317 阅读 · 0 评论 -
webpack 解析ts、tsx语法
1、解析ts语法(配置loader或使用Babel) 方式一:配置loader module:{ rules:[ 方式一:ts-loader { test:/\.tsx?$/, use:[ { loader:'ts-loader', options:{ transpileOnly: true, 只进行语法转换,不进行类型校验,提高构建速度 } } ]原创 2021-03-01 22:51:25 · 6797 阅读 · 0 评论 -
typescript 工程引用
支持将TypeScript程序的结构分割成更小的组成部分。即一个项目中构建多个单独工程(1)在所有工程的基础tsconfig.json配置中添加 { "compilerOptions": { "composite":true, 开启工程引用和增量编译 "declaration":true 生成声明文件 } } 输出outDir目录由各自工程指定 (2)子工程的tsconfig.json { "extends":'基础工程路径', "compiler原创 2021-03-01 22:11:51 · 924 阅读 · 0 评论 -
typescript 相对和非相对模块导入解析策略
原创 2021-03-01 20:49:05 · 319 阅读 · 0 评论 -
typescript namespace声明添加新类型、值和命名空间
多个相同命名空间会合并(1)给类添加静态成员 class C { } namespace C { export let x: number; } let y = C.x; (2)给类添加一个命名空间类型 class C { } namespace C { export interface D { } } let y: C.D; (3)可以给接口、函数、类型别名添加(不能给变量添加) namespace X { export interface Y { z原创 2021-02-28 22:07:39 · 1008 阅读 · 0 评论 -
typescript /// <reference types=“...“ />指令和模块import区别
(1)依赖全局库 1、如果你的库依赖于某个全局库,使用/// <reference types="..." />指令: /// <reference types="someLib" /> function getThing(): someLib.thing;(2)依赖模块 1、如果你的库依赖于模块,使用import语句: import * as moment from "moment"; function getThing(): moment;(3)原创 2021-02-28 21:54:09 · 5853 阅读 · 1 评论 -
typescript import、export相关
支持js的所有导出方式 export:导出声明或表达式(export {a,b,c}会被认为是声明列表而非对象),不能导出单独变量(如:export a) export default:能导出单独变量(1)导出接口 任何声明(比如变量,函数,类,类型别名或接口)都能够通过添加export关键字来导出。 export interface {...}; export type a=c; 引入时和导出普通类型相同:import {x} from 'x.ts'(2)导出重命名 exp原创 2021-02-27 21:35:41 · 8947 阅读 · 0 评论 -
typescript package.json的“scripts“命令
1、先编译ts文件然后运行编译后的js文件 "start": "tsc && node ./dist/index.js", 修改"outDir"和"rootDir" 确定编译后的ts文件输出路径以及项目根路径原创 2020-07-24 10:35:44 · 820 阅读 · 0 评论 -
typescript 报错define is not defined...
修改tsconfig.json "module"修改为"module": "commonjs",原创 2020-07-24 10:32:56 · 5163 阅读 · 0 评论 -
typescript mixins混入
每个类都只定义了一个特定的行为或功能。使用它们来创建一个新类,同时具有这两种功能。 (1)定义功能类 class Disposable { isDisposed: boolean; dispose() { this.isDisposed = true; } } class Activatable { isActive: boolean; activate() { this.isActi原创 2020-07-22 17:15:27 · 532 阅读 · 0 评论 -
typescript 装饰器
1、修改tsconfig.json "experimentalDecorators": true "emitDecoratorMetadata": true, 2、使用 (1)类装饰器 (1)装饰器本身是一个函数,逻辑判断后return返回的装饰器也必须是函数 (2)类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。 (3)如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。 即先执行类的构造函数,再执行装饰器中的 (4)装饰原创 2020-07-22 16:58:58 · 384 阅读 · 0 评论 -
typescript 使用parcel编译ts文件
当页面直接引入ts文件时,浏览器不支持解析ts语法,引入parcel解决1、下载 cnpm intall -D parcel@next2、使用 在项目package.json中,修改"scripts"命令 "xx": "parcel ./xx/index.html"3、页面引入ts文件,打开窗口提示的网址即可代码示例:package.json{ "name": "typescript", "version": "1.0.0", "description": "publ原创 2020-07-22 09:25:01 · 691 阅读 · 0 评论 -
typescript 解析import语法
1原创 2020-07-21 21:39:49 · 3368 阅读 · 0 评论 -
typescript 命名空间namespace
作用:将项目模块化,减少全局变量(1)使用 namespace xx{ 内容... 需要暴露的内容 export ... } 命名空间在js文件中会被转换成 var xx; (function(){ 多个类会被分别放进自启动函数中 var 类名=(function(){ 内容1... }) var 类名=(function(){ 内容2... }) 其他内容会不变 暴露的内容:原创 2020-07-21 21:29:58 · 2832 阅读 · 0 评论 -
typescript tsconfig.json项目配置
打包编译 (1)将package.json中'scripts'内 添加命令"build":"tsc -w" -w:自动监测ts文件的改变 (2)修改tsconfig.json "outDir": "./xx", 即可指定将ts文件输出到项目最外层目录开始的指定目录 同时运行多条命令 (1)下载 cnpm install -D currently...原创 2020-07-21 11:45:33 · 2025 阅读 · 1 评论 -
typescript 单例模式
1、将构造器私有化2、内部提供私有静态属性--存储对象的地址,将其变成类属性而非对象属性,避免生成后未与类绑定3、提供公开静态方法通过构造器生成单例,若不是静态方法,则要先生成对象才能调用,破坏了单例代码示例:class Single{ private static instance:Single; private constructor(){} static getInstance(){ if(!this.instance) {原创 2020-07-21 10:04:40 · 603 阅读 · 0 评论 -
typescript 类型约束(:普通约束、接口约束、type约束)
1、普通类型约束 let a:string=xx2、指定类型和属性 let a:{属性1:string,属性2:string}=x 必须是一个对象,且约束了对象属性3、type约束 type可以声明基本类型别名,联合类型,元组等类型 (1)基本使用 type x={ age:number; } type xx=Number (2)交叉(实现类似接口继承) type xxx=x&{sex:string} (3)交叉接口原创 2020-07-20 15:33:45 · 2772 阅读 · 0 评论 -
typescript 泛型、索引类型查询和索引访问、映射类型、条件类型、映射类型推断
在定义函数、接口或类不指定具体类型function 名称<T>(x:T,y:T):Array<T>{ ...}名称<string>('str','str2');原创 2020-07-06 21:38:09 · 1148 阅读 · 0 评论 -
typescript 声明文件.d.ts
所有的引入的js库,需要ts的语法提升等,都必须要有声明文件1、创建声明文件 xx.d.ts 2、创建声明语法,在xx.d.ts文件中 declare var 库名:(selector:string)=>any; 类型是个函数3、加载,在使用该库的文件 库名('xxx') 4、下载声明文件 cnpm install @types/名称 --save-dev代码示例:jquery.d.tsdeclare var jQuery:(selector:string)=>原创 2020-07-06 20:24:45 · 5537 阅读 · 0 评论 -
typescript 类
和java一样代码示例;//staticclass An{ static is(a){ return 1 }}An.is(2);class Dog{ static age=20;}let age:number=Dog.age;class Cat{ a=1; private b=1; constructor(){...原创 2020-03-21 14:29:02 · 192 阅读 · 0 评论 -
typescript 函数
定义函数两种方式 方式一 function xx(x:类型,y:类型):返回值类型{ ... } 方式二 let xx:(x:类型,y:类型)=>返回值类型=function(x:类型,y:类型):返回值类型{ ... }可选参数 function xx:(x:类型,y?:类型):返回值类型{ ... } 其中: 可选参数必须放...原创 2020-03-20 18:41:17 · 187 阅读 · 0 评论 -
typescript 接口、索引签名
接口:接口设置的限制,实现的接口同样存在interface xx{ 属性名:类型; readonly 属性名:类型; //数据只读不可更改 属性名?:类型; //属性可实现可不实现 [propName:string]:类型; //可以追加指定类型属性,任意类型值改为any}接口的实现:第一种 let x:xx={ 实现接口中的属性 属性名:类型=值; ...原创 2020-03-20 17:09:06 · 954 阅读 · 0 评论 -
typescript 数据类型、函数返回值、类型断言、联合类型、类型兼容
变量类型let 变量名:类型联合类型let 变量名:类型1|类型2函数返回值function xx():类型{ ...}未声明类型变量且未赋值可以变成任意类型 let me;未声明类型变量赋了值,只能使用值的类型 let me='123'代码示例:let flag:boolean=true;let bool:boolean=Boolean(1); //也...原创 2020-03-20 16:16:01 · 3366 阅读 · 0 评论 -
typescript 安装环境、启动编译
1、安装 cnpm install -g typescript 2、创建文件以.ts为后缀3、tsc 文件名.ts 将ts编译成js原创 2020-03-20 15:22:32 · 231 阅读 · 0 评论