视口控制 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 var box = document.querySelector('#box') // 元素上触摸开始时触发 box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red' }) // 元素上触摸移动时触发 box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yellow' console.log('touchmove触发了！') }) // 手指从元素上离开时触发 box.addEventListener('tou ...

简介 gulp是前端自动化打包构建工具，所谓打包可以理解为把文件压缩, 整合, 移动, 混淆。gulp是一种基于流的打包构建工具。 文档：https://www.gulpjs.com.cn/docs/api/concepts/ 使用gulp，首先要全局安装gulp，全局安装只是可以使用其命令 # 安装 npm install --global gulp # 卸载 npm uninstall --global gulp # 查看版本 gulp -v 也可以局部安装，通过scripts运行。 常用API task() 创建一个基于流的任务 gulp.task('htmlHandler', function () { // 找到 html 源文件, 进行压缩, 打包, 放入指定目录 }) src() 找到源文件 // 找到指定一个文件 gulp.src('./a/b.html') // 找到指定目录下, 指定后缀的文件 gulp.src('./a/*.html') // 找到指令目录下的所有文件 gulp.src('./a/**') // 找到 ...

装饰器概念 装饰器-Decorators 在 TypeScript 中是一种可以在不修改类代码的基础上通过添加标注的方式来对类型进行扩展的一种方式 减少代码量 提高代码扩展性、可读性和维护性 在 TypeScript 中，装饰器只能在类中使用 装饰器的使用 使用装饰器需要配置文件中启用experimentalDecorators: true // 定义方法装饰器 function log(target: Function, name: string, descriptor: PropertyDescriptor) { /** * target : 被装饰的方法所属的类 * name : 当前被装饰方法的名称 * descriptor : 描述符 */ // 将原始方法提取出来 let fn = descriptor.value // 定义新的方法 descriptor.value = function (a: number, b: number) { // 调用原来的方法 const resul ...

模块导出与导入 导出 let a1 = 100 let a2 = 200 function hello() { console.log('小康你好') } export { a1, a2, hello } 没有默认导出 如果一个模块没有默认导出 // m1.ts export let obj = { x: 1 } 则在引入该模块的时候，需要使用下列一些方式来导入 // main.ts // error: 提示 m1 模块没有默认导出 import v from './m1' // 可以简单的使用如下方式 import {obj} from './m1' console.log(obj.x) // or import * as m1 from './m1' console.log(m1.obj.x) 导入 import { a1, hello } from './a' console.log(a1) hello() 模块编译 TypeScript 编译器也能够根据 ...

函数 function getVal<T>(obj: T, k: keyof T) { return obj[k] } let obj1 = { x: 1, y: 2 } let obj2 = { username: 'xiaokang', age: 18 } getVal<typeof obj1>(obj1, 'x') getVal<typeof obj2>(obj2, 'username') 泛型类 abstract class Component<T1, T2> { props: T1; state: T2; constructor(props: T1) { this.props = props; } abstract render(): string; } interface IMyComponentProps { val: number; } ...

类 class User { // 定义成员属性 id: number username: string // 定义成员方法 postArticle(title: string, content: string) { console.log(title, content) } // 构造函数 constructor(id: number, username: string) { // 构造函数的作用：创建类的函数，当类实例化时被调用 console.log('构造函数') this.id = id this.username = username } } const user = new User(1, '小康') user.postArticle('title', 'content') 在ts中可以简化定义成员属性和赋值的夫过程 class User { postArticle(title: string, content: ...

函数的标注 一个函数可以标注参数、返回值 function fn(a: string): string {}; let fn: (a: string) => string = function(a) {}; type callback = (a: string): string; interface ICallBack { (a: string): string; } let fn: callback = function(a) {}; let fn: ICallBack = function(a) {}; 可选参数和默认参数 可选参数 通过参数名后面添加 ? 来标注该参数是可选的 let div = document.querySelector('div'); function css(el: HTMLElement, attr: string, val?: any) { } // 设置 div && css( div, 'widt ...

接口定义 接口：对复杂的对象类型进行标注的一种方式，或者给其它代码定义一种契约（比如：类） 接口的基础语法定义结构特别简单 interface Point { x: number; y: number; } 上面的代码定义了一个类型，该类型包含两个属性，一个 number 类型的 x 和一个 number 类型的 y，接口中多个属性之间可以使用 逗号 或者 分号 进行分隔 我们可以通过这个接口来给一个数据进行类型标注 let p1: Point = { x: 100, y: 100 }; 注意：接口是一种 类型 ，不能作为 值 使用 interface Point { x: number; y: number; } let p1 = Point; //错误 可选属性 interface Point { x: number y: number // 加问好表示类型是可选的 color?: string } let p1: Point ...

基础类型 基础类型包括String、number、boolean // 通过冒号标注变量值的类型 let title: string = '小康' let age: number = 18 let isOk: boolean = true 空和未定义类型 let a: null let b: undefined // a与b无法被赋值，但是可以将其赋值给其他类型 let c: string = '1' c = b console.log(c) 如果声明了一个变量，但没有赋值，那么值默认为undefined，类型为any 避免赋值为空值时的配置 修改tsc配置文件，加入字段strictNullChecks { "compilerOptions": { "outDir": "./dist", "target": "ES2015", "watch": true, "strictNullChecks": true }, "include": ["./src/**/*"] } 此时就不能将空值赋值给 ...

安装 npm i typescript -g tsc -v 编译ts文件 tsc 文件名 即可编译ts文件。 一些有用的编译选项 编译命令 tsc 还支持许多编译选项，这里我先来了解几个比较常用的 –outDir 指定编译文件输出目录 tsc --outDir ./dist ./src/hello.ts –target 指定编译的代码版本目标，默认为 ES3 tsc --outDir ./dist --target ES6 ./src/hello.ts –watch 在监听模式下运行，当文件发生改变的时候自动编译 tsc --outDir ./dist --target ES6 --watch ./src/hello.ts 通过上面几个例子，我们基本可以了解 tsc 的使用了，但是大家应该也发现了，如果每次编译都输入这么一大堆的选项其实是很繁琐的，好在TypeScript 编译为我们提供了一个更加强大且方便的方式，编译配置文件：tsconfig.json，我们可以把上面的编译选项保存到这个配置文件中 编译配置文件 我们可以把编译的一些选项保存在一个指定的 json 文件 ...