TS学习笔记：

最新推荐文章于 2024-08-18 15:51:50 发布

010原码

最新推荐文章于 2024-08-18 15:51:50 发布

阅读量738

点赞数 11

文章标签：学习笔记

本文链接：https://blog.csdn.net/2301_79926909/article/details/141003666

版权

学习前了解：

了解为啥要学习TS以及JS与TS的区别：

1.js易写易改不安全

2.js对于面向对象编程使用原型较为麻烦，

没有类型的概念，修改变量的类型容易且不报错会产生很多问题，

js的动态类型可能是一大缺点

TS为TypeScript，

ts是以js为基础构建的语言，ts为js的超集，由微软公司所开发

在ts文件中可以直接书写js代码，方便习惯了js代码书写的开发者编程。

什么是ES的新特性？

统一的js标准--ES？

TypeScript开发环境的搭建：

1.下载node.js

原因：ts在平台执行时需要经过编译，编译为js文件才可以在平台执行，ts的编译器是由node.js编写成的，所以下载ts编译器需要首先下载node.js

2.安装node.js

3、使用npm全局安装typescript解析器

打开命令行
输入：npm i -g typescript
输入tsc 进行验证是否下载成功

4、创建一个ts文件

5、将ts编译为js文件：

执行命令：tsc XXX.ts

TS类型的学习：

注意vscode 可以识别ts文件中的错误并报错

1、类型声明的语法：

变量类型声明：

let c:number
c='asdad'
//报出错误
let aa=123
// 对于直接赋值没有主动加类型声明的变量 ，
// ts编辑器会自动为变量设置类型
aa='adas'
//同样报错
    
函数参数类型声明：

// 对于函数参数类型的声明

// 对参数与返回值赋予类型
function change(a:number,b:number):number
{
   return a+b
}

console.log(change(34,12))
// 与js文件不同编译器会针对函数参数个数
// ，参数类型对实参进行分析报错

let c:number
c='asdad'
//报出错误
let aa=123
// 对于直接赋值没有主动加类型声明的变量 ，
// ts编辑器会自动为变量设置类型
aa='adas'
//同样报错

函数参数类型声明：

// 对于函数参数类型的声明

// 对参数与返回值赋予类型
function change(a:number,b:number):number
{
   return a+b
}

console.log(change(34,12))
// 与js文件不同编译器会针对函数参数个数
// ，参数类型对实参进行分析报错

2、类型全解析

number 、string、boolean

基础类型

字面量、any、unknow、void、never、undefined、null


//字面量：
let data1:"aaa"
data1='aaa'
// data1='asad'
// 字面量类型声明;规定类型以及数值


//any 类型：声明变量为任意类型可以赋值任意类型的数据
let data2:any
data2='qeqwe'
data2=12312
// console.log(data2)

// unknown 类型：安全的any类型： 一些变量我们在数据接收前不能确定其类型，将其赋予
// unknown 类型 赋值需要确定其类型进行赋值
let data3:unknown
data3='assd'

// 类型断言的使用情景


// 联合类型：
let data4:number|string
data4='qqwe'
data4=213


//void类型：any的相反意义的类型 表示空类型
function act()
{
    console.log('adas')
}
// 此函数的返回值便是void类型 代表返回值为空类型
//将void类型赋于变量：
let data5:void=undefined
// 变量仅能被赋予undefined
//无大用处


let data6:number
// number类型无法接受null与undefined
let data7:null=null
let data8:undefined=undefined
// 以上为默认


// never类型： never为没有任何类型  以无类型替代 是比void更进一步的去除类型
// 对于以抛出错误结束以及死循环的函数默认为void类型 可以被赋值为 never类型
function error1(message:string):never
{
   throw new Error('asda')
}
// 默认为
function infiniteLoop():never{
    while (true) {
    }
}
// function act2():never
{
//   return '1daw'
//   不能被正常赋值
}



//对于变量：
// 默认never，null，undefined 为所有类型的子类型但 仍会报错
let data9:number
// 变量无法被赋值never ，never仅被作为类型

object、array、tuple、enum

// 对于object类型：
// 为了 使得对象的数据类型严谨安全可以声明对象中属性的个数与类型：

// 对象字面量的声明
// 1.指定属性名以及属性值的类型
let ata1:{name:string,age:number}
ata1={name:'daasd',age:12}


// 对属性名设置 类型限制  不限制属性个数
let ata2:{[propName:string]:any}
ata2={name:12,name1:'asdas','asdasd':'ada'}
let ata3:{[propName:number]:any}
ata3={12:12}

//设置函数类型的语法：
let ata4:(a:number,b:number)=>number;
// ata4=function(a,b)
// {
//   return a+b
// }
ata4=(a,b)=>a+b


//数组类型声明语法：
// 长度不固定类型一般固定
// 可以设置统一类型数据的数组：
// 两语法：let …… :类型[]
//let ……:Array<number>
let ata5:number[];
ata5=[23,34,435]
let ata6:Array<number>
    
// 元组声明语法;
let h:[string,number]
 h=['dasd',12]

unknown类型与断言的使用

unknown类型：表示未知类型，即该变量的具体类型是不确定的。在使用unknown类型的变量时，如果没有进行类型检查或类型断言，则不能将其赋值给其他变量或对其进行任何操作。这要求开发者在使用unknown类型的变量时必须进行显式的类型检查或断言，以确保代码的类型安全性和正确性

// unknown 与断言的使用：

let at1:unknown
let e:string='wewer'
at1='wrwr'
// 应报错
if (typeof(e)==='string')
{
    at1=e
}

at1=<string>e
at1=e as string

// 为类型为unknown的变量赋值时应提前检查值的类型
// 检查方式的简化--断言 --开发者自己知道
//  某一变量/数据就是某一；类型自己添加判断时道德语法

2、对于变量类型的获取与检查：

typeof仅可以获取简单类型数据：数字字符串布尔值

对于数组与对象等复杂类型类型仅能返回Object

instanceof在js中用于判断某一类的实例是否属于一类

（针对对象使用（由于））

Array.isArray() 用于判断某一变量是否是数组类型

3、创建自定义新的类型：


type myType=1|2|3|4|5;
let ata7:myType
ata7=1

枚举类型的使用场景：

枚举

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

默认情况下，从0开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1开始编号：

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

或者，全部都采用手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

像是字符串与数字的映射（为编程设置变量提供更多信息）

TS编译选项：

1、监视自动编译文件

tsc xxx.ts -w

2.整体编译（统一编译文件夹中的所有ts文件）：

创建tsconfig.json文件

{}
//默认编译所有的ts文件 监视所有的ts文件

tsconfig.json文件配置项：

“ include”:指定路径文件进行编译

{
“include”：[
"./src/**/*"
]
}
//**  代表任意目录
//*代表任意文件

“exclude”：指定哪些文件不被编译

默认值：['node_modules','bower_components',"jspm_packages"]

{
“exclude”：[
    "./src/**/*"
    ]
//exclude存在默认值，一般不需要设置
}

files：指定文件进行编译

{
files:[
"…….ts",
"…….ts"
//文件名
]
}

编译选项“compilerOptions”的配置

compilerOptions 选项的配置是json文件中主要的配置项

“target”：设置编译成的js文件的版本

“compilerOptions”:{
//target
"target":'ESNext'
//ESNext代表最新版本
//ES2015= ES6
    let 变量在js 中 被编译为 var变量 代表版本为ES6
}

“module”:指定要使用的模块化的规范

“compilerOptions”:{
"module":'common.js'
//设置不同的模块导入版本 会在js文件中以不同的方式导入模块
}

'lib':用来指定ts文件中需要使用的库通常不需要修改默认为 ES6 +Dom ？？

”outDir“：用于指定编译后文件所在的目录文件

“outFile”：用于指定编译后所有全局作用域中的代码合并后发入的文件

注意：对于引入不同模块的ts文件进行合并导出编译时，我们需要将“module”：设置为“system” 或“adm”

许多配置项如outFile通过打包工具自动配置，了解如何结合打包工具进行快速配置

" allowJs":是否对js文件进行编译：默认值是false
" checkJs" ：是否检查js文件中js代码符合语法规范（以ts语法规范为标准）
"removeComments":是否在编译后移除注释
"noEmit":不生成编译后的文件
"noEmitOnError":当ts文件存在语法错误时报错同时不进行编译

对于严格状态的设置：
“alwaysStrict”：用来设置编译后的js文件开启严格模式，默认是false
“noImplicitAny”：不允许隐式的any类型
“noImplicitThis”不允许不明确类型的this

“strictNullChecks”：用于严格检查空值

例：

//在js获取Dom时
let box1=document.getElementById('box1');
box1.addEventListener('click',function(){
alert('hellow');
})
当box1组件不存在时 box1为空值null 开启以上编译选项'strictNullChecks'：true  box1会报错
注意当我们在对dom操作之前进行空值判断也可以防止报错

？--可选链操作符

若前者为空null则断路