TypeScript笔记-优快云博客

本文介绍了如何搭建TypeScript开发环境，通过创建并编译TS文件展示其基本语法，包括变量声明、函数、数组、元组、联合类型、接口及类的使用。深入探讨了函数参数和返回值的类型约束，以及类的构造函数和成员方法。此外，还讲解了接口在抽象数据结构中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、TypeScript入门

1.1、开发环境搭建

使用 npm 安装 Typescript

cnpm i -g typescript

1.2、TypeScript入门

创建一个空目录，例如： d:\prject ，在该目录下创建文件 index.ts

//声明变量，要指定变量的类型
const hello : string = 'hello world!'
console.log(hello)

在该目录下启动 cmd 命令行工具，执行：

# 把ts文件编译为js文件
tsc index.ts

# 运行js文件
node index.js

执行完上面命令后，就会在控制台打印输出的内容。

2、TypeScript基本用法

2.1、函数

//声明函数，要指定参数的类型和返回值的类型
function sum(i: number, j: number): number {
	
	return i + j
}

const result = sum(1,2)
console.log(result)

2.2、变量与数组

//声明数组
const arry: string[][] = [['a'],['b','c']]
console.log(arry.length)

console.log('---------------分割线---------------')

//循环语句
for(var i: number = 0; i< 5; i++){
	console.log(i)
}

console.log('---------------遍历数组---------------')
//遍历数组
var arr: string[] = ['html','css','js','ts']
for(var i:number = 0; i<arr.length; i++){
	console.log(arr[i])
}

//元组类型
var list = [1,2,3,'hello']
console.log(list)

//联合类型
var rel: string | number = 1
console.log("联合类型rel:",rel)

rel = 'hello'
console.log("联合类型rel:",rel)

//下面代码编译不通过
// rel = true
// console.log("联合类型rel:",rel)

var array: string[] | number[] = [1,2,3]
console.log(array)

array = ['a','b','c']
console.log(array)

//下面代码编译不通过
// array = [true,false]
// console.log(array)

2.3、接口

//数据类型分为两种：基本数据类型，引用数据类型

//声明抽象的接口
interface IPerson {
	firstName:string,
	lastName:string,
	sayHi: ()=>string
}

//具体实现

var p1: IPerson = {
	firstName: '张',
	lastName: '三',
	sayHi: ():string=>{
		return `say Hello`
	}
}

console.log(p1.firstName)
console.log(p1.lastName)
console.log(p1.sayHi())

2.4、类

//声明类

class Per {
	
	//声明字段
	firstName: string;
	lastName: string;
	
	//构造函数
	constructor(firstName:string, lastName:string){
		this.firstName = firstName
		this.lastName = lastName
	}
	
	//类中的函数
	say(): void {
		console.log(this.firstName, this.lastName)
	}
}

//实例化对象
var p = new Per('王','五')
p.say()