当前位置：首页 > news >正文

TypeScript 基础语法

news 2026/6/28 14:13:29

TypeScript 基础语法详解

TypeScript（TS）是 JavaScript（JS）的超集，所有合法的 JavaScript 代码都是合法的 TypeScript 代码。TS 在 JS 基础上主要增加了静态类型系统，其他语法几乎与现代 JS（ES6+）一致。下面从基础语法入手，逐步介绍 TS 独有或增强的部分。

1. 基本类型（Primitive Types）

TS 支持 JS 的所有原始类型，并要求显式或隐式指定类型。

letisDone:boolean=false;letage:number=30;// 包括整数、浮点数、BigInt（如 100n）letbinary:number=0b1010;// 二进制letoctal:number=0o744;// 八进制lethex:number=0xf00d;// 十六进制letusername:string="Alice";letsentence:string=`Hello,${username}!`;// 模板字符串letundefinedValue:undefined=undefined;letnullValue:null=null;letsym:symbol=Symbol("unique");

2. 数组和元组（Array & Tuple）

// 数组：两种写法等价letlist1:number[]=[1,2,3];letlist2:Array<number>=[1,2,3];// 泛型写法// 元组：固定长度、固定类型的数组lettuple:[string,number]=["hello",10];// tuple[2] = 100; // 错误：长度固定

3. any、unknown、never、void

letanything:any=4;anything="string";// any 可以赋值为任何类型，几乎关闭类型检查letunsure:unknown=4;// unsure.toFixed(); // 错误：需先类型检查if(typeofunsure==="number"){unsure.toFixed();}functionerror(msg:string):never{thrownewError(msg);// never 表示永远不会正常返回}functionlog():void{console.log("no return");}

4. 对象类型：接口（interface）和类型别名（type）

// 接口（推荐用于定义对象形状）interfacePerson{name:string;age?:number;// 可选属性readonlyid:number;// 只读属性[prop:string]:any;// 索引签名：允许任意额外属性}letuser:Person={name:"Bob",age:25,id:1,extra:"anything"};// user.id = 2; // 错误：只读// 类型别名（更灵活，可用于联合类型等）typeID=string|number;letuserId:ID=123;userId="abc";

5. 函数语法

// 函数声明functionadd(x:number,y:number):number{returnx+y;}// 函数表达式constsubtract:(a:number,b:number)=>number=(a,b)=>a-b;// 可选参数和默认参数functiongreet(name:string,greeting?:string):string{return`${greeting??"Hi"}${name}`;}greet("Alice");// OKgreet("Alice","Hello");// 剩余参数functionsum(...nums:number[]):number{returnnums.reduce((a,b)=>a+b,0);}

6. 联合类型（Union）和类型守卫（Type Guards）

letid:string|number=123;id="abc";functionprintId(id:string|number){if(typeofid==="string"){console.log(id.toUpperCase());// 类型守卫：TS 知道这里是 string}else{console.log(id.toFixed());}}

7. 类型断言（Type Assertion）

letsomeValue:any="this is a string";letstrLength:number=(someValueasstring).length;// 另一种写法（React 中常用）letstrLength2:number=(<string>someValue).length;

8. 字面量类型（Literal Types）

typeDirection="up"|"down"|"left"|"right";letdir:Direction="up";// 只能是这四个值之一typeYesOrNo=true|false;typeZero=0;

9. 枚举（Enums）

enumColor{Red,// 默认 0Green=2,Blue// 3}letc:Color=Color.Green;console.log(Color[2]);// "Green"（反向映射）

10. 基本配置（tsconfig.json 常用选项）

新手常用严格模式配置片段：

{"compilerOptions":{"target":"ES2022","module":"ESNext","strict":true,// 开启所有严格检查"noImplicitAny":true,"strictNullChecks":true,"esModuleInterop":true,"forceConsistentCasingInFileNames":true}}