当前位置：首页>编程语言>正文

typescript 结构 typescript基础

编程语言2024-04-21 01:30:17

一入IT深似海啊，不是在学习就是在去学习的路上，学完这个还有下一个，总结：我变秃了，也变强了。刚学习完TypeScript，现在将常用的基本知识整理下来，方便后面观看。

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'
    }
}