Typescript(学习笔记)

1. 全局安装 typescript

npm i typescript -g

安装完之后，全局会有一个命令tsc，tsc用于把.ts文件编译成.js文件

执行下面tsc hello.js后，就会帮我们生成一个同名的js文件，然后就可以在浏览器或者node上运行这个js文件了;

 运行tsc hello.ts

 使用tsc -w 或者 tsc --watch 命令可以监听ts文件,只要有修改,对应的js文件就会同步更改

注意: 使用tsc -w 这个命令之前 必须先初始化ts的配置文件，否则tsc -w 无效

初始化ts配置文件，执行tsc --init命令

tsc --init

执行完之后，会自动生成一个tsconfig.json，然后在执行tsc -w , 此时tsc就会监听我们的ts文件,只要ts文件有修改，对应的js文件就会做相应的改动

 2.基础类型

(1) 数值类型：

 (2) 字符串类型：

 (3) 布尔类型：

 （4）null类型：

 （5）undefined类型

(6)  void类型 , 常用语函数没有返回值

3.any和unknown 任意类型和不知道的类型

在前面的章节,我们调试起来非常麻烦,需要把ts文件转换成js文件然后才能在node上运行,因此,有了ts-node,该库可以自动帮我们把ts文件转换为js文件, 安装之前首先要初始化package.json配置文件

npm init -y
npm i ts-node -g
npm i @types/node -D

ts中, 级别越高代表类型约束越宽松 , 以下是ts中的类型级别

any任意类型 , 可以被赋予任何类型的值，也可以给任意类型赋值

  unknown, 只能被赋予unknown类型和any类型

 unknown不能访问对象的属性和方法，any类型可以访问

 总结: 相对来说unknown类型比any类型安全,当我们遇到一个不知道的类型时,尽量使用unknown

4.Object 和 object 以及 {} 类型的区别

 5.接口和对象类型

/* 在ts中,我们常常使用interface(接口) 来对对象进行类型约束
*/// 1.以接口定义的类型进行约束的对象不能多属性也不能少属性必须一模一样
interface A {name: stringage: number
}
let person: A = {name: '张三',age: 18,gender: '男',address: 'xxx区',hasFriends: () => true
}
// 2.重名接口 会进行添加操作 不会覆盖
interface A {gender: string
}
/*3.任意属性, 假如说这个对象的值是后台返给我们的,我只想用name,age,gender这三个属性其他的任意定义,那么我们就可以用到 索引签名 来处理这个问题
*/
interface A {[porpName: string]: any
}
// 4.接口继承 extends 和构造器class的继承一样
interface B {address: string
}interface A extends B { }
// 5. ? 非必须
interface A {friends?: string[]
}
// 6. readonly 只读修饰符 修饰属性
interface A {hasFriends: () => boolean
}
// 7. 定义函数类型
interface Fn {(a:number,b:number):number
}
const fn1:Fn = (a,b)=>{return a + b 
}
// fn1('123',456) // 报错
fn1(123,456)// 8. 使用type来实现继承type Istu3 = {name: stringage: number}type Istu4 = {gender: stringsayHi(str: string): void} & Istu3const student2: Istu4 = {name: '张三',age: 18,gender: '男',sayHi(str) {console.log(str)}}

6. 数组类型

/*数组类型，定义数组类型的两种方式方式一: 类型[]方拾二: Array<类型>
*/
// 1.元素都是number
let arr: number[] = [1, 2, 3]
// arr = ['12']// 2.元素都是string
let arr2: Array = ['1', '2', '3']// 3.元素是对象
interface X {name: stringage: number
}
let arr3: X[] = [{ name: '孙悟空', age: 18 },{ name: '猪八戒', age: 28 }
]// 4.元素是大杂烩
let arr4: any = [1, '2', true, {}, () => { }]// 5.数组类型在函数中的运用
funct

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！