typeScript学习笔记

可以找一个ts的pdf文档，边看边练习，记笔记，基础的学完后在项目中运用，然后再学高级的，pdf电子书下载地址： js51.net

ts学习笔记

typeScript类型

boolean布尔值 number数字 string字符串 object对象 array数组 tuple元组
// enum枚举 any任意类型 void空值 偏门的类型：Date null undefined never几乎不会用到，没什么实际意思

ts 定义数据类型 :代表继承

let isbool: boolean = false;
let isNum: number = 1;
let isStr: string = 'aa';
let arr: number[] = [1, 2, 3];
let numArr: Array<number> = [1, 2, 3];//泛型数组
let objArr: object[] = [{ a: 1 }, { b: 2 }];
let currentTime: Date = new Date();

元组 Tuple (元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同)

let type_tuple: [string, number];
type_tuple = ['hello', 10];

// 类型断言 明确知道一个变量是什么类型时,用类型断言给这个变量标注类型
// 有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚
// 地知道一个实体具有比它现有类型更确切的类型。
// 通过_类型断言_这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言
// 里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。
// TypeScript会假设你，程序员，已经进行了必须的检查。

// 使用类型断言 as语法 
let someVal: any = 'is a string';
let strlength: number = (someVal as string).length;

enum-ts枚举

enum Color { red, blue, green };
let c1: Color = Color.blue;

any void类型

// any 提供强大的js兼容性 跳过ts类型检查
let a: any = 1;
a = '2';

// void 与any相对的数据类型 表示没有任何数据类型
function warnUser(): void {
    alert("This is my void");
}

interface-ts接口

interface-ts接口 接口的作用就是为类型命名和为你的代码或第三方代码定义契约。

// interface定义page接口 params要符合接口类型,:number指函数返回值的类型
interface page {
    pageSize: number,
    pageNumber: number | string,
    age?: number
}
function getList(params: page): number | string {
    return params.pageNumber
}
const num: number | string = getList({ pageSize: 30, pageNumber: 1.9 })
console.log(num)

定义一个或多个不确定属性名 不确定属性类型的接口

interface SquareConfig {
   color?: string;
   width?: number;
   [p: string]: any;
}
function createSquare(config: SquareConfig): void {
   // ...
}
let mySquare = createSquare({ colour: "red", width: 100, a: 12, color: '1' });

interface定义函数类型,每个参数都必须有类型 :后是定义函数的返回类型

interface type_fun {
    (paramsOne: number, paramsTwo: number): number
}
let addFun: type_fun = function (a: number, b: number) {
    return a + b
}
let sum: number = addFun(1, 2)

readonly 定义只读属性,对象属性只能在创建时修改值，赋值后不能改变。 定义常量变量用const 定义常量对象用readonly

interface Point {
    readonly x: number,
    readonly y: string
}
let p1: Point = { x: 10, y: '12' };
// p1.x = 12 无法分配到 "x" ，因为它是只读属性。

extends 继承接口， 多个时用,分开

interface ext {
    name: string
}
interface pages extends page, ext {
    pageall: number
}
let paramss = <pages>{};
paramss.pageSize = 1
paramss.name = '陶'

class-ts类 注意是;结尾

最基本的用法

class people {
    name: string;
    age: number;
    play: Function;
}
let xiaoMing = new people();
xiaoMing.name = '小明';
xiaoMing.age = 12;
xiaoMing.play = function (): void {
    console.log('吃饭')
}

在class中使用constructor constructor构造器,在class中定义构造方法

class userInfo {
    userName: string;
    constructor(msg: string) {
        this.userName = msg;
    };
    getUserInfo() {
        return this.userName
    }
}
function getName(): string {
    let resMsg: string = '😊';
    let g = new userInfo('吃鸡-科学之轮');
    resMsg = g.getUserInfo();
    return resMsg
}
const nameStr = getName()
console.log(nameStr)

extends 类的继承

car叫做派生类,通过extends派生自Animal基类。 派生类也叫做子类,基类叫做超类。

class Animal {
    name: string;
    move(age: number = 2) {
        console.log(`dog is ${age} `)
    }
}
class car extends Animal {
    bark() {
        return 2
    }
}

const car_block = new car();
car_block.name = 'mao';
let car_age: number = car_block.bark()

在class中使用super关键字 当派生类包含了一个构造函数，它_必须_调用 super() ，它会执行基类的构造函数。而且，在构造函数里访问 this 的属性之前，我们_一定_要调用 super() 这个是TypeScript强制执行的一条重要规则.

class c_people {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    };
    say(age: number = 3) {
        console.log(`${this.name} say: my age is ${age}`)
    }
}
class woMan extends c_people {
    constructor(name: string) {
        super(name)
    };
    say(age: number = 4) {
        console.log('is woman:')
        super.say(age)
    }
}
class man extends c_people {
    constructor(name: string) {
        super(name)
    };
    say(age: number = 5) {
        console.log('is man')
        super.say(age)
    }
}

let xiaoHua = new woMan('xiaoHua');
let xiaoLi = new man('xiaoLi')
xiaoHua.say()
xiaoLi.say()

在class中使用 public ,public指定成员是可见的 typeScript中默认定义的所有成员都是public（感觉这个关键字没啥用）

class public_man extends c_people {
    public constructor(name: string) {
        super(name)
    };
    public say(age: number = 5) {
        console.log('is man')
        super.say(age)
    }
}

在class类中使用 private 私有的,当成员被标记成 private 时，它就不能在声明它的类的外部访问。

class private_class {
    private name: string;
    constructor(theName: string) {
        this.name = theName
    }
}
let p_cl = new private_class('cat');
// p_cl.name 报错：属性“name”为私有属性，只能在类“private_class”中访问。

getters/setters
typeScript支持通过getters/setters来截取对 对象成员的访问。它可以帮助你有效的控制对 对象成员的访问。

class noGetSet {
    fullName: string;
}
let noGetSet_one = new noGetSet();
noGetSet_one.fullName = 'taoLiJun';//可以随意的对fullName修改

// 添加getters 和setters
const fullNameMaxLength: number = 10;
class hasGetSet {
    private _fullName: string;
    get fullName(): string {
        return this._fullName
    }
    set fullName(newName: string) {
        if (newName && newName.length > fullNameMaxLength) {
            throw new Error("fullName长度大于10")
        }
        this._fullName = newName;
    }
}
let hasGetSet_one: hasGetSet = new hasGetSet();
hasGetSet_one.fullName = 'xiaoyasdfsdfn';

class类的静态属性 static定义静态属性,静态属性存在于类本身上面而不是类的实例上

class Grid {
    static origin = { x: 0, y: 0 };
    constructor(public scale: number) { };
    play(point: { x: number; y: number; }) {
        let x = (point.x - Grid.origin.x);
        let y = (point.y - Grid.origin.y);
        // sqrt开平方根
        return Math.sqrt(x * x + y * y) / this.scale;
    }
}
let grid1 = new Grid(1.0);
let grid2 = new Grid(5.0);
let numOne = grid1.play({ x: 10, y: 10 })
let numTwo = grid2.play({ x: 10, y: 10 })
console.log(numOne, numTwo)

暂时就这些，后续会持续更新这篇笔记，总结自己学习ts的过程~