TypeScript 快速入门:基础语法、类型系统与面向对象详解
本文介绍 TypeScript 基础语法,涵盖变量声明、数组与对象等复合类型、条件控制与循环结构。详解函数定义、箭头函数及可选参数,并深入讲解枚举、接口、继承等面向对象特性,最后说明模块的导出与导入机制,帮助开发者快速掌握 TypeScript 核心概念。
TypeScript 是由微软开发的开源编程语言,它在 JavaScript 的基础上扩展了额外的语法特性,构成了 JavaScript 的一个超集。其基础语法体系涵盖了变量声明、复合类型(包括数组和对象)、条件控制语句(如 if-else 和 switch)、循环结构(for 和 while)、函数定义(包括基础函数、箭头函数以及可选参数处理),以及面向对象特性(涉及枚举、接口和继承),同时还包含了模块开发中的导出与导入机制。
基础语法
变量的声明
TypeScript 在 JavaScript 的基础上引入了静态类型检查功能,这意味着每一个变量都必须拥有固定的数据类型。
例如:let msg: string = 'hello world'
let 是声明变量的关键字,类似的 const 代表常量。
string 表示变量类型(这是拓展 JavaScript 的部分),其他常见类型如下:
number:涵盖整数、数值、浮点数、二进制等。
boolean:布尔类型。
any:表示不确定,可以是任意类型(相当于跳过类型检查)。
union 类型:例如 let u: string|number|boolean = 'hello',表示可以是多个指定类型中的一种。
object:对象类型。
let p = {name:'jack', age: 21}
console.log(p.name)
console.log(p['name'])复合类型
数组
let names: Array<string> = ['a','b']
let age: number[] = [1,2]
console.log(names[1])条件控制 if-else
let num:number = 21
if(num%2===0){ // 推荐使用三个等于号判断
console.log("ou")
} else{
console.log("ji")
}在 TypeScript 中,空字符串、0、null、undefined 等值被解析为 false,其他值则为 true。
for&while循环
常规
for(let i=0;i<10;i++){
console.log(i)
}
let num=0
while(num<10){
console.log(num)
}遍历数组
let names: Array<string> = ['a','b']
for(let i in names){
console.log(i+':' names[i]) // 这种方取出来的是下标
}
for(let n of names){
console.log(n) // 这种方取出来的是一个个的元素
}函数
基础样式
function sum(x: number, y: number): number {
return x+y
}
let result = sum(1,2)
console.log('1+2=' + result)箭头函数
let sayHi = (name: string) =>{
console.log('hi' + name)
}
sayHi('Jack')可选参数
// 参数后加问号?,表示可选
function sayHi (name?: string) {
name = name ? name: '无名氏' //判断,没有传入参数就赋值
console.log('hi' + name)
}
sayHi('Jack')
sayHi()
// 上述可赋默认值 类似python语法
function sayHi (name: string = 'Jack') //若不传参 默认为Jack面向对象
TypeScript 具备面向对象编程的基本语法,例如 interface、class、enum 等。同时也具备封装、继承、多态等面向对象基本特征。
枚举、接口
// 定义枚举 不需要写let和参数类型等
enum Msg{
HI = 'hi',
HELLO = 'hello'
}
// 定义接口
interface A{
say(msg: Msg):void
}
// 实现接口
class B implements A{
say(msg:Msg):void{
console.log(msg + "ni hao")
}
}
// 初始化对象 并调用方法
let a:A = new B()
a.say(Msg.HI)继承
// 定义矩形类
class Rectangle{
// 定义成员变量 无需let
private width: number
private length: number
//构造函数 无需function
constructor(width:number,length:number){
this.length=length
this.width=width
}
public area():number{
return this.width*this.length
}
}
// 定义正方形类,继承于矩形类
class square extends Rectangle{
constructor(side: number){
super(side,side) //调用父类构造函数
}
}
let s = new square(10)
console.log('正方形面积:'+ s.area())模块开发
应用复杂时我们可以把通用功能抽取到单独的 ts 文件,每个文件都是一个模块 (module)。模块可以相互加载,提高代码复用性。
导出
// 定义类,并通过export导出
export class Rectangle{
xxx
}
// 定义工具方法
export function area(rec:Rectangle) number{
xxx
}导入
// 通过import语法导入 from后写地址
import {Rectangle, area} from '../rectangle'
// 使用导入的类创建对象
let r = new Rectangle(10,20)
// 调用导入的方法
console.log(area(r))到此这篇关于TypeScript快速学习入门基础语法的文章就介绍到这了,更多相关TypeScript入门基础语法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18








