TypeScript 核心基础:类型/变量 + 函数 + 接口

TypeScript 核心基础:类型/变量 + 函数 + 接口

我给你整理了最实用、最常用的 TS 基础知识点,直接上手就能用,适合新手快速掌握核心。


一、基础类型与变量声明

TypeScript 在 JS 基础上增加了类型注解,让代码更安全、更易维护。

1. 常用基础类型

typescript 复制代码
// 1. 布尔值
let isDone: boolean = false;

// 2. 数字(所有数字都是浮点数)
let age: number = 20;
let price: number = 99.9;

// 3. 字符串
let name: string = "小明";
let desc: string = `年龄:${age}`; // 支持模板字符串

// 4. 数组(两种写法)
let arr1: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b"];

// 5. 元组 Tuple(固定类型、固定长度的数组)
let tuple: [string, number] = ["张三", 25];

// 6. 枚举 enum(给数值起别名)
enum Gender { Male, Female }
let gender: Gender = Gender.Male;

// 7. 任意类型 any(不推荐滥用)
let anyVal: any = 123;
anyVal = "abc";

// 8. 空值 void(函数无返回值)
function fn(): void {
  console.log("无返回");
}

// 9. null / undefined
let u: undefined = undefined;
let n: null = null;

2. 变量声明

TS 支持 let / const不推荐 var

typescript 复制代码
let a: number = 10;       // 可变
const b: string = "固定"; // 不可变

二、函数(TS 重点)

TS 函数必须标注参数类型 + 返回值类型,语法更严谨。

1. 基础函数

typescript 复制代码
// 函数声明:参数类型 + 返回值类型
function add(x: number, y: number): number {
  return x + y;
}

// 无返回值用 void
function log(msg: string): void {
  console.log(msg);
}

2. 可选参数 / 默认参数

typescript 复制代码
// 可选参数(必须放在必选参数后面)
function greet(name: string, age?: number): string {
  return age ? `${name}-${age}` : name;
}

// 默认参数
function sum(a: number, b: number = 10): number {
  return a + b;
}

3. 函数类型(定义函数格式)

typescript 复制代码
// 定义:(参数:类型) => 返回值类型
let calc: (x: number, y: number) => number;
calc = (a, b) => a + b;

三、接口(Interface)

接口 = 约定结构/规范,用来约束对象、函数、类的格式。

1. 对象接口(最常用)

typescript 复制代码
// 定义接口:约束对象必须包含这些属性
interface User {
  id: number;       // 必选
  name: string;
  age?: number;     // 可选属性
  readonly sex: string; // 只读属性(不能修改)
}

// 使用接口约束对象
let user: User = {
  id: 1,
  name: "小红",
  sex: "女"
};

2. 函数接口

typescript 复制代码
// 定义函数规范
interface CalcFunc {
  (a: number, b: number): number;
}

// 实现接口
const add: CalcFunc = (x, y) => x + y;

3. 接口继承

typescript 复制代码
interface Animal {
  name: string;
}

// 继承 Animal,拥有所有属性
interface Dog extends Animal {
  bark(): void;
}

快速总结(新手必背)

  1. 基础类型boolean/number/string/array/tuple/enum/any/void
  2. 变量let 变量:类型 = 值
  3. 函数 :必须标注参数类型返回值类型
  4. 接口 :用来约束结构,让代码更规范、更安全

相关推荐
吴声子夜歌2 分钟前
ES6——Calss详解
javascript·es6·原型模式
摇滚侠3 分钟前
HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角
前端·css·html
❆VE❆5 分钟前
虚拟列表原理与实战运用场景详解
前端·javascript·css·vue.js·html·虚拟列表
weixin_408099677 分钟前
【实战教程】EasyClick 调用 OCR 文字识别 API(自动识别屏幕文字 + 完整示例代码)
前端·人工智能·后端·ocr·api·安卓·easyclick
Bigger10 分钟前
第四章:我是如何扒开 Claude Code 记忆与上下文压缩机制的
前端·claude·源码阅读
还在忙碌的吴小二13 分钟前
在 Mac 上安装并通过端口调用 Chrome DevTools MCP Server(谷歌官方 MCP 服务器)
服务器·前端·chrome·macos·chrome devtools
灵感__idea8 小时前
Hello 算法:贪心的世界
前端·javascript·算法
GreenTea9 小时前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
killerbasd11 小时前
牧苏苏传 我不装了 4/7
前端·javascript·vue.js
吴声子夜歌11 小时前
ES6——二进制数组详解
前端·ecmascript·es6