TypeScript基础使用教程

原始类型

let num:number = 1
let name:string = '张三'
let isDone:boolean = true
let nl:null = null
let unde:undefined = undefined
let sym:symbol = Symbol('123')
let an:any = 666 // 可以是任意类型
let unusable: void = undefined // 声明void类型变量其值只能使null/undefined
function test():void {} // 此时void类型表示当一个函数无返回值

非原始类型

• object （不包含基础数据类型）

let obj:object = {a: 1}
let obj1:object = [1, 2, 3]
let obj2:object = 100 // 报错
let obj3:object = 'hello' // 报错

• Object（包含基础数据类型）

let obj:Object = {a: 1}
let obj1:Object = [1, 2, 3]
let obj2:Object = 360
let obj2:Object = 'world'

• {}（等同于Object）

let obj:{} = {a: 1}
let obj1:{} = [1, 2, 3]
let obj2:{} = 360
let obj2:{} = 'world'

数组类型

let arr1:number[] = [1,2, 3]  // 数组中得元素都是number
let arr1:any[] = ['wang',2, false]  // 数组中得元素可以是任意类型
// 泛型写法   作用：类型参数化
let arr2:Array<number> = [1, 2, 3]
// 元组(表示一个已知元素数量和类型的数组)
let arr3:[number, string, boolean] = [10, 'hello', true]

联合类型

// 表示值可以为字符转/数字/布尔值
let lh:string|number|boolean = 'jiuming' 
// 冒号后得 1 | 'good'指类型，表示值只能为 1或'good'
let constant:1|'good' = '1' 
// 表示obj中的属性一定得有a:1或者b:2或者两者都有
let obj:{a:1}|{b:2}

交叉类型

// 表示一个属性出现多次类型定义，都要满足
let obj:{name: string, age:number} & {height: number, age:18}
// 满足条件，必须有name/age/height属性，并且age为常量18
obj = {
	name: 'zhangsan',
	age: 18,
	height: 180
}

接口

// 定义接口类型 ——— 对象使用
interface IObj {
	name: string;
	age: number
}
let obj:IObj
obj = {
	name: 'mike',
	age: 26
}

// 定义接口类型 ——— 数组使用
interface IArr {
	// [idx:number] 下标类型 : 值类型
	[idx:number]: number|string
}
let arr: IArr = [1, 2, 3 '4', '5']

// 定义接口类型 ——— 函数使用
interface IFun {
	// 形参 ： 返回值类型
	(name:string, age:number): void
}
let fn:IFun = (name:string, age:number) => {}
fn("小明", 16) // 必选传递接口定义的参数

• 接口继承

interface IExternal {
	skin： string
}
interface IInternal {
	organ： string
}
interface IPerson extend IExternal, IInternal {
	heigth： number
}
// 继承后也需满足继承接口定义的属性和属性类型
let p:IPerson  = {
	skin: '古铜色'，
	organ: '身体机能健康',
	heigth: 180
}

• 接口同名（特点：合并同名接口的所有属性类型）

interface IObj {
	a: number
}
interface IObj {
	b: string
}
// 需满足两个同名接口定义的属性和属性类型
let obj:IObj = {
	a: 1,
	b: 'zxc'
}

• 缺省

interface IPerson {
	name: string
	age: number
	height?: number  // 表示该属性可以缺省（定义数据时可写可不写）
}
let man:IPerson = {
	name: 'wangming',
	age: 18，
	height: 180  // 可写可不写
}

• 只读

interface IPerson {
	readonly name: string   // readonly 属性只读
}
let p:IPerson  = {
	name: 'lisa'
}
p.name = 'Julie' // 报错 name为只读属性不可更改

类型别名

type strAndNum = string | number
let p:strAndNum = 1  // p可以是string 或者number类型

type ObjType = {
	a: string,
	b: number & 1  // number & 1 数字类型并且只能为1
}
let obj:ObjType  = {
	a: 'xxx',
	b: 1
}

// 接口和别名混用
interface IObj {
	a: string
}
type TStr = IObj['a']  // 等价于 type TStr = string
let s:TStr = 'hello'

type color = 'red' | 'bule' | 'green'
let c: color = 'red'  // c的值只能为'red' | 'bule' | 'green'

函数

// 接口定义函数类型
interface IFn {
	(name: string) => string
}
let fn:IFn = (name: string) => {
	return name
}
fn('wangwu')

// 类型别名定义函数类型
type TFn = (name: string) => string
let fn1:TFn = (name: string) => {
	return name
}

// 接口定义对象中的函数类型
interface IObj {
	fn: IFn // IFn 上面定义过的接口
}
let obj:IObj = {
	fn: (name) => {
		return name
	}
}
obj.fn('jordan')

// 类型别名定义对象中的函数类型
type TObj = {
	fn: (name: string) => void
}
let obj1:TObj = {
	fn: (name) => {}
}

枚举

enum Color {Red, Green, Blue} // 默认枚举元素编号从 0 开始
let c:number= Color.Red  // 值为0
let color:string = Color[0]  // 值为Red

enum Color {Red = 100, Green, Blue} // 可以手动的指定成员的数值
let n:number = Color.Red // 值为100
let n2:number = Color.Green// 值为101

泛型

// 泛型可以理解为类型参数化   T是一个标识符，可以自定义，表示某种类型
function fn<T>(n: T):T {  // 这里函数返回值指定为T, T为传递的不确定类型，n的类型又为T,所以该函数返回时只能为 n，返回其他的数据会报错
	return n
}
fn<string>('Bob')  // 此时 T 表示string
fn<boolean>(true)  // 此时 T 表示boolean
fn<'Mike'>('Mike')  // 类型传入的是个常量，此时 T 表示Mike，参数值也只能是Mike

// 多个类型传递
function fn2<T, G>(n:T, m:G) {
	return `${n}${m}岁了！`
}
fn2<string, number>('晓明', 18)

• 泛型 - 类型别名

type StrOrNum = string | number
type TObj<T,G> = {
	name: T,
	getName: () => G
}
let obj:TObj<StrOrNum , StrOrNum > = {
	name: '',
	getName() {
		return 'xiaoming'
	}
}

• 泛型 - 接口

type StrOrNum = string | number
interface IObj<T,G> {
	name: T,
	getName: () => G
}
let obj:IObj<StrOrNum , string> = {
	name: 007,
	getName() {
		return '007'
	}
}

• 泛型约束

// T extends string|number  // T 只能传string/number
interface IObj<T extends string|number, G = string> {
	name: T,
	getName: () => G
}
let obj:IObj<string> = {
	name: 'xxx',
	getName() {
		return 'xxx'
	}
}

类

// 定义类时也会同时定义一个同名的接口
class Person {
	// 定义属性时需声明属性类型，也可设置默认值
	name: string = 'xiaoming'
	constructor(n: string) {
		this.name = n
	}
	getName() {
		return this.name
	}
}
let p = new Person('嘻嘻')

// Person类也可做为接口使用
let obj:Person = {
	name: '666',
	getName() {
		return 'xxx'
	}
}