TypeScript入门

1、什么是 Typescript 略

3、安装和初试 Typescript

先安装
npm install -g typescript

写一段简单的代码hello.ts

const hello = (name) => {
    return 'hello' + name
}
hello('mm')

编译 在cmd运行 tsc hello.ts
下面是编译后的代码

var hello = function (name) {
    return 'hello' + name;
};
hello('mm');

=============================================分割线

我们继续加深一点

var hello = function (name: string) {
    return 'hello' + name;
};
hello('mm');

编译之后，我们发现没有任何变化，因为如果你函数传其他类型，它连编译都不会通过

var hello = function (name) {
    return 'hello' + name;
};
hello('mm');

4、基础类型

js有其中数据类型
null、
undefined、
String 为字符串基本类型、
Number 为数值基本类型、
BigInt 为大整数基本类型、
Boolean 为布尔基本类型、
Symbol 为字面量基本类型。

平时声明变量

var a = 1;

typescript是这样的

var a: number = 2;
var b: null = null;
var c: undefined = undefined;
let notSure: any = 4; // 这个any允许我么你调用任何类型
notSure.myName
notSure.getName()

6、Array 和 Tuple

let arrOfNumber: number[] = [1, 2, 3, 4]
arrOfNumber.push(5)
let user: [string, number] = ['xsx', 1] // 限定每个位置的类型
user = ['xx', 2, true] // 会报错

7、interface 初探

1.对对象的形状（shape）进行描述

2.对类（class）进行抽象

定义一个接口像这样

interface Persion {
    readonly id: nmuber;
    name: string; // 记得使用分号
    age: number;
    addr?: string; // 价格? addr这个属性使可有可无的
}
正确是下面这个用法
let viking: Person {
    id: 123,
    name: 'xiaoming',
    age: 20
}
// 向下面这样定义是会报错
let viking: Person {
    name: 'xiaoming'
}
let viking: Person {
    name: 'xiaoming',
    age: 20，
    sex: '男'
}
viking.id = 111 // 会报错，不能赋值

8、函数和类型推断

对输入输出进行约定

// 记得可选参数只能放在最后面，否则会报错
function add(x: number, y: number, z?: number) {
    retuen x + y;
}
let result = add(2, 3)

// 也可以像下面这样设置默认参数，这样传两个可以，三个也可以，不传第三个参数就默认是 10
function add(x: number, y: number, z: number = 10) {
    retuen x + y;
}



// 可以赋值给另一个变量
const add = function (x: number, y: number, z?: number) {
    retuen x + y;
}
const add2: (x: number, y: number, z?: number) => number = add;

// 当我没有明确指定一个类型的时候typescript会默认帮我指定
let str = 'str';
str = 123 // 会报错

9、类（Class）第一部分

1.类：定义一个事物的抽象特点.

2.对象：类的实例.

3.面向对象：三大特性：封装、继承、多态.

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name
    }
    run () {
        return `${this.name} is running`
    }
}

const snake = new Animal('lily')
console.log(snake.run())

// 继承
class Dog extends Animal {
    bark() {
        return `${this.name} is barking`
    }
}
const xiaobao = new Animal('lily')
console.log(xiaobao.run())
console.log(xiaobao.bark())


// 方法重写
class Cat extends Animal {
    constructor(name) {
        super(name)
        console.log(this.name)
    }
    run() {
        return `Meow, ` + super.run()
    }
}
const maomao = new Cat('maomao');
console.log(maomao.run())

使用ts-node命令编译且立即执行 如： ts-node hello.ts

10、类（Class）第二部分

这一章节是讲解访问修饰符

class Animal {
    public name: string;  // 不可修改
    readonly age: string;  // 可修改
    static categoies: string[] = ['asd', 'xxx']; // 静态属性跟实例没有关系
    constructor(name: string) {
        this.name = name
    }
    run () {
        return `${this.name} is running`
    }
}
const snake = new Animal('snake');
console.log(snake.name);
snake.name = 'lucy';
snake.age = 123;  // 会报错
console.log(snake.name);
console.log(Animal.categoies);

11、类和接口

类也可以继承接口

interface Radio {
    switchRadio(): void;
}
interface Battery {
    checkBatteryStatus();
}
// 接口之间也可以有继承关系
interface RadioWithBattery extends Radio {
    checkBattery();
}
class Car implements Radio, Battery{
    // 一定要实现 switchRadio 方法，否则报错
    switchRadio() {
        
    }
    checkBatteryStatus() {
        
    }
}
class Cellphone implements Radio{
    swithRadio() {
        
    }
}

12、枚举（Enum）

就是提供一些有意义的字符串

enum Direction {
    Up,
    Down,
    Left,
    Right
}
console.log(Direction.Up)
console.log(Direction[0])

// 常量枚举
const enum Direction {
    Up,
    Down,
    Left,
    Right
}

编译好的代码为

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NeNEOHbT-1587136918807)(B9AFAB19D1FE4015A37EC7C6A326A4F6)]

13、泛型（Generics） 第一部分

灵活定义传入参数和返回参数

// 不一定是T，可以使任何字母，只是习惯是T而已
function echo<T>(arg: T): T {
    return arg
}
const result  = echo(true) // 传入参数是boolean，返回参数也一定是boolean、

// 定义 T、U 两个泛型，这里传参的类型和返回的类型一定要颠倒，否则报错
function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]]
}
// 返回的数组第一个一定要是number类型，第二个一定为字符串类型
cobst result = swap(['string', 123])

14、泛型（Generics） 第二部分 - 约束泛型

上一章节我们介绍泛型，返回值由传入的参数决定。

现在我们更进一步学习泛型

例如：限定某些参数才能传入方法

// 定义一个接口
interface IWithLength {
    length: number
}
// 规定传入的参数一定要带有 length 属性
function echoWithLength<T extends IWithLength>(arg: T): T {
    console.log(arg.length)
    return arg;
}
 
 const str = echoWithLength('str')
 const obj = echoWithLength({length: 10, width: 10});
 const arr2 = echoWithLength([1,2,3])