注意注意！！！本文介绍的是最新的TypeScript4的重要语法
第一部分：TypeScript的简介
TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。
关于如何安装TypeScript的请参考前文哦……
第二部分：TypeScript4数据类型
小编总结出一共有12种类型（如有纠错，可以在评论区留言哦）。分别是：
1、number类型
let num: number = 100
console.log(num)
2、string类型
let str: string 'Hello'
console.log(str)
3、boolean类型
let flag: boolean = true
console.log(falg)
4、null类型
let n: null = null
console.log(n)
5、undefined类型
let u: undefined = undefined
console.log(u)
6、数组类型
let arr: number[] = [1, 2, 3, 4, 5]
console.log(arr)
// 或者使用泛型定义数组（后面会学到泛型）
let arr2: Array<number> = [1, 2, 3, 4, 5]
console.log(arr2)
7、元组类型
let user: [string, number] = ["小黄", 20]
console.log(user)
8、any类型
let flag: any = 1
flag = 'Hi'
flag = true
console.log(flag)
9、void类型（表示没有任何类型，通常用于定义函数的时候函数没有返回值）
function print(): void {
console.log("执行了，但是没有返回值！")
}
print()
10、never类型（表示没有任何类型，通常用于定义抛出错误的函数类型）
function error(): never {
throw new Error('抛出错误了')
}
11、枚举类型
第一种情况：只有标识符没有赋值，那么属性的值就是该属性的下标
enum Flag {
first,
second,
third
}
let a: Flag = Flag.first
console.log(a) //值为0
第二种情况：如果标识符已经赋值，那么属性的值就是被赋的值
enum Flag {
first,
second = 200,
third
}
let b: Flag = Flag.second
console.log(b) //值为200
12、组合类型
let flag: number | string = 100
flag = 'Hello'
console.log(flag)
第三部分：TypeScript4函数
首先，我们先来看看函数的格式，函数通常有两种格式。
函数格式一：
function 函数名(参数列表): 返回值类型 {
函数体……
[return 返回值]
}
函数格式二：
let 函数名 = function(参数列表): 返回值类型 {
函数体……
[return 返回值]
}
重点！函数的参数类型：
1、必选参数
function getInfo(name: string, age: number): string {
return `${name} --- ${age}`
}
console.log(getInfo('张三', 18)) //正确
console.log(getInfo('张三')) //错误
console.log(getInfo(18)) //错误
2、可选参数
注意！！！可选参数必须放到最后面
function getInfo(name: sqtring, age?: number): string {
return `${name} --- ${age}`
}
console.log(getInfo('张三', 18)) //正确
console.log(getInfo('张三')) //正确
console.log(getInfo(18)) //错误
3、默认参数
function getInfo(name: string, age: number = 20): string {
return `${name} --- ${age}`
}
console.log(getInfo('张三', 18)) //正确
console.log(getInfo('张三')) //正确
console.log(getInfo(18)) //错误
4、剩余参数
注意！！！剩余参数必须放到最后面
function sum(...result: number[]): number {
let sum = 0
for (let i = 0; i < result.length; i++) {
sum += result[i]
}
return sum
}
console.log(sum(1, 2, 3, 4, 5, 6))
function sum(init: number, ...result: number[]): number {
let sum = init
for (let i = 0; i < result.length; i++) {
sum += result[i]
}
return sum
}
console.log(sum(100, 1, 2, 3, 4, 5, 6))
第四部分：TypeScript4的类
1、类的定义
class Person {
name: string //属性，前面省略了public关键词
constructor(n: string) { //构造函数，实例化类的时候触发的方法
this.name = n //使用this关键字为当前类的name属性赋值
}
run(): void { //方法
console.log(this.name+ "在跑步")
}
}
var p = new Person("张三")
p.run()
2、类的继承
类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。
class Person {
name: string //父类属性，前面省略了public关键词
constructor(n: string) { //构造函数，实例化父类的时候触发的方法
this.name = n //使用this关键字为当前类的name属性赋值
}
run(): void { //父类方法
console.log(this.name + "在跑步")
}
}
//中国人这个类继承了人这个类
class Chinese extends Person {
age: number //子类属性
constructor(n: string, a: number) { //构造函数，实例化子类的时候触发的方法
super(n) //使用super关键字调用父类中的构造方法
this.age = a //使用this关键字为当前类的age属性赋值
}
speak(): void { //子类方法
super.run() //使用super关键字调用父类中的方法
console.log(this.name + "说中文")
}
}
var c = new Chinese("张三", 28)
c.speak()
3、类的修饰符
TypeScript 里面定义属性的时候给我们提供了 三种修饰符。
（1）public：公有类型，在当前类里面、子类、类外面都可以访问；
（2）protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问；
（3）private：私有类型，在当前类里面可以访问，子类、类外部都没法访问。
注意！！！如果属性不加修饰符，那么就是默认公有(public)
4、类的静态属性
静态属性：被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用。
class Person {
name: string //属性，前面省略了public关键词
static sex: string = "男" //被静态修饰符static修饰的属性
constructor(n: string) { //构造函数，实例化类的时候触发的方法
this.name = n
}
run(): void { //方法
console.log(this.name+ "在跑步")
}
}
console.log(Person.sex)
5、类的静态方法
也是很简单的，静态方法可以通过类名直接调用。
class Person {
name: string //属性，前面省略了public关键词
static sex: string = "男" //被静态修饰符static修饰的属性
constructor(n: string) { //构造函数，实例化类的时候触发的方法
this.name = n
}
run(): void { //方法
console.log(this.name + "在跑步")
}
static print(): void { //被静态修饰符static修饰的方法
// console.log('姓名：' + this.name) //错误
console.log('性别：' + Person.sex) //正确
// this.run() //错误
}
}
Person.print()
6、抽象类
TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。
我们常常使用抽象类和抽象方法用来定义标准。
//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
name: string
constructor(name: string) {
this.name = name
}
abstract eat(): any //抽象方法不包含具体实现并且必须在派生类中实现
run() {
console.log(this.name + "会跑")
}
}
class Dog extends Animal {
constructor(name: string) {
super(name)
}
eat(): any { //抽象类的子类必须实现抽象类里面的抽象方法
console.log(this.name + "吃骨头")
}
}
var d: Dog = new Dog("小狼狗")
d.eat()
class Cat extends Animal {
constructor(name: string) {
super(name)
}
eat(): any { //抽象类的子类必须实现抽象类里面的抽象方法
console.log(this.name + "吃老鼠")
}
}
var c: Cat = new Cat("小花猫")
c.eat()
第五部分：TypeScript4接口
学过Java的同学应该明白接口的干嘛的，没学过也没关系，也是很简单的东西，不要方啦。
接口的用途就是对行为和动作进行规范和约束，跟抽象类有点像，但是，接口中不能有方法体，只允许有方法定义。
接口主要有以下几种：
1、属性类型接口
//这个是一个属性类型接口
interface FullName {
firstName: string;
secondName: string;
}
function printName(name: FullName) {
console.log(name.firstName + "--" + name.secondName)
}
//传入的参数必须包含firstName、secondName
var obj = {
firstName: '张',
secondName: '三'
};
printName(obj)
2、函数类型接口
//以下是一个函数类型接口
interface encrypt {
(key: string, value: string): string;
}
var testFunc1: encrypt = function (key, value) {
return key + "----" + value
}
console.log(testFunc1("name", "zhangsan"))
var testFunc2: encrypt = function (key, value) {
return key + "====" + value
}
console.log(testFunc2("name", "lisi"))
3、可索引型接口
//以下是一个可索引型接口，对数组的约束
interface UserArr {
[index: number]: string
}
var arr1: UserArr = ["aaa", "bbb"]
console.log(arr1[0])
//以下是一个可索引接口，对对象的约束
interface UserObj {
[index: string]: string
}
var arr2: UserObj = { name: '张三', age: '21' }
console.log(arr2)
4、类类型接口
//以下是一个类类型接口，用于对类的约束
interface Animal {
name: string;
eat(str: string): void;
}
class Dog implements Animal {
name: string
constructor(name: string) {
this.name = name
}
eat() {
console.log(this.name + "吃大骨头")
}
}
var d = new Dog("小狼狗")
d.eat()
class Cat implements Animal {
name: string
constructor(name: string) {
this.name = name
}
eat(food: string) {
console.log(this.name + "吃" + food)
}
}
var c = new Cat("小花猫")
c.eat("大老鼠")
5、接口的继承
//人接口
interface Person {
eat(): void;
}
//程序员接口
interface Programmer extends Person {
code(): void;
}
//小程序接口
interface Web {
app(): void;
}
//前端工程师
class WebProgrammer implements Programmer, Web {
public name: string
constructor(name: string) {
this.name = name
}
eat() {
console.log(this.name + "下班吃饭饭")
}
code() {
console.log(this.name + "上班敲代码")
}
app() {
console.log(this.name + "开发小程序")
}
}
var w = new WebProgrammer("小李")
w.eat()
w.code()
w.app()
第六部分：TypeScript4泛型
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。
通俗理解：泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。
泛型主要有以下两种：
1、泛型类
//类的泛型
class MinClas<T>{
public list: T[] = []
add(value: T): void {
this.list.push(value)
}
min(): T {
var minNum = this.list[0]
for (var i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i]
}
}
return minNum
}
}
//实例化类并且制定了类的T代表的类型是number
var m1 = new MinClas<number>()
m1.add(11)
m1.add(3)
m1.add(2)
console.log(m1.min())
//实例化类并且制定了类的T代表的类型是string
var m2 = new MinClas<string>()
m2.add('c')
m2.add('a')
m2.add('v')
console.log(m2.min())
2、泛型接口
//泛型接口
interface ConfigFn<T> {
(value: T): T;
}
function getData<T>(value: T): T {
return value
}
var myGetData: ConfigFn<string> = getData
console.log(myGetData('20'))
第七部分：命名空间
命名空间：在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的函数、类、接口等放置到命名空间内，同Java的包、.Net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export关键字对外暴露。
namespace A {
interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string
constructor(theName: string) {
this.name = theName
}
eat(): void {
console.log(`${this.name} 吃狗粮。`)
}
}
export class Cat implements Animal {
name: string
constructor(theName: string) {
this.name = theName
}
eat(): void {
console.log(`${this.name} 吃猫粮。`)
}
}
}
namespace B {
interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string
constructor(theName: string) {
this.name = theName
}
eat(): void {
console.log(`${this.name} 吃狗粮。`)
}
}
export class Cat implements Animal {
name: string
constructor(theName: string) {
this.name = theName
}
eat(): void {
console.log(`${this.name} 吃猫粮。`)
}
}
}
var ac = new A.Cat("小花")
ac.eat()
var bc = new B.Cat("小花")
bc.eat()
好啦，以上就是本次关于最新的TypeScript4的重点总结啦，并不是太难的，希望对大家有所帮助，后续还会继续出文更新有关TS的其他内容哦，欢迎大家在下方留言^^
