typescript入门

安装环境

• node i typescript -g
• 执行ts文件
  • • tsc xxx.ts/tsc xxx.ts -w /实时编译为同名js文件
    • node xxx.js执行文件
  • • node i -g ts-node安装ts-node
    • ts-node xxx.ts执行文件
  • • 创建tsconfig.json文件
    • tsc直接编译所有ts文件/tsc -w实时编译所有文件

变量声明

//基础
function sum(a: number, b: number): number {
	return a + b
}
let result: number = sum(123, 456)
console.log(result)//579

如果在声明时直接赋值，可以直接省略类型，赋的什么值，以后这个变量就是对应类型
let a = 1//此后a就是number类型

类型

• 自定义类型

type myType: boolean | string | 2
let test: myType
test = true
test = 'H'
test = 2
console.log(test);//2
---
let a: number | string
console.log(a)//undefined

• any任意类型（不建议使用）

let a: any
let b:number
a = 'A'
b = a
console.log(b,typeof b);//A,string
/*b = 'B'*/ //❗此时不能赋值字符串，报错：不能将类型string分配给类型number
b = 1
console.log(b,typeof b);//1,number

• unknown 安全的 any
  • 不可随便赋值

let a: unknown
let b: number
a = 1
/*b = a*/ //❗报错不能将类型unknown分配给类型number
//断言即可赋值
b = a as number
b = <number>a

• void
  • 不返回值，但是返回undefined或null不报错

function sum(): void {
	return undefined
}
function Sum(): void {
	return null
}
console.log(sum())//undefined
console.log(Sum())//null
function err(): void {
	return null | undefined//❗报错不能将number类型分配给void
}

• never
  • 不能返回值

function sum(): never {
	return undefined//❗报错不能将undefined分配给never
}
function Sum(): never {
	return null//❗报错不能将null分配给never
}

• Object

//一般声明
let obj: Object
obj = { name: 'xz', age: 9 }
console.log(obj, typeof obj)//{ name: 'xz', age: 9 } object
obj = () => {}
console.log(obj, typeof obj)//[Function: obj] function
let obj1: {}
obj1 = { name: 'xz' }

//固定属性
let obj: { name: string, age: number}

//可选属性?
let obj: { name: string, age?: 10 }

//含固定属性即可
let obj: { name: string, [xxx: string]: any }

• Function

//一般定义
let fun: Function

//有规则定义
let fun: (a: number, b: number, c?: number) => number
fun = function (n, m) {
	return n + m
}
fun(1, 2)

• Array

let arr: Array<number>
let arr2: number[]

• tuple元组
  • 固定长度的数组

let tup: [number,string]

• enum枚举
  • 既满足语义化，又可以优化存储

enum gender {
	male = 0,
	female = 1
}
console.log(gender.male);

• | 和 & 的使用
  • | 略
  • &
    • let arr: arr1 & arr2

tsconfig.json

{
	/*tsc默认编译所有ts文件*/
	/*tsc编译满足路径的ts文件*/
	"include": [
		"./src/*"
	],
	/*tsc编译除了满足路径的ts文件的ts文件*/
	"exclude": [
		"./index.ts"
	],
	/*继承配置文件*/
	/* "extends": "./...", */
	/*编译指定ts文件*/
	"files": [
		"./app.ts"
	],
	/*编译器选项*/
	"compilerOptions": {
    "strict":true,//所有严格模式总开关
		"target": "ES3", //编译为指定ES版本
		"module": "es2015", //指定模块化规范
		/* "lib": ["esnext",], */ //指定项目中用了哪些库
		"outDir": "", //将ts文件编译至何处
		/* "outFile": "", */ //将ts编译到一个js文件中，设置此项module必须为amd或system
		"allowJs": false, //编译js文件
		"checkJs": false, //检查js语法
		"removeComments": false, //去掉注释
		"noEmit": false, //不生成编译后的文件
		"noEmitOnError": false, //ts文件有错误才不生成编译后的文件
	}
}

webpack与typescript

略

类class

• 重构：优化代码
• 重写：函数名，参数个数及类型，返回值一样，必须在继承类里
• 重载：参数个数或者类型不一样
• super用来访问父类实例属性和方法的

//abstract开头的是抽象类，只能被继承，不能用来创建实例
abstract class Boss {
	topId: string
	constructor(topId: string) {
		this.topId = topId
	}
	sayHello() {
		console.log('boss');
	}
	//定义抽象方法，抽象方法必须在抽象类中，没有函数体{}，子类必须重写
	abstract must(): void
}
class Person extends Boss {
	//实例属性
	username: string = 'xz'
	name: string
	age: string

	//类属性
	static username: string = 'xz'

	//只读属性
	readonly id: string = '01'
	static readonly id: string = '01'

	//构造函数,实例创建时使用
	constructor(topId: string, name: string, age: string) {
		super(topId)//调用父类构造函数,
		this.name = name
		this.age = age
	}

	//继承方法，也可设置只读，静态
	sayHello() {
		super.sayHello()
	}
	//重写抽象方法
	must(): void {
		console.log('抽象方法');
	}
}
let person = new Person('0001', 'xuzhou', '18')
person.sayHello()//boss
person.must()//抽象方法
console.log(person)//Person { topId: '0001', username: 'xz', id: '01', name: 'xuzhou', age: '18' }

派生类的构造函数中必须写super()调用父类构造函数

interface接口

• 接口也可当自定义类型使用

//定义接口，接口内的属性和方法都不能有具值
interface myInter {
	name: string
}
//同名接口可以重复声明，最后的值为所有同名接口加起来的集
interface myInter {
	sayHello(): void
}
//implements需要遵守的接口，必须定义接口中的属性与方法
class MyClass implements myInter {
	name: string
	constructor(name: string) {
		this.name = name
	}
	sayHello() {
		console.log('接口中方法');
	}
}
let class_inter = new MyClass('xz')
class_inter.sayHello()//接口中方法

• public, private, protected
  • public默认，公共属性，实例可以访问
  • private私有属性，实例不能访问
  • protected受保护属性，只有自己和子类可以访问

class Person {
	name: string
	private _age: number
	constructor(name: string, age: number) {
		this.name = name
		this._age = age
	}

	//使用get,set实现对私有属性的控制访问与修改
	//访问器get最低支持版本为es5
	get age() {
		return this._age
	}
	set age(value: number) {
		if (value < 0) return
		this._age = value
	}
}
let person = new Person('xz', 30)
person.age = -30
console.log(person.age)//30

泛型<>

//给函数一个泛型
function fun<T>(a: T): T {
	return a
}
let result = fun<number>(2)
console.log(result)//2

//以类作为泛型，K extends inter后就相当于一个类
interface inter {
	num: number
}
function test<K extends inter>(b: K): number {
	return b.num
}
let val = test<{ num: number }>({ num: 999 })
console.log(val)//999

其他

• 类型断言与泛型语法
• 类型断言

let all: any = 'wwwww'
let a: string = all as string
let b: number = <string>all.length

• 非空断言
  • 值!
• 泛型

function fun<T,K>(arg: T,option: K): T{return arg}
fun<string,number>('xz',123)