TypeScript 学习

目录

 

TypeScript简介

一、TypeScript开发环境及编译的说明

 二、TypeScript --基本类型

---

TypeScript简介

1、是javaScript的超集。

2、对js进行了扩展，向js 中引入了类型的概念，并添加了许多新的特性。

3、ts代码需要通过编译器编译为js,然后再交由js解析器执行

4、TS 完全兼容JS，换言之，任何的js 代码都可以直接当初js使用，

5、而TS 拥有了静态类型，更加严格的语法，更加强大功能，Ts可以在代码执行前就完成代码的检查，减小了运行时错误的出现；

   TS代码可以编译为任意版本的js代码，可以有效的解决不同js运行环境的兼容问题，但是同样的功能，TS代码量要大于JS，

    ts的代码结构更清晰 ，变量的类型更明确，方便后期的代码维护

一、TypeScript开发环境及编译的说明

Node.js  

   - 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi

   - 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

Npm安装依赖包 

        cmd 进入命令行：  npm i -g typescript

创建一个ts文件 

        xxx.ts

使用 tsc 对ts文件进行编译

        cmd   进入ts文件所在的目录， 执行命令：tsc  xxx.ts  -w

        在编译文件时，使用-w指令后，ts编译器会自动监视文件的变化，并在文件变化时对文件进行重新编译

之后就会出现ts文件对应的js文件

配置自动编译  （vscode）对当前项目下的所有ts文件编译为js文件

        cmd  tsc --init      初始化，生成tsconfig.json文件

        去掉 outDir的注释，修改tsconfig.json 文件中的    "outDir" : "./js"        -----此操作 在当前ts文件的相对路径下生成对应js文件夹以及对应的js文件

        修改后，点击     终端 -----运行任务-----选择 tsc：监视-tsconfig.json 然后就可以自动生成代码啦，你可以试验一下修改ts中的代码，在对应的js文件中的代码会自动改变

 在此第一次配置会报一个错误 ：无法加载文件 C:\Users\EDZ\AppData\Roaming\npm\tsc.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 "get-help about_signing
"。

 解决方案：

打开系统菜单，输入  powershell   以管理员身份打开

输入命令    set -ExecutionPplicy RemoteSigned   

会显示是否更改策略，输入y是   ，修改后 ，再运行任务，监视，就不会报错啦。代码自动更新就可以实现了

 

 二、TypeScript --基本类型

 1、类型声明

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

        通过类型声明可以指定ts中变量（形参，实参）的类型

        在指定类型后，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合就赋值，不符合报错   

        总结： 类型声明给变量设置了类型，使变量只能存储该种类型的值

        语法对比：

JS:
let  a 

let  b = 123

function fn (a,b){
    console.log(a,b)
}

TS:
let a:Number

let b:Number = 123

function fn (a:类型，b:类型）：类型 {
    console.log(a,b)
}

2、自动类型判断

        Ts拥有自动的类型判断机制

        当对变量的声明和赋值时同时进行的，TS编译器会自动判断变量的类型，所以 如果你的变量的声明和赋值是同时进行的，可以省略调类型声明

Ts 的类型：

1. Number -----任务数字
2. String ------ 任意字符串
3. Bealoon ----- 布尔值 true\false
4. 字面量   -----字面量本身  ，限制变量的值就是该字面量的值
5. any -----任意类型
6. unknown  ----- 类型安全的any
7. void  ----- 没有值 （空值、undefined）
8. never ----- 没有值，不能是任何值
9. object ----- 任意的js对象
10. array  ----- 任意的js数组
11. tuple ------ Ts新增类型，固定长度数组
12. enum ----- 枚举，Ts新增类型

 声明一个Number类型的变量，声明变量类型不区分大小写

        Number类型可以是：整数，小数，负数，支持 十进制，十六进制，二进制类型

声明一个string类型的变量，表示一些文本数据，用双引号或单引号来围绕字符串数据

        当然了 ，你也可以使用模板字符串，它支持多行文本和内嵌式表达式，使用（``）来包围文本，变量内嵌的表达式 用${},和 js一样

// ts文件中
let value：Number = 33
console.log(value)

let str:string = '字符串'

let boolean = false



//自动编译为js代码，在html中 引入js文件 控制台就可以打印出来

        声明字面量类型的变量：使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围，如果不在范围 ts会报错，但还是会正常编译成js，

 TS

          JS

 ts报错

     正常打印

 any 类型的变量，any类型的变量可以赋值任何类型的值，没有限制，这让 any 类型成为了类型系统的 顶级类型 (也被称作 全局超级类型)，无需事先执行任何形式的检查

 

 unknown类型，相比于any，unknown更安全，unknown只能赋值给 any类型和unknown类型的变量赋值，这是any 和unknown最大的区别,如果你想使用 unknown 类型的值，则必须在执行操作之前进行类型检查。这个过程被称为类型窄化（Type Narrowing）。

        那么，我们应该在何时使用 unknown 呢？通常在需要使用 any，但同时又希望编译器提供类型安全的时候，就可以使用 unknown，因为编译器会强制你在调用某个方法之前，手

动检查该类型是否允许这样的操作。

声明Array类型的变量：有两种写法   let  arr ：number[] = [1,2,3]

let arr :Array<number> = [1,2,3],还可以定义不同类型的数组

 

 声明一个void变量，void表示空值，值只能是null，或者undefind,一般用于没有返回值的函数

function fun():void {
    console.log("this is TypeScript");
};
fun();

 声明一个never类型的变量：never 类型表示的是那些永不存在的值的类型，包括 null 和 undefined

        never 类型是：不会有返回值的函数表达式，或箭头函数表达式的返回值类型，也可以是永远不会为真的变量。

let err: never;

err = (() => {
    throw new Error("异常");
})();

 声明一个object类型变量：当你希望一个值必须是对象而不是数值等类型时，比如我们定义一个函数，参数必须是对象，这个时候就用到object类型了，但是 不能通过obj.属性读取到键值对，会报错误，如果想要读取，需要使用ts的接口；

 

 

 当想要一个值必须是对象类型时，可以使用object

function getKeys (obj: object) {
    return Object.keys(obj) // 会以列表的形式返回obj中的值
}
getKeys({ a: 'a' }) // ['a']
getKeys(123) // error 类型“123”的参数不能赋给类型“object”的参数
 

声明一个tuple（元组）类型的变量：更像是数组的拓展，它表示已知数组的每一个位置上元素的类型所组成的集合

let tuple:[string,number]
tuple = ['1',2]
console.log(tuple)

tuple[0]='ok'

         我们定义了一个元组tuple,它包含2个元素，且每个元素的类型是固定的。当我们为 tuple 赋值时：各个位置上的元素类型都要对应，元素个数也要一致;

        还可以单个进行赋值，但是数据类型一定要和声明的类型对应上。

        在2.6.版本之后，超过声明时的个数赋值，会报错例如：

let tuple:[string,number]
tuple = ['1',2,5]
console.log(tuple)

 

声明enum (枚举）类型变量：