typeScript 精简速通快速上手篇(从0到1就是这个简单)

46 阅读6分钟

基本类型定义

let a: string
let b: number
let c: boolean
function count (x: number, y:number): number {} // x,y 和reutrn返回值都必须是number类型

ts类型

// 基本类型
stringnumberboolean,array,nullundefined,objcet
// 新类型
anyunknownnevervoid,tuple,enum
// 自定义类型
typeinterface

注意:ts 类型大小写有区别,String 大写是包装对象,string是基元,首选小写;

any 任意类型

let a:any // any 任意类型
a = 1
a = false
let b // any 隐士类型

// 注意any 特点
let x: string
x = a // any 类型赋值给然后类型,都会配感染成any。生化感染。

unknown 不确定类型

let a:unknown // unknown 未知类型
a = 1
a = false
let b: string
b = a // 报错! 不确定类型不能直接给确定类型
// 赋值 方法一 
if(a typeOf === 'string') {
	b = a // 可以
}
// 方法二 断言
b = a as string // 写法1
b = <string>a // 写法2

never 任何类型都不行

never 是限制函数返回值的

// never 不容许有返回值
// return 不能使用
// 只有满足其一才能使用 1.中途报错, 2.永远执行
function demo (): never{
	demo() // 可以
	throw new Error('demo') // 可以
} 
// 不经常用,在一些特殊场景使用

void 限制函数返回值(函数返回值为空,但是调用者不应依赖返回值)

void类型和undefined类型区别就是undefined类型返回值是可以用的

function demo ():void {
	console.log('hello')
	return undefined // 只能返回 undefined,不写默认隐式返回 undefined
}
// 相当于只能调用,不能使用它的返回值

特殊情况:void

// 如果你用 类型定义 void ,那么它的返回值就会不限制。但是返回值也不能使用。
// 为了兼容箭头函数 返回值的问题做取舍
type A = () => void
const fun:A = () => {
	return 999
}
let x = fun()
console.log(x) // 999 可以打印,但是使用时会报错。

tuple 元组类型

tuple 是形式。并不是关键字(其实就是一种特殊的数组类型)

let arr = [string,number] // 固定的
let arr = [string,number?] // number可选 
let arr = [string,...number[]] // number 任意多个string

enum 枚举类型

enum dome {
//  left = 10 可以改变递增索引,并且后面的值会从11开始 // 也可以给 字符串,字符串会丢失反向映射
	top,
	botton,
}
// enum 会处理成 {'top': 0,'botton': 1, 0: 'top',1: 'botton'}
console.log(dome.top) // 0
console.log(dome[0]) // 'top'
// 使用枚举
function dome (str:dome) {
	if(str === dome.top) {
		return '1我为执行了'
	} else if(str === dome.botton) {
		return '2我为执行了'
	}
}
dome(dome.top)

// 常量枚举
// 常量枚举做了内联优化,执行完结果后会吧,枚举给删了,避免生成额外的代码
const enum dome {
	top,
	botton
}
console.log(dome.top) // 0

type 定义类型

type Status = number | number
const str: Status

交叉类型

type A = {
	height: number;
	width: number;
}
type B = {
	num: number,
	str: string
}
// 交叉
type AB = A & B

语法

// ? 问号就是就是 b 属性可有可无,如:obj = {a: '11' }
let obj: {a: string; b?: number}
// [key:string] 索引签名,动态接受多个参数。key不是固定的可以随便写
let obj: {a: string, [key:string]: any}

范型定义

// 限制数组,并且数组内的只能是字符串
// 写法一
let arr1: string[]
// 写法二
let arr2: Array<string>

class

定义类

class Person {
	name: string
	age: number
	constructor(name: string, age: number) {
		this.name = name
		this.age = age
	}
	speak() {
		console.log(this.name,this.age)
	}
}
// 继承类
class Student extends Person {
	grade: string
	constructor(name: string,age:number,grade:string) {
		super(name,age)
		this.grade = grade
	}
	study() {
		console.log(this.name)
	}
	// override  可以覆盖 继承
	//override speak() {
	//	console.log(this.name,this.age)
	//}
}
const a = new Person('颤三'18)
const b = new Student('颤三'18, '高一')

属性修饰符

public

  • 可以在类的内部,子类,外部使用 默认会都加这
class Person {
	public name: string
	age: number
	constructor(name: string,age:number) {
		this.name = name
		this.age = age
	}
	study() {
		console.log(this.namethis.age) // 这里可以使用
	}
}

const a = new Person('颤三'18)
a.name
a.study()

简写

class Person {
	constructor(public name: string, public age: number) {}
}

protected 受保护的

可以在类的内部,子类使用; 外部不能使用

class Person {
	constructor(
		protected name: string, 
		protected age: number
	) {}
	protected  getDetails() {
		this.name // 可以使用
		this.age
	}
}
const a = new Person()
a.name // 无法访问
a.getDetails() // 无法访问

private 私有的

  • 只有 内部可以使用
class Person {
	constructor(
		public name: string, 
		private age: number
	) {}
	private getDetails() {
		this.name // 可以使用
		this.age
	}
}
const a = new Person()

readonly 只读

class Person {
	constructor(
		readonly name: string, 
		private age: number
	) {}
	readonly getDetails() {
		this.name // 可以使用
		this.age
	}
}
const a = new Person()

抽象类

抽象类 不能被实例化 new,存在的意义就是被继承,抽象类可以有普通方法,也可以有抽象方法。

abstract class Package {
	// 构造方法
	constructor(public weight: number) {}
	// 抽象方法 抽象方法不能有返回
	abstract  calculate():number
	// 具体方法
	printPackage() {
		// 这里可以统一操作抽象类,抽象类是从继承那里拿来的
		console.log(this.calculate())
	}
}

抽象类使用()

class StandardPackage extends Package {
	constructor(
		weiaht: weight: number,
		public unitPrice: number
	) {super(weight)}
	calculate(): number {
		return this.weight * this.unitPrice;
	}
}
const s1 new StandardPackage(10, 5)
s1.printPackage()

interface(接口)

用接口定义 class 的结构

interface User {
	name: string
	change:(n:number): void
}
// 使用方法,类必须要用implements 实现
class Person implements PersonInterFace{
	constructor(public name: string) {}
	change(n:number): void {
		console.log(n)
	}
}

接口继承

interface User {
	name: string
}
interface User extends UserInfor {
	grade: string
}

接口可以重复定义(会自动合并)

interface User {
	name: string
}
interface User {
	age: string
}
// 会自动合并

用type和interface 区别

interface:更专注定义对象和类的建构,支持继承,合并。主要用于对象类型定义;接口和类也能合并。

type: 可以为任何类型创建别名(包括基本类型、联合类型、交叉类型等)。可用于任何类型;

interface与抽象类的区别

相同点:都用于定义一个类的格式

不相同:1.接口只能描述结构,不能实现代码,一个类可以实现多个接口

2.抽象类可以有抽象方法,也可以有具体方法,一个类只能继承一个抽象类

范型<>

用来 定义未指定的类型,在具体使用时才会被指定;

function logData<T,U>(data:T,data2:U): T | U{}
logData<number, string>(11,'1312')
logData<string, number>('1231', 111)

范型接口

interface PersonInterface<T> {
	name: string,
	age: number,
	extraInfo: T
}
let p: PersonInterface<number> = {
	name: 'tom',
	age: 18,
	extraInfo: 666,
}
// 方法二
interface PersonInterface<T> {
	name: string,
	age: number,
	extraInfo: T
}
type ExtraInfo {
	title: string,
	xdd: number,
}
let p:  PersonInterface<ExtraInfo> = {
	name: '11',
	age: 12,
	extraInfo: {
		title: '123'
		xdd: 1
	}
}

约束范型

// 约束必须是number | string
type AgeType = number | string
interface User<T extends AgeType> {
	name: string
	age: T
}
let obj: User<number> = {
	name: '张三',
	age: 12
}

类型声明文件

.d.ts 给.js 文件加检查和提示的。

总结

TypeScript 对类的增强特性(访问修饰符、继承、抽象类、静态成员)大幅提升了面向对象编程的灵活性和安全性:

  • 访问修饰符实现了精准的权限控制,避免不合理的属性修改

  • 继承机制支持代码复用和多态设计

  • 抽象类定义了规范,强制子类实现核心功能

  • 静态成员适合定义工具方法和常量,简化调用方式

这些特性使得 TypeScript 特别适合开发大型、复杂的应用程序,有效降低代码维护成本。

下期我们讲进价 ts装饰器(特殊的函数)