TypeScript 学习笔记

最近在学 ts 顺便记录一下自己的学习进度，以及一些知识点的记录，可能不会太详细，主要是用来巩固和复习的，会持续更新

前言

想法

首先我自己想说一下自己在学ts之前，对ts的一个想法和印象，在我学习之前，包括前期的学习中，我还是认为，给变量定义类型我真的觉得有点繁琐，例如 ts中的元组

let tupleArray: [number, string] = [123, 'hello']

将一个数组定义成一个只包含一个数字和一个字符串的数组，顺序不能乱，个数不能多也不能少，而且类型也要一一对应，对于习惯js灵活性的我来说，有点不能接受，甚至是不能理解，包括ts中的接口，给变量定义了这么多条条框框，我觉得缺少灵活性，在目前的我看来有点繁琐

这也是我想学下去的原因，我不明白为什么网上这么多人拥抱了ts，用完都说好（🤭🤭），大家一致的好评却给我一种人云亦云的感觉，所以我决定自己一探究竟，我看看是不是真的好😏😏

优势

说一下我在了解ts时，听说到它的优势，目前只是据说，在我自己没觉得它是之前，我都保持怀疑，我会持续验证

在接受一个新项目的时候有些字段和函数看不懂什么意思可能牵扯的很多要搞清来龙去脉要console.log，可能还要问之前的人这个字段什么意思，这个函数是什么作用，要运行起来才能知道，现在ts就可以直接解决这个问题

正式开始

1.搭建typescript开发环境

npm install -g typescript 

nvm install v14.15.1 //使用nvm 下载node 和切换 node版本
（切换用use）

注意node的版本 不然会报错

tsc -v

查看ts版本

编译ts文件

Tsc main.ts

输入这个命令就会生成一个 main.js 文件 里面就是转译后的 js语言

2.数组和元组

//数组
let arr: number[] = [1, 2, 3, ] //数字类型数组//元组
let tupleArray: [number, string] = [123, 'jth']

给一个数组定义类型，例如number数组，那么这个数组里的值就只能是number

元组的官方定义：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。

与此同时元组不可以跟类型描述不一致，包括个数，顺序，以及类型

3.函数

let add = (x: number, y: number, z?: number): number => {if (typeof z === 'number') {return x + y + z} else {return x + y}
}let result = add(1, 2)let add2: (x: number, y: number, z?: number) => number = add
//定义函数的参数数量和类型，如果需要可选参数和interface一样
//可选参数后面不能再定义确定参数//如果想将add这个函数赋值给一个变量，必须赋值给一个一样的函数类型
// 冒号（:） 后面都是对此变量类型的定义//例如： add2: (x: number, y: number, z?: number)
//这步结束后对函数的参数做了类型的定义，但函数返回值的类型还没定义
//如果需要对函数返回值进行定义 就不可以写成 : 这种形式，而是ts中的另一个方法 =>
// => 是申明函数类型返回值的方法 不是es6 中的箭头函数//如何用interface 描述函数类型
//上面我们直接写了函数类型 (x: number, y: number, z?: number) => number
//interface 描述函数类型和直接写有所区别interface ISum {(x: number, y: number, z?: number): number
}
//interface 描述函数类型时 返回值的类型申明不是用 => 而是 : let add3: ISum = add

4.类

//类 公有 私有 受保护
class Test {private age: number = 11;name: string;constructor(name) {this.name = name}
}
let ads = new Test('hello')
// console.log(ads.age) //此时的age 为 private属性 不可在类外访问 如果为 protected也一样不能在类外访问
// console.log(ads)
//ts中默认类的所有属性都是 public（公有）
class Animal {private name: string;constructor(name) {this.name = name}show() {console.log(`my name is ${this.name}`)}
}class Snake extends Animal {dep: stringconstructor(name, dep) {super(name)this.dep = dep}show() {// console.log(`my name is ${this.name} and work in ${this.dep}`) 属性“name”为私有属性，只能在类“Animal”中访问super.show()//如果在类型中添加私有（private）属性，则不可以在 类 外使用，包括派生类（子类）//但可以在申明私有属性的类型内访问}
}let snake = new Snake('jth', 'ali')
snake.show()class Animal2 {protected name: string;constructor(name) {this.name = name}protected show() {console.log(`my name is ${this.name}`)}
}class Snake2 extends Animal2 {dep: stringconstructor(name, dep) {super(name)this.dep = dep}show() {console.log(`my name is ${this.name} and work in ${this.dep}`)super.show()//如果在类型中添加受保护（private）属性，则不可以在类型外使用//但可以在申明私有属性的类型内访问，也可以在派生类中访问}
}let snake2 = new Snake2('jth', 'ali')
snake.show()//只读属性
class User {readonly name: string;readonly num: number = 8constructor(name) {this.name = name}
}let dada = new User('cfh')
// dada.name = 'cfh2'// 如果属性是readonly，只可以在申明时或构造函数中被初始化
//不可以进行二次赋值
console.log(dada)//参数属性 声明并初始化一个成员 constructor(public name: string) {}
//传统写法 constructor(theName) {this.name = theName}
class Jth1 {public name: string;constructor(name) {this.name = name}show() {console.log(`my name is ${this.name}`)}//在普通的类型中 我们需要申明一个name属性，并给name属性赋值
}
let nameClass = new Jth1('jjtthh')
nameClass.show()class Jth {constructor(public name: string) { }show() {console.log(`my name is ${this.name}`)}//但参数属性可以帮我们将声明属性和初始化合并到一起//写法 为 public name: string//同样的 private 和 protected 一样
}
let jjj = new Jth('cjh')
jjj.show()

5.接口 interface

//接口 
interface Person {readonly id: number;name: string;age?: number; // 此时age属性可有可无
}let obj: Person = {name: 'jth',age: 12,id: 1
}//接口用来限制对象的形状，接口定义的形状是什么样对象就得什么样，
//变量不可以多也不可以少
//如果希望某个变量可有可无可以在接口的属性后面 + '?'
//如果希望某个属性只可读不能被赋值 可使用readonly
//obj.id = 2 这个时候就会报错 id属性只可读//接口也可以描述 类类型
//TypeScript也能够用它来明确的强制一个类去符合某种契约。
//描述的类必须实现和接口中一致的属性或者方法 所以文档中的定义是强制一个类去符合某种契约
//关键字 implementsinterface Radio {switchRadio(trigger: boolean): void;
}interface Battery {checkBatteryStatus(): void;
}//接口的继承
//接口也可以继承 关键字和类继承一样 extends
interface BatteryWithRadio extends Radio {checkBatteryStatus(): void;
}class CellPhone implements Radio, Battery {switchRadio(trigger: boolean) {}checkBatteryStatus() { }
}class CellPhone2 implements BatteryWithRadio {switchRadio(trigger: boolean) {}checkBatteryStatus() { }//implements 之后就可以接继承的 接口
}class Car implements Radio {switchRadio(trigger: boolean) {}
}