TS基础知识

---

文章名称

---

提示：以下是本篇文章正文内容，下面案例可供参考

全局安装ts

npm i -g typescript

// 查看是否安装成功
tsc -v

一 TS基础

 
 

1. 1字符串，数字，布尔类类型

var str:string = 'aaaaa'

var num:number = 123

var flag:boolean = true
// 不确定未来是否只是同一类型，可以指定多个类型
var str:string | number = '123'
str = 123

 
 

1.2 数组

// 数组内全部为字符串
var arr: string[] = ['1', '2', '3']

var arr:Array<string> = ['1', '2', '3']

// 数组内可以是字符串和数组
var arr: (string | number)[] = ['1', 2, '3']

var arr:Array<string | number> = ['1', 2, '3']

// 数组内要么全是数字要么全是字符串
var arr: string[] | number[] = ['1', '2', '3']
var arr: string[] | number[] = [1, 2, 3]

 
 

1.3 对象

// 定义一个接口
interface IObj = {
	readonly id:number,  // 只读属性，不允许修改
	name:string,
	age:number,
	sex?:number,    // 可选属性，可有可无
	[propName:string]:any   // 任意属性
}

var obj:IObj = {
	name: '小明',
	age: 18
}

var obj2:any = {} // 任意类型

 
 

1.4 函数

function test(a:string, b:number, c?:string):string {
	return a + b
}
// 通过接口定义
interface IFun{ (a:string, b:number, c?string):string }

var test: IFun = function(a:string, b:number, c?:string):string {
	return a + b
}

interface IObj = {
	name:string,
	age:number,
	getName:(a:string)=>string
}

var obj:IObj = {
	name: '小明',
	age:18,
	getName:(name:string)=> {
		return name
	}
}

 
 

1.5 any和void

any — 任何类型
void — 空值，表示没有任何返回值的函数

cosnt fun:void () => {
	console.log(1111)
}

 
 

1.6 类型断言

function add(a:any, b:any):any {
	return (a as string).length + b
}

 
 

2 进阶

 

2.1 类型别名

type s  = string
let str1:s = 'aaa'
let str2:s = 'bbb'

type all = string | number | boolean
let a:all = 123
let b:all = 'abc'
let c:all = true

// 字符串字面量类型
type strValue = '张三' | '李四' |  '王五'

let name: strValue = '张三'

 
 

2.2 元组Tuple

数组是合并了相同类型的对象，而元组是合并不同类型的对象

// 定义时，类型与数据的个数和位置要一一对应
let arr:[string, number] = ['123', 123]
// 但是可以向数组中追加元素，此时，只需要是属于定义中的类型即可
arr.push('456')
arr.push(456)
arr.push(true) // 报错

 
 

2.3 枚举

枚举类型指类型被限制在一定范围内，比如一周七天，

enum WeekType = {
	Monday,       // Monday = 1,如果赋值，下面的会自增，如果不赋值，则从0开始
	Tuesday,
	Wednesday,   // Wednesday = 2 ，则下面的值会根据前面的值进行自增
	Thursday,
	Friday,
	Saturday,
	Sunday
}

console.log(WeekType.Monday) // 0

 
 

2.4 类

class Person {
	// 定义实例中数据的类型
	name: string
	age: number
				// 定义实例化对象时，传入参数的类型
	constructor(name: string, age:number) {
		this.name = name
		this.age = age
	}

}

class Person {
	public name = '小明',  // 共有属性
	private list:sting[] = []  // 私有属性，只能在类的内部被访问，可以被子类继承，但是不能在子类中使用
	protected age: number = 18 // 私有属性，只能在类的内部被访问，可以被子类继承，也可以在子类中使用
	readonly sex = '男'  // 只读属性
}

// 通过abstract修饰的类，是抽象类，只能被继承，不能被实例化
abstract class Car {
}

2.5 泛型

1. 基本写法

function fun1<T>(data:T):T {
	return data
}

let num:number = fun1<number>(10)

let str:string = fun1<string>('10')

function fun2<T, G>(d1:T, d2:G):string {
	return d1 + d2
}

let result:string =  fun2<number, string>(1, '2')

2. 泛型的类型别名 和 接口

// 类型别名

type TStrOrNum = string | number
type TObj<T, G> = { text:T, fun:()=>G }

let obj:TObj<TStrOrNum, TStrOrNum> = {
	text: '',
	fun() {
		return 'xxx'
	}
}

接口形式
interface IObj<T, G> {
	text:T,
	fun:()=> G
}

let obj: IObj<TStrOrNum, TStrOrNum> = {
	text: '',
	fun() {
		return 'xxx'
	}
}

3. Partial 和 Required

interface IPerson {
	name:string,
	age:number,
	sex:string 
}
/*
type Partial = { [P in keyof T]?:T[P] | undefined }
{
	name?string|undefined,
	age:?number|undefined
}
*/
var p1:Partial<IPerson> = {
	name: '张三',
	age: 18
}