TypeScript

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

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

函数 12345678910111213141516function 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') 泛型类 1234567891011121314151617181920212223242526272829abstract class Component<T1, T2> { props: T1; state: T2; constructor(props: T1) { this.props = props; } ...

类 123456789101112131415161718192021class 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中可以简化定义成员属性和赋值的夫过程 1234 ...

函数的标注 一个函数可以标注参数、返回值 1234567891011function 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) {}; 可选参数和默认参数 可选参数 通过参数名后面添加 ? 来标注该参数是可选的 12345678let div = document.querySelector('div');function css(el: HTMLElement, attr: string, val?: any) {}// 设置div &&a ...

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

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

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