Typescript 类型

一、类型声明

1、类型声明是TS非常重要的一个特点

2、通过类型声明可以指定TS变量的类型

3、指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错。

4、自动类型判断:如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测

TypeScript 复制代码
let a = false;
a = true;  // 正确
a = '1'  // 错误

二、类型

字面量的用法:可以使用"|"来连接多个类型(联合类型)

TypeScript 复制代码
let b: "male" | "female";
b = "male";  // 正确
b = "female";  // 正确
b = "hello";  // 错误

unknown类型

TypeScript 复制代码
let e: unknown;

let s: string;

e = 'hello';

//  any 变量可以绘制给任意变量
//  unknown 实际上就是一个类型安全的any
//  unknown 类型的变量,不能直接赋值给其它变量
s = e; // 错误

if (typeof e === 'string') {
    s = e;
}

s = e as string;  //正确,类型断言
s = <string>e;

对象类型:

TypeScript 复制代码
// {}用来指定对象中可以包含哪些属性
let b: {name: string};
b = {name: '孙'} //正确
b = {name: '孙', age: ''} //错误

// 在属性名后边加上?,表示属性是可选的
let c: {name: string, age?: number};
c = {name: '孙'} //正确

// [propName: string]: any 表示任意类型的属性
let d: {name: string, [propName: string]: any}
d = {name: '孙', age: 18, gender: '男'};  // 正确

// 设置函数结构的类型声明:
// 语法:(形参:类型, 形参:类型 ...) => 返回值
let e: (a:number,b:number)=>number;
e = function(n1: number, n2: number):number {
    return n1 + n2;
}

数组类型:

TypeScript 复制代码
// string[] 表示字符串数组
let a: string[];

let b: Array<number>;

元组类型:

TypeScript 复制代码
// 元组,就是固定长度的数组,数据类型和长度都需要一致
let a: [string, string];
a = ['1', '2']; // 正确
a = ['1', '2', 3]; // 错误

枚举类型:

TypeScript 复制代码
enum Gender{
    Male = 0,
    Female = 1
}

let a: {name: string, gender: Gender};
a = {
    name: '李',
    gender: Gender.Male
}

类型的别名:

TypeScript 复制代码
type myType = 1 | 2 | 3 | 4 | 5;
let a: myType;
相关推荐
kyriewen11 小时前
别再这样写TypeScript了——Code Review中最常见的8个反模式
前端·javascript·typescript
A242073493020 小时前
Vue 3 + TypeScript:核心优势与开发注意事项详解
vue.js·ubuntu·typescript
用户09340777351421 小时前
HarmonyOS WPS Open SDK 实践:enableEdit 怎么映射预览与编辑
typescript
鱼饼Y21 小时前
AI时代,使用大模型学习LangChain (4)——LangGraph
typescript·langchain
带娃的IT创业者1 天前
PostHog 的 TypeScript 原生移植:一场开源产品工程化的自我革命
javascript·typescript·开源·开源软件·posthog·技术重构
听风3472 天前
Pi Agent Harness 源码解析:TypeScript 实现的模块化 Coding Agent
typescript·pi agent
濮水大叔3 天前
不必把 Vue3 写成“麻花”:从状态碎片到对象协作,重新理解 Zova 的前端心智模型
前端·typescript·vue3·ioc·tsx·zova
退休倒计时3 天前
【每日一题】LeetCode 45. 跳跃游戏 II TypeScript
算法·leetcode·typescript
TunerT_TQ3 天前
GitHub深度工程评测:Cline 源码级工程评测|65k Star 开源AI编程助手的工程全景
typescript·开源·github·vs code·ai编程助手·开源供应链安全·静态源码审计
贩卖黄昏的熊4 天前
NestJS简明教程——安全
开发语言·javascript·安全·typescript·nest.js