目录
typescript入门
1、环境
* 需要nodejs环境
* 安装：npm i -g typescript
* 查看版本：tsc -V
* 手动编译：tsc helloworld.ts
2、基本数据类型
| 名称 | 类型 |
|---|---|
| 布尔值 | boolean |
| 数字 | number |
| 字符串 | string |
| undefined和null | undefined/null |
| 数组 | number[]/Array<number> |
| 元祖 | [string,number,boolean] |
| 枚举 | enum Color{red=1,green,blue} console.log(Color[1]) //red |
| any和void | any/void |
| object | object |
| 联合类型 | string|number |
| 类型断言 | (<string>str)/(str as string) |
| 类型推断 | let a=100 //number类型 let a //any类型 |
| 备注 | 首字母大写为包装类型，首字母小写为基本数据类型 |
3、接口
a、普通接口
interface IPerson {
// 只读
readonly name: string
// 可有可无
age?: number
}
b、函数式接口（只有一个方法的接口）
interface IPerson {
(arg:string):boolean
}
c、未知属性接口
interface IProp{
[propName:string]:any
}
d、数组接口
interface IArr{
[index:number]:any
}
4、类
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sleep() {
console.log(this.name, this.age)
}
}
5、继承
interface IPerson {
sleep(arg: string): boolean
}
interface IAnimal extends IPerson {
eat(arg: number): boolean
}
class Person implements IAnimal {
gender: string
constructor(gender: string) {
this.gender = gender;
}
eat(arg: number): boolean {
return false;
}
sleep(arg: string): boolean {
return false;
}
}
class Animal extends Person {
constructor(gender: string = '男') {
super(gender);
}
work() {
super.sleep('aaa')
}
}
6、多态
// 与java不同，typescript无法强制类型转换
let person: IAnimal = new Person()
7、访问修饰符
public（默认）：本类、子类、外部可以访问
private：本类可以访问
protected：本类、子类可以访问
readonly:只读修饰符（只能在构造函数中修改属性值）
备注：访问修饰符也可用在构造函数的参数上，此时构造函数的参数会成为类的属性
8、存取器（getter和setter）
// 只设置getter那就只能读，只设置setter那就只能写，都不设置或都设置可读可写
class Animal {
private _name: string
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
}
9、静态成员
// 与java不同实例对象无法访问静态成员
class Animal {
// 类中有内置的name属性，所以name不能作为静态成员
static age: number
static eat() {
}
}
10、抽象类
abstract class Animal {
abstract name: string
abstract eat()
}
class Person extends Animal {
// 与java不同，抽象属性需要显式继承
name: string;
eat() {
}
}
11、函数
// 方式一
function aaa(bbb: string): number {
return 1
}
// 方式二
const bbb: (ccc: string) => number = function (ccc: string): number {
return 1
}
12、参数
a、默认参数
function aaa(bbb: number = 1): void {
}
b、可选参数
function aaa(bbb?: number): void {
}
c、剩余参数（java叫动态参数）
// 剩余参数只能放在所有参数的最后
function aaa(...bbb: number[]): void {
}
13、函数重载声明
function aaa(bbb: string, ccc: string): string
function aaa(bbb: number, ccc: number): number
function aaa(bbb, ccc) {
return bbb + ccc
}
14、泛型
a、泛型函数
function aaa<K, V>(bbb: K, ccc: V): [K, V] {
return [bbb, ccc]
}
b、泛型接口
interface aaa<K, V> {
bbb: K
ccc(): V
}
c、泛型类
class aaa<K, V> {
bbb: K
ccc: (ddd: V) => number = function () {
return 1
}
}
d、泛型约束
interface ILength {
length: number
}
function aaa<T extends ILength>(bbb: T): number {
return bbb.length
}
15、声明文件
/*
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。
声明语句：如果需要ts对新的语法进行检查，需要要加载了对应的类型说明代码
declare var $: (selector: string) => any;
声明文件：把声明语句放到一个单独的文件（jquery.d.ts）中，ts会自动解析到项目中所有声明文件
下载声明文件：npm install @types/jquery --save-dev
*/
import $ from "jquery"
$('选择器')
16、内置对象
a、ECMAScript的内置对象
Boolean
Number
String
Date
RegExp
Error
b、BOM和DOM的内置对象
Window
Document
HTMLElement
DocumentFragment
Event
NodeList
c、typescript扩展类
canvas元素对象：HTMLCanvasElement
form元素对象：HTMLFormElement
17、类型别名
a、自定义类型起别名
type aaa=string|number
b、限制字符串选择
type sex='男'|'女'
18、命名空间
// ES2015模块语法优于自定义TypeScript模块和名称空间
export namespace com{
export namespace wuxi{
export namespace web{
export class Person {
name:string
constructor(name: string) {
this.name = name
}
}
}
}
}
19、装饰器
a、普通装饰器（无法传参）
// 定义一个装饰器
function logger(params:Function) {
// params参数为所装饰的类本身
params.prototype.aaa = 123
params.prototype.bbb = function() {
return 456
}
}
@logger
class Mapper {
save() {
console.log('新增')
}
}
function logger(params:any) {
// 会重写所装饰的类的属性和方法
return class extends Mapper {
baseMapper='baseMapper'
constructor(baseMapper: string) {
super(baseMapper)
this.baseMapper = baseMapper
}
save() {
console.log('打印', params)
super.save()
}
}
}
@logger
class Mapper {
baseMapper='mapper'
constructor(baseMapper: string) {
this.baseMapper = baseMapper
}
save() {
console.log('新增')
}
}
b、装饰器工厂（可传参）
// 定义一个装饰器
function logger(params:string) {
return function(target:Function) {
console.log(params)
// target参数为所装饰的类本身
console.log(target)
}
}
@logger('日志')
class Mapper {
save() {
console.log('新增')
}
}
c、属性装饰器
function logger(params:any) {
// 修饰静态属性target为构造函数，修饰成员属性target为原型对象
return function(target:any, attr:any) {
console.log(target)
console.log(attr)
target[attr] = params
}
}
class Mapper {
@logger('日志')
static baseMapper='baseMapper'
@logger('日志')
mapper='mapper'
}
d、方法装饰器
function logger(params:any) {
// 修饰静态方法target为构造函数，修饰成员方法target为原型对象
// methodName：方法名
// desc：方法描述信息
return function(target:any, methodName:any, desc:any) {
console.log(params)
console.log(target)
console.log(methodName)
console.log(desc)
// desc.value为所修饰的方法的函数对象
const fun = desc.value
desc.value = function(obj:any) {
console.log(obj)
fun.apply(this, obj)
}
}
}
class Mapper {
@logger('日志')
save(obj:any) {
console.log(obj)
}
}
e、方法参数装饰器
function logger(params:any) {
// 修饰静态方法target为构造函数，修饰成员方法target为原型对象
// methodName：方法名
// paramsIndex：参数索引
return function(target:any, methodName:any, paramsIndex:any) {
console.log(params)
console.log(target)
console.log(methodName)
console.log(paramsIndex)
}
}
class Mapper {
save(@logger('日志')obj:any) {
console.log(obj)
}
}
f、装饰器的执行顺序
* 属性 -> 方法 -> 方法参数 -> 类
* 如果有多个同样的装饰器，它会先执行后面的
