ts初识.

最新推荐文章于 2025-06-15 23:39:26 发布

Panada 影

最新推荐文章于 2025-06-15 23:39:26 发布

阅读量87

点赞数

文章标签： npm react.js typescript

本文链接：https://blog.youkuaiyun.com/weixin_60885570/article/details/130226038

版权

文章介绍了如何安装和使用TypeScript，包括全局安装、文件创建及编译。接着详细讲解了各种类型如number、boolean、string、array、object、function、void、enum、Tuple、any、unknown和never的声明与用法，以及类型断言和类型别名的概念。

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

1.安装全局node 和 ts

npm i -g typescript

2.创建XX.ts文件

3.运行后终端使用 tsc 文件名字.ts 运行(转换成js语言)

类型:

语法 : 声明值:类型

 let a : number;
a = 20

简写声明完可直接使用

let c: boolean = true;

1.string(字符串)2.number(数字)3.bollean(布尔)

字符串不赋值给其他非字符串编译会报错!

4.array(数组)

语法: 类型[ ] | Array<类型> 表示数组数值

let y: number[];
let g: Array<number>;
y = [1, 2, 3]

5.object (对象) {}指定对象中包含属性

语法:{属性名:类型,属性名:类型}

属性名后加 ? 表示该属性可有可无

属性后多余的可写[propName:string]:any 表示任意字符串的类型

let b: { name: string, age?: number }
b = { name: '小赵' }

let c: { name: string, [propName: string]: any }
c = { name: '小赵', a: 1 }

设置函数结构类型声明

语法:(参数:类型,参数:类型,参数:类型...)=>返回值

let d: (a: number, b: number) => number
d = function (n1: number, n2: number): number {
    return 20
}

6.function (函数)

js中函数不考虑参数类型和个数,ts要求一一对应,对返回值也要有类型要求

返回值或其他数值均可设置多个类型,用 | 连接

function sum(d: number, e: string): boolean | number {
    return d + e
}
sum(123, '456')

7.void(空)

8.enum (枚举) 对对象遍历可直接使用

enum Gender {
    male = 0,
    falm = 1
}
let i: { name: string, gender: Gender }
i = {
    name: "小赵",
    gender: Gender.male
}
Gender.male === i.gender)  true

9.Tuple(元祖) 元祖就是固定长度的数组

语法:[类型,类型]

let h: [string, string];
h = ['a', '666']

10.any(任何值) 为任意值, 该变量关闭了ts类型检测

11.unknow 实际上是类型安全的any

11.never(没有值) 永远不会返回结果一般用于报错

function fn2(): void {
    throw new Error('报错')
}
fn2()

12.类型断言as (两种写法)

语法: 变量 as 类型 | <类型>变量

s = e as string;
s = <string>e

&表示同时

let j: { name: string } & { age: number };
j = { name: '孙悟空', age: 20 }

类型别名 type 名字

type my = 1 | 2 | 3 | 4 | 5;
let k: my;
let l: my;
k = 4