首页 > 其他分享 >TypeScript

TypeScript

时间:2024-03-14 21:34:41浏览次数:37  
标签:npm TypeScript ts 泛型 类型 vite

TypeScript

1 安装

单独文件需要安装,项目不需要(例如vite)

npm install -g typescript
tsc -v  //查看当前版本号

image-20240310112657635

image-20240310112815249

image-20240310112838259

2 基本类型

image-20240310112911160

2.1 字符串类型

image-20240310113604794

2.2 数字类型

image-20240310113848643

如果变量没有写类型,默认是第一个赋值的类型

2.3 布尔类型

image-20240310114059690

image-20240310114523354

 npm i @types/node --save-dev
 npm i ts-node -g   
 ts-node xxx.ts

image-20240310222338087

3 Any类型和unknown顶级类型

3.1 any

image-20240310223354586

3.2 unknown

image-20240310223455985

区别1

image-20240310223848931

image-20240310223926722

4 数组

image-20240310224448457

image-20240310224815318

5 联合类型

image-20240310225001573

image-20240310225557007

6 类型别名

image-20240310225702696

image-20240310225958511

7 函数类型 - 参数和返回值

image-20240311211456352

image-20240311211517496

image-20240311211809885

image-20240311212442579

image-20240311212508366

函数类型-void类型

image-20240311212649363

image-20240311213031817

image-20240311212951973

函数类型-可选参数

image-20240311213252812

image-20240311213454997

image-20240311213942648

对象类型

使用类型别名

image-20240311221712420

image-20240311214325657

image-20240311215017662

带有参数的方法类型

image-20240311215252637

image-20240311215540338

箭头函数形式的方法类型

image-20240311215635844

image-20240311215807597

任意属性[propName: string]

image-20240311221316619

image-20240311221141851

只读属性 readonly

image-20240311221403924

image-20240311221537893

对象类型-接口

image-20240311222838348

image-20240311222856602

image-20240311222750182

interface vs type

image-20240311222946708

image-20240311223042973

接口继承

image-20240311223211915

image-20240311223305537

交叉类型

image-20240311223519156

image-20240311223549913

元组类型

image-20240311224035430

image-20240311224456004

image-20240311224418949

类型推论

image-20240311224604209

image-20240311224822826

类型断言

image-20240311224900565

image-20240311225009887

image-20240311225047732

泛型

image-20240311225431019

泛型别名

image-20240311225651739

image-20240311230736481

image-20240311230108260

image-20240311230224038

image-20240311230412751

image-20240311230601363

泛型接口

image-20240312205522162

image-20240312210157409

image-20240312205858030

image-20240312210012858

泛型函数

image-20240312210411919

image-20240312210703963

image-20240312210637790

image-20240312210813573

TypeScript 与 vue

image-20240312211058487

1 创建vite项目

npm create vite@latest  

image-20240312212048346

npm i //安装相关依赖

image-20240312212243561

npm run dev //运行项目

2 ref 与 ts

image-20240312213320883

image-20240312215528585

image-20240312215551451

image-20240312215612534

image-20240312213928085

image-20240312214421069

image-20240312214452849

image-20240312214834613

3 reactive 与 ts

image-20240312215710869

image-20240312221158834

image-20240312221456647

如果是数组,使用reactive,只能push,总结就是不能改变对象的指针

4 computed与ts

image-20240313202416243

image-20240313203123718

image-20240313202639673

image-20240313203038965

5 defineProps 与 ts

image-20240313204110116

image-20240313204035149

image-20240313205520439

image-20240313205741662

image-20240313210931591

image-20240313204921454

image-20240313205042356

image-20240313210102772

image-20240313210650017

6 defineEmits 与 ts

image-20240313210837707

image-20240313211546344

image-20240313211654543

image-20240313211737819

image-20240313213126286

7 事件处理与ts

image-20240313221001610

image-20240313221028977

image-20240313220915217

8 Template Ref 与 ts

image-20240313221626132

image-20240313222153259

image-20240313222503761

ts 类型声明文件

image-20240313222911226

image-20240313223138737

内置类型声明文件

image-20240313223223459

第三方库类型声明文件

image-20240313223820207

自定义类型声明文件

image-20240313224347607

image-20240313224722150

image-20240313225013127

image-20240313225126819

image-20240313225347271

image-20240313225456775

标签:npm,TypeScript,ts,泛型,类型,vite
From: https://www.cnblogs.com/fengpeng123/p/18074029

相关文章

  • typescript Decorators TypeError: Function expected
    需要启用experimentalDecorators 要启用对装饰器的实验性支持,您必须在命令行或tsconfig.json中启用ExperimentalDecorators编译器选项:commandLine:tsc--targetES5--experimentalDecorators 这个文档说的很有问题,说是要“实验性支持”,而实际上,自ts5之后,启用这个选项实......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • Typescript学习笔记(一)
    学习日期:03-09-2024关键字:Typescript;安装;原始数据类型;Any类型;数组;元组;Typescript是Javascript的超集,显著区别是加了静态类型风格的类型系统、es6-es10-esnext的语法支持安装npminstall-gtypescript原始数据类型Boolean、Null、Undefined、Number、BigInt、String、Sy......
  • 2024-03-05 NestJs学习日志之新建nest项目,运行启动命令nest start报错:Could not find
    如题,低级错误。具体报错:CouldnotfindTypeScriptconfigurationfile"tsconfig.json".Please,ensurethatyouarerunningthiscommandintheappropriatedirectory(insideNestworkspace)找不到TypeScript配置文件“tsconfig.json”。请确保您在适当的目录(Nest工作......
  • 在typescript项目中什么场景适合定义枚举值,什么场景适合定义常量类?
    在typescript项目中什么场景适合定义枚举值,什么场景适合定义常量类在TypeScript中,枚举(enum)和常量类(通常是带有只读属性的类)都有其适用场景:适合定义枚举值的场景:有限且命名的集合:当你需要表示一组固定的、可枚举的值,并且每个值都有一个明确的名字时,使用枚举类型是合适的。......
  • TypeScript中 Parameters[0]代表什么意思?
    在TypeScript中,Parameters<T>是一个类型操作符,它会提取函数类型T的参数类型作为一个元组(tuple)类型。这里的typeofTable指的是获取名为Table的构造函数或函数类型的类型。如果Table是一个类或函数,那么Parameters<typeofTable>[0]代表了调用Table构造函数时第一个参数......
  • typescript修改target导致模块找不到
    编译ts代码时,发现一个包只支持es6及更高的版本,无奈修改编译选项target,从es5修改为es6,发现原来导入包的地方报错,提示notfound。tsconfig.json{"files":["src/main.ts"],"compilerOptions":{"noImplicitAny":true,"target":......
  • VSCOde+Nodejs+Typescript前端开发环境
    1.安装Node.js下载地址:https://nodejs.org/enlts版本:长久稳定版本安装:默认安装就可以了验证:node2.VSCode下载地址:https://code.visualstudio.com/Download安装:默认安装语言切换:安装中文插件,重启 2.1修改终端cmd模式:1.点击设置图标,选择CommandPalette 2.输入:Ter......
  • TypeScript 设计模式之发布订阅者模式
    订阅发布模式(Publish-SubscribePattern)是一种行之有效的解耦框架与业务逻辑的方式,也是一种常见的观察者设计模式,它被广泛应用于事件驱动架构中。在这个模式中,发布者(或者说是主题)并不直接发送消息给订阅者,而是通过调度中心(或者叫消息代理)来传递消息。发布者(或者说是主题)并不知道订......
  • TS-TypeScript学习_1
    1、推断类型constnameInfo:string='Helloworld'console.log('nameInfo',nameInfo)2、定义类型interfacenameType{name:string;age:number;}constpeopleInfo:nameType={name:'libai',age:18}console.log('......