一入IT深似海啊，不是在学习就是在去学习的路上，学完这个还有下一个，总结：我变秃了，也变强了。 刚学习完TypeScript，现在将常用的基本知识整理下来，方便后面观看。
qq：670872964 欢迎交流
1、了解TypeScipt
网上官方的介绍五花八门非常之多，这里就不作介绍了，直接上使用的步骤。
注意：学习ts，一定要有js的基础哦
第一步，下载：npm install -g typescript
可以通过tsc -v 查看版本，确认是否有安装成功
第二步，运行：建立一个文件，后缀为.ts，ts的文件不能直接运行，必须转成js后在运行这个js文件，转化方式：tsc .\tsDemo1.ts。
这样每次都要转化非常的麻烦，所以要安装ts-node
第三步：安装ts-node
下载 npm install -g ts-node
运行：ts-node .\tsDemo1.ts
2、ts定义数据
1、定义基础数据 类型 一旦定义就不能更改
let str: string = '123'
str=1 已经定义为了string类型，重新赋值为number类型，会报错
其他的类型定义的方式都是一样的
新增的 any(任何数据类型) void(null/undefined) never(永远执行不完的，例如死循环、报错)
2、定义数组
let arr: [number] = [1] //这种固定了类型+长度的 也称为元组
let arr2: number[] = [1, 2, 3] //这种不确定长度，但是类型是确定的
let arr3:any[] 这样定义的话，长度和类型都是不确定的
let arr4:[number|string] 值是number或者是string类型
3、定义对象类型
let girl:{
name:string,
age:number
}={
name:'ll',
age:18
}
3、ts定义函数
普通用法 在()后面定义类型
const fn = (): string => {
return '123'
}
function fn1(): number {
return 222
}
传参的函数
function fn2(name: string, age: number): any {
return name + age
}
可选参数
function fn3(x: string, y?: string) {
if (y) {
return y
} else {
return x
}
}
默认参数
function fn4(num: number = 10) {
return num
}
fn4(20) 传了值的，以传的为准
fn4() 不传默认就是10
三点运算符
function fn5(...res: number[]) {
console.log(res) //[1,2,3,4]
}
// fn5(1, 2, 3, 4)
// 函数重载 了解即可 用得不多
// js的函数重载，是通过为同一函数提供多个函数类型定义来实现多种功能的目的
function getuser(age: string): string;
function getuser(age: number): number;
function getuser(age: any): any { //最后一个必须使用any收尾
return typeof (age)
}
4、interface 接口
interface 接口:属性接口、函数接口、索引接口(不常用)、类接口
1、属性接口分为：确定属性 可选属性 任意属性 只读属性
interface userInfo {
name: string,
age: number,
sex?: string //这是可选属性
[propName: string]: any//任意属性名和属性值 可以有多个
readonly id: number //只读属性
}
let obj1: userInfo = { //必须按照定义的数据来
name: "张三",
age: 18,
hobby: ["篮球", "足球"], //对应任意属性的值可以有多个
aa: ["篮球", "足球"],
id: 1 //这是只读属性再次修改会报错
}
2、函数接口
作用：对方法传入的参数以及返回值进行约束
// 定义普通函数 并且对函数的参数约束类型
let myFn = function (params1: number, params2: string) {
return true
}
// 使用interface 约束函数参数的类型
interface aa {
// 约束参数的类型 约束返回值的类型
(param1: number, param2: string): Boolean
}
let myFn2: aa = function (param1, param2) {
return typeof param1 === "number" && typeof param2 === "string";
}
3、类接口
对类的约束和继承
interface cc { 定义数据的约束
name: string,
say(): string
}
class DoSome implements cc { 通过implements使用这个约束
name = '张三'
say() {
return "say的方法"
}
}
// 接口的继承
interface Test extends cc { extends 继承cc的类型约束
testFn(): string 可以定义其他的
}
class DoAgain implements Test { //Test继承了cc，并添加了方法
name = '张三'
say() {
return "say的方法"
}
testFn() {
return "say的方法"
}
}
4、类的概念
class Father { 类的基础用法
name = 'father';
sayHi() {
return this.name
}
}
class Child extends Father { 类的继承
test() {
return this.name
}
sayHi() { //和父类的名字一样，以自己的为主 可以用super 调用父类的方法
// return '这是子类的方法'
return super.sayHi()
}
}
const child = new Child()
console.log(child.sayHi())
5、类的访问类型
// private 私有的，只能内部使用，不可以被继承
// protected 受保护的,只能内部调用,可以被继承
// public 公用的,类的外部和内部都可以调用,默认的
class Person {
public name = 'zs' //内外都可以访问 可以被继承
private age = 18 //外部无法访问 不可以被继承
protected sex = '女' //外部无法访问 可以被继承
test() { //内部三种类型都可以访问
return this.name + this.age + this.sex
}
}
const person = new Person()
console.log(person.name, person.test()) //可以访问
// person.age person.sex 不可以访问
6、类的构造函数
class Person {
public name = 'zs' //内外都可以访问 可以被继承
constructor(name: string) { //基础用法
this.name = name
}
}
const person = new Person('ls')
console.log(person.name) //ls
简写的方式 效果和上面的代码是一样的
class Person { //内外都可以访问 可以被继承
constructor(public name: string) { }
}
const person = new Person('ls')
console.log(person.name) //ls
7、类的get、set和static
私有的属性，如果想在外部设置和获取，就可以用get和set，static可以不通过new，获取数据，直接上代码
class Person {
protected name = "测试"
get _name() {
return this.name
}
set _newName(name: string) {
this.name = name
}
static test() {
console.log("可以不用通过new就使用的方法")
}
}
const person = new Person()
person._newName = "这是新的值" //通过set的设置新的值
console.log(person._name) //通过get获取数据
Person.test() //调用static定义的方法
8、抽象类
抽象类就是在描述事物时，这种事物的某些行为不能具体的说明，那么就用抽象来说明这种行为。抽象类就是被abstract 修饰的类，被abstract修饰的方法就是抽象的方法，抽象方法是一个不完整的方法，因为抽象方法没有方法体。抽象类的好处就是强制子类实现父类的抽象方法
abstract class common { 定义一个抽象的类
abstract doSome() 定义抽象的方法 注意 这里是没有具体操作的 只定义
}
class one extends common { //继承抽象类的必须使用里面的方法
doSome() { //具体化方法
return 'one'
}
}
class two extends common {
doSome() {
return 'two'
}
}
还有泛型 和 tsconfig的配置没有讲，有时间再更新上来。。。