TypeScript基本语法---笔记

已于 2023-06-07 15:26:57 修改
阅读量908 收藏
点赞数 1
文章标签： typescript 笔记 javascript
于 2023-06-02 10:47:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73035708/article/details/131002513
版权

TypeScript

一、ts与js的区别

  • ts是js的升级版，是一种js的超集，对数据的类型约束更加严格

  • 语法不同，ts的变量声明时需要加上数据类型，之后的该变量必须为同类型的

let  变量名：数据类型=值  ==>let a:number=2

二、数据类型（13个）

基本数据类型(5个)

string、number、boolean、undefined、null

引用数据（2个）

数组
let arr:number[]=[1,2,3]//在ts中数组中只能保存同类型的数据
对象
let student:{name:string,age:number}={name:"张三",age:20}//在ts中约束对象时，需要针对对象每个属性进行类型约束

let student:{name:string,age:number,gender?:string}={name:"张三",age:20}//？问号表示当前属性可有可无

any和unknow（2个）

在ts中any和unknow都可以用来表示“任意类型”的数据

区别

any的数据可以重新赋值给其他任意类型，unknown只能重新赋值给any或unknow类型

元组（1个）

ts中的数组类似于js中的数组。区别在于元组中的数据可以不同类型

let arr:[number,string]=[2,"q"]

枚举（1个）

当用数字0/1表示男女性别的时候，事件久了可能忘记0/1代表的含义，因此ts中提供枚举数据类型

定义：//在枚举中，enum是关键字 在{}中写出了每个数字对应的含义
enum Gender {
    female=0,
    male=1,
    unknown=2
}
使用：//使用时Gender.male表示的就是数字1
const person：{name:string，gender:Gender/number} ={
    name:"张三"，gender:Gender.male
}

void(1个)

void表示没有任何类型。在TS中，函数的返回值也需要类型约束，因此当一个函数无返回值时，将其返回值类型设置为void

never(1个)

never 表示永不存在的值的类型

三、函数

函数的参数和返回值类型约束

创建调用无区别，主要是类型约束方面。在ts中需要对函数的参数和返回值的类型进行约束

声明式函数：
function fn(a:参数类型)：返回值类型约束{
    return 返回值
}

函数表达式：
const fn=(参数：类型)：返回值类型=>返回值

参数为对象/返回值为对象：
function fn(params:{a:类型，b:类型})：{x:类型，y:类型}{
    return 返回值
}

无参无返回值
function fn():void{}
  • 参数默认值，可通过赋值方式给参数设置默认值，必须在所有形参之后
function fn(a:number,b:string="hello"):void{}
fn(1)//b默认hello
  • 可选参数,也必须写在所有形参的最后
function fn(a:number,b?:number):void{}
fn(1)//？b可有可无
  • 不定参数(一定是个数组)…rest，当不确定实参有多少个时，可以使用不定参数来接收实参。不定参数只能在所有参数最后
function fn(...rest:number[]):void{}
fn（1，2，3）

函数的类型约束（函数表达式）

针对函数表达式：const 函数名:函数类型约束 = 函数

const fn:(x:number,y:number)=>void =(x,y)=>{}
//(x:number,y:number)=>void 是函数类型约束
//(x,y)=>{}是函数

四、联合类型和类型别名

联合类型（|）

表示数据的类型可以取多个类型中的其中一种

//let 变量名：类型一 | ... | 类型n = 值
let a :number|string|boolean=1

类型别名（type）

通过type给其他类型设置一个名称

//type 类型名称=类型
type StrNum=string|number

let a:StrNum=1
a="hello"


function fn(x:StrNum):StrNum{ 
	return x
}
fn(1)

五、接口(interface)

1、接口和对象

用接口定义对象的类型约束

基本语法
interface Student {
    readonly name:string;//只读属性，无法通过student.name修改该属性值
    gender:string;
    age?:number;//可以选属性
}
const student :Student={
    name:"张三"，
    gender:"男"
}
可选属性(?)
只读属性(readonly)

2、接口和函数

用接口去定义函数的类型约束

基础语法
interface Fn{
    (x:number):void
}
const fn:Fn=(x)=>{}
fn(1)

3、接口和接口

在一个接口中使用另一个接口

基础语法
interface Param{//对象
    x:number;
    y:number;
}
interface Add{//参数为一个对象，返回值为一个数字类型的函数
    (data:Param):number
}
const add:Add=(data)=>{
    return data.x+data.y
}
add(1,2)

六、type和interface

大部分情况下，两者是可以通用的

但还是有区别：

  1. type不能被继承，interface可以被继承
  2. 定义两个同名的type会报错，而interface会合并
  3. type可以定义联合类型，interface不可以

七、断言（as）

作用：某些情况下ts会报错，而开发人员确定不会有误。因此，我们可通过断言的方式，告诉TS我们确定的结果

示例：

const  arr：number[]=[1,2,3,4];
const re:number=arr.find(item=>item>3)//此时会报错：ts会认为在数组中查找的结果的类型除了number外还会有undefined，但我们可以明确，在数组【1，2，3，4】中查找大于3 的结果re肯定是4,类型就是number，此时我们就可以使用断言
const re:number=arr.find(item=>item>3) as number;

八、泛型（<大写字母>）

作用（概念）：约束类型时，类型可能是不固定的，变化的。那么此种类型就可以用泛型来表示

1、基础语法

//此处的类型变量相当于是类型的形参
function 函数名<类型变量>（参数名：类型变量）：类型变量 {
    return 返回值；
}
//此处的数据类型相当于是类型的实参
函数名<数据类型>（）；

//案例
function  fn<T>(x：T)：T{
    return x;
};
fn<number>(1);
fn<string>("hello");

2、多个泛型变量

function fn<S,T>(x:S,y:T):T{
    return y
}
fn<number,string>(1,"hello")

3、泛型与接口

interface 接口名<类型变量>{
    属性名：类型变量
}

案例：
interface Student<T>{
    id:number;
    name:string;
    age:T
}
let zhangsan:Student<number>={
    id:1,
    name:"张三"，
    age:22
}
let lisi:Student<string>={
    id:2,
    name:"李四"，
    age：“22”
}

九、ts的内置工具类型

Record、Partial 、 Required 、 Readonly、 Pick 、 Omit、 Exclude 、 Extract

1.Record（定义对象）

  • 作用：定义一个对象的key与value的类型

  • 源码：Record<key type, value type>

  • 使用：

    // Record<string, never> 空对象
// Record<string, unknown> 任意对象
// {} 任何不为空的对象
#例1
type Obj = Record < string , number | string >//表示Obj对象中 key的类型为string, value的类型为number或string
let obj : Obj = {
    name : "张三".
    age : 12
}
let obj2 = {} as Record < string , number | string >
obj2 = {
    name : "李四".
    age : 32
}
#例2
interface Item {//定义Item对象接口，其中name、age都是必填属性，值类型分别为string和number
    name:string;
    age:number;
}
type Person = Recore < string , Item >//定义一个Person对象，key类型为string，value的类型为Item
let person : Person = {
    somebody : {
        name : "张三",
        age : 22
    }
}

2.Partial （变为可选）

  • 作用：生成一个新类型，该类型与 T(传入的泛型) 拥有相同的属性，但是所有属性皆为可选项

  • 源码：

    type Partial<T> = {
  [P in keyof T]?: T[P];
};
//解析
?表示可选
 [P in keyof T]表示遍历T中的所有属性名
 T[P]表示T中对应属性的值

  • 使用：

    interface Obj {
     name : string;
    age : number;
    id : number;
}
type NewObj = Partial<Obj>
//此时NewObj相当于
interface NewObj {
     name ?: string;
    age ?: number;
    id ?: number;
}

3.Required （变为必选）

  • 作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选项

  • 源码：

    type Require<T> = {
    [P in keyof <T>]-?: T[P]
}

  • 使用：

    interface Obj {
    name : string;
    age ?: number;
    id : number;
}
type NewObj = Required<Obj>
//此时NewObj相当于
interface NewObj {
     name : string;
    age : number;
    id : number;
}

4.Readonly （变为只读）

  • 作用：生成一个新类型，该类型与 T 拥有相同的属性，且属性是只读的，不可修改的。

  • 源码：

    type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

  • 使用：

    interface Obj {
    name : string;
    age : number;
    id : number;
}
type NewObj = Readonly<Obj>
//此时NewObj相当于
interface NewObj {
    readonly name : string;
    readonly age : number;
    readonly id : number;
}

5.Pick（选取部分）

  • 作用：从一个对象类型中，取出某些属性，生成一个新类型 ;

  • 源码：

    type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

  • 使用：Pick<要拾取的类型，要拾取的属性1，…，要拾取的属性n>

    interface Obj {
    name : string;
    age : number;
    id : number;
}
type NewObj = Pick<Obj , "name" , "age" >//可以用或|
//此时NewObj相当于
interface NewObj {
    name : string;
    age : number;
}

6.Omit （排除部分）

  • 作用：从一个对象类型中，排除某些属性，生成排除后的一个新类型 ;

  • 源码：

    type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>

  • 使用：Omit<类型，要排除的属性1，…，要排除的属性n>

    interface Obj {
    name : string;
    age : number;
    id : number;
    phone : string;
}
type NewObj = Omit<Obj , "name" , "age" >//可以用或|
//此时NewObj相当于
interface NewObj {
    id : number;
    phone : string;
}

7.Extract (包括)

  • 作用：生成一个T中有，U中也有的类型

  • 源码：

    type Extract<T, U> = T extends U ? T : never;

  • 使用：

     type TExtract1 = Extract<"a" | "b", "a" | "c">
  // 等同于
  type TExtract1 = "a"

  type TExtract2 = Extract<number | string | boolean, string>
  // 等同于
  type TExtract2 = string

  type TExtract3 = Extract<number | string | boolean, object>
  // 等同于
  type TExtract3 = never

8.Exclude（不包括）

  • 作用：生成一个T中有，U中没有的类型

  • 源码：

     type Exclude<T, U> = T extends U ? never : T

  • 使用：

      type TExclude1 = Exclude<"a" | "b", "a" | "c">
  // 等同于
  type TExclude1 = "b"

  type TExclude2 = Exclude<number | string | boolean, string>
  // 等同于
  type TExclude2 = number | boolean

9.NonNullable

  • 作用：去除 null 和 undefined 后的新类型

  • 源码：

      type NonNullable<T> = T extends null | undefined ? never : T

  • 使用：

      type TType= number | null | undefined
  type TNonNullable = NonNullable<TType>
  // 等同于
  type TNonNullable = number

十、源码中的关键字

keyof：获取类型内所有的 key，即所有属性名 , 获取到的是一个 联合类型

  • 用法：keyof 后面必须接类型，返回的是联合类型

    interface Obj {
    name:string,
    age?: number,
    sex: string,
  }
  
  type T = keyof Obj

  // 等同于
  type T = "name" | "age" | "sex"

  • 注意：keyof any

    type TAny = keyof any
  // 等同于
  type TAny = string | number | symbol //不包括 boolean object等
in:把联合类型中每一个属性名赋值给 P，结果为对象类型

  • 用法：

      type T = "name" | "age" | "sex"
  type TObj =  {
    [P in keyof T]: any
  }
  // 等同于
  type TObj = {
    name: any;
    age: any;
    sex: any;
  }

typeof : 获取数据的类型，常用用于获取 对象、数组、函数、class、枚举等类型

  • 用法：typeof后面接具体的对象 数组 函数等，返回的是类型

     const people = {
    name: 'liuyz',
    age: 18,
  }
  
  type INewPeople = typeof people
  // 等同于
  type INewPeople = {
      name: number;
      age: number;
  }
  
  const newPeople: INewPeople = {
    name: "zhi",
    age: 18,
  }
  
  type TKeys = keyof typeof newPeople
  // 等同于
   type TKeys = "name" | "age"

十一、拓展

1、提取ts公共类型文件

创建----名.d.ts文件

在类型文件中写类型，并暴露

在组件中引入类型文件，并使用

//在demotype.d.ts文件中暴露
export interface TodoItem{
    id:number;
    value:string;
    done:boolean
}
//在某组件中引入并使用
import { TodoItem } from "./demotype"
defineProps<{值：TodoItem[ ] }>()
watermelon.253
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
typescript-note:打字稿笔记和小书源代码
03-11
近3年，这家伙很火。 :fire:到什么程度？一度没朋友，一度让我心头热了（冷笑话） 感性选择（内驱和兴趣使然） 就我来说，我还是一个不太理性的前端，直到到今年，看到哪门语言火热就去凑个热度，然后学学就丢了。3月份加入掘金，就暗暗给自己作了一个规划前端知识沉淀。其实也是在自我约束，约束那颗散漫（懒散又漫无目的）的心，要安安静静地做好一件事然后再去做下一件事。 其实Typescript基本语法已经撸过一遍，只是一直未在项目中实战，所以又丢了（这个毛病得改，改后还是好前端）。这次决定学并用，是因为本来是想解读React 16.8.6源码的，可是源码是打字稿写的，脑袋翁的一声，只好转头瞄准她了。不可否认，打字原稿本身的魅力也有吸引我，再加上自己也想在阵营项目中将她付诸于实践。综合了这3点决定干（是学）！！！ 。 理性选择（数据说话） 希望下面几个有影响力的数据趋势站点，能你学习的兴趣。当然了，现在她还不
ts重点学习49-函数得参数得处理方式
qq_41632427的博客
09-26 103
前端
typescript入门之：如何使用、不限定函数参数的个数传参、interface约束（对象、函数、数组、类）、定义可选参数
luxiaopengyou的博客
07-01 1万+
一、如何使用 1、全局安装ts（仅需安装一次）npm / cnpm install -g typescript 2、在项目文件里打开cmd，输入tsc --init，出现tsconfig.json配置文件 3、修改tsconfig.json的 “outDir” ，确认编译成的js文件的输入路径 4、编译环境（如vs code）——找到“运行任务”——选择“监听tsconfig.json” 如此一来，编写ts代码，就会即时生成编译成的js代码 二、不限定函数参数的个数传参 // 用“...” 传递不定个数参数
TypeScript入门-7.函数特性-不定参数
意外金喜
01-23 1万+
TypeScript入门-7.函数特性-不定参数
解决TS 不确定传递参数数量时候的类型定义
Define_best的博客
08-14 1005
解决TS 不确定传递参数数量时候的类型定义
TS（三）：变量声明、函数
You瞧谁不起 - 道不尽世间的沧桑，诉不完人生的悲凉
10-24 1177
变量声明 var let const const是对let的一个增强，它能阻止对一个变量再次赋值 函数 function 函数名(参数1: 类型, 参数2: 类型): 返回值类型(void 无返回值){ /* CODE */}function getInfo(name: string, age: number): string { return name + age; } 可选参数 定义参数可传可不传(需要定义在必传参数之后)function getInfo(name: string, a
typescript（四）ts中函数的参数和返回值的类型定义
热门推荐
weixin_44959855的博客
11-30 2万+
前面我们讲到过ts的静态类型定义中的函数类型定义，先来回顾下： const fnA: () => string = () => { return '1' } const fnB: () => number = () => 6 const fnC: () => boolean = () => true 拓展下：在接口中如何定义函数类型呢？接口后期会讲 interface Ifn { (one: number, two: number): number } let
TS基础知识
m0_68293816的博客
10-08 6911
搭配vue3的js的超集，文章包含ts的基本语法
typescript 笔记.xmind
07-01
typescript 基础语法 环境搭建 数据类型 Array(数组) 元组
as3-to-typescript:将 ActionScript3 代码库编译为 TypeScript
07-02
这个工具不会神奇地将你的 as3 代码库转换成完美的打字稿，目标是将源代码转换成语法正确的打字稿，甚至这个目标也没有得到完美的尊重。 它也不会尝试为 Flash 库提供 javascript 实现。 然而，与我见过的大多数...
webpack-features:快速配置Webpack
05-08
预设适用于具有以下功能的大多数应用程序：ESNext语法，CSS和媒体文件加载，生产/开发环境，浏览器/node.js目标及其他（请参阅选项）。 预设对项目的结构做出以下假设： src/index.js应用程序的入口点 src/index....
vscode-github-issue-notebooks:GitHub发布VS Code的笔记本
03-22
:backhand_index_pointing_right: :backhand_index_pointing_right: :backhand_index_pointing_right:此扩展程序仍在开发...语法高亮 验证 完成 代码导航（查找参考，进行定义） 改名 格式化 查询语法 该扩展支持使用Gi
Ts学习之路-基础篇(可选参数 or 参数默认值)
qq_43506529的博客
12-21 3533
Ts学习之路，可选参数 or 参数默认值
TypeScript入门
11-02 531
这个方法用于只读属性的，不可修改属性。
如何进阶TypeScript功底？一文带你理解TS中各种高级语法
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
05-24 1246
引言TypeScript 的重要性我不在强调了，我相信仍然会有大多数前端开发者碰到复杂类型一概使用 any 处理。我写这篇文章的目的就是为了让你告别 AnyScript ，文章告别晦涩的概念结合实例来为你讲述一系列 TS 高级用法：分发、循环、协变、逆变、unknown ... 等等之类。让我们告别枯燥的概念，结合真实用例来掌握 TypeScript 从此彻底告别 Any...
常见数据类型用ts怎么写？
m0_61294154的博客
02-22 917
简单了解一下ts
TS的常用类型
weixin_43435271的博客
11-28 737
TypeScript常用类型
【Ts】约束对象、函数的正确姿势
Superman_H的博客
08-21 3554
# 约束对象 - 一般使用 **[字面量]** 约束变量的类型为对象 ```typescript let obj1: {}; // 约束该变量的类型为对象 let obj2: { name: string }; // 约束该变量的类型为 [有且只有 name 属性的] 对象, 且 name 的属性值的类型必须是 string ``` - 可以直接给变量赋值，TS 会自动识别类型，并对变量进行约束 ```typescript let obj = { width: 200 }; // 此时 ob
《前端面试题》- TypeScript - TypeScript的优/缺点
最新发布
小张微说的博客
04-22 6301
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
vue-typescript-import-dts
08-08
vue-typescript-import-dts 是一个用于为 Vue.js 项目中的 TypeScript 文件生成类型声明文件的工具。在 Vue.js 项目中使用 TypeScript 进行开发时，我们经常需要为一些第三方库或自定义组件编写类型声明文件，以提供更好的代码提示和类型检查。 使用 vue-typescript-import-dts 工具可以自动分析 TypeScript 文件中的导入语句，并根据导入的模块生成对应的类型声明文件。这样，在使用该模块时，IDE 或编辑器就能提供准确的代码补全和类型检查。 例如，假设我们的项目中使用了一个名为 axios 的第三方库进行网络请求，但是该库并没有提供类型声明文件。我们可以通过 vue-typescript-import-dts 工具，在我们的 TypeScript 文件中导入 axios，并正确配置工具，它将自动为我们生成一个 axios.d.ts 类型声明文件。 具体使用 vue-typescript-import-dts 的步骤如下： 1. 在项目中安装 vue-typescript-import-dts，可以使用 npm 或 yarn 命令来安装。 2. 在 TypeScript 文件中，使用 import 语句导入需要生成类型声明文件的模块。 3. 在项目根目录下创建一个 .vue-typescript-import-dts.json 配置文件，用来配置生成类型声明文件的规则。可以指定生成的声明文件的输出路径、文件名等。 4. 运行 vue-typescript-import-dts 命令，它会自动扫描 TypeScript 文件中的导入语句，并根据配置生成相应的类型声明文件。 这样，在我们编写代码时，IDE 或编辑器就可以准确地为我们提供代码补全和类型检查的功能。这对于提高开发效率和代码质量非常有帮助。 总之，vue-typescript-import-dts 是一个便捷的工具，可以自动为 Vue.js 项目中使用的第三方库或自定义组件生成类型声明文件，提供更好的代码提示和类型检查功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值