TypeScript

TypeScript是什么？

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ ES6 教程）。

 

TypeScript 由微软开发的自由和开源的编程语言。

 

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript ，编译出来的 JavaScript 可以运行在任何浏览器上。

 

TypeScript 本身并非什么高深的技术，凡是有 JavaScript 基础的同学都可以轻松掌握

 

 

TypeScript的特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

 

类型批注和编译时类型检查

 

类型推断

 

类型擦除

 

接口

 

枚举

 

Mixin

 

泛型编程

 

名字空间

 

元组

 

Await

 

 以下功能是从 ECMA 2015 反向移植而来：

类

 

模块

 

lambda 函数的箭头语法

 

可选参数以及默认参数

 

 

TypeScript和JavaScript的区别

 

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改， TypeScript 通

过类型注解提供编译时的静态类型检查。

 

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

 

优势一 : 类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。

 

优势二 : 类型系统提高了代码可读性 , 并使维护和重构代码更加容易。                                                                                                                                                          

 

优势三 : 补充了接口、枚举等开发大型应用时 JS 缺失的功能。

 

Vue 3 源码使用 TS 重写，释放出重要信号 : TS 是趋势。

 

Angular 默认支持 TS; React 与 TS 美配合，是很多大型项目的首选

 

 

 

Hello TypeScript

const hello = "Hello TypeScript!"
console.log(hello)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名

 

使用方式：

 

通过 tsc fileName 编译转化为 js 文件

 

node 执行

 

 

自动编译TypeScript

 

安装 npm i ts-node-dev --save-dev

 

packages.json 中添加脚本

 

ts-node-dev --respawn --transpile-only server.ts

 

在终端中使用 npm run dev 启动

 

TypeScript 构成

 

TypeScript 程序由以下几个部分组成：

 

模块

 

函数

 

变量

 

语句和表达式

 

注释

 

TypeScript 基础类型

TypeScript 基础类型

//Number
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制

// boolean
let isDone: boolean = false;
// string
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} year
s old next month.`;

// 字面量 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
// any
let d: any = 4; d = 'hello';
d = true;
// unknown
let notSure: unknown = 4;
notSure = 'hello';

// void 
function run(): void { }
// never
function error(message: string): never {
throw new Error(message);
}
// tuple
let x: [string, number];
x = ["hello", 10];

// enum
enum Color {
Red,
Green,
Blue, }
let c: Color = Color.Green;
enum Color {
Red = 1,
Green,
Blue, }
let c: Color = Color.Green;
enum Color {
Red = 1,
Green = 2,
Blue = 4, }
let c: Color = Color.Green;

TypeScript 基础类型

类型断言（类型转换）

 

有些情况下，变量的类型对于我们来说是很明确，但是 TS 编译器却并不清楚，此时，可以通过类型断言来告诉编译器变

量的类型，断言有两种形式

 

// 第一种
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
// 第二种
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

TypeScript函数

函数定义

    // 声明式
    function fn(){

    }
    // 表达式
    const foo = function (){

    }
    // 箭头函数
    const foo1 = ()=>{}

函数返回值

 

 

我们会希望函数将执行的结果返回到调用它的地方 , 通过使用 return 语句就可以实现。

 

在使用 return 语句时，函数会停止执行，并返回指定的值。

 

function foo():void{

}
// 没有返回值的函数  使用void
const fn = ():void=>{

}

// 有返回值的函数 必须return
// 返回值的类型需要与函数定义的返回类型(return_type)一致
const fn1 = ():string=>{
    return 'fn1'
}
console.log(fn1())

const fn2 = ():boolean=>{
    return true
}

带参数函数

 

在调用函数时，您可以向其传递值，这些值被称为参数。

 

这些参数可以在函数中使用。

 

您可以向函数发送多个参数，每个参数使用逗号 , 分隔

 

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？

 

可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的， lastName 必选，那么就要调整它们的位置，把 firstName 放在

后面。如果都是可选参数就没关系。

 

默认参数

 

可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数

 

剩余参数

 

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

 

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

 

// 在形参处需要指定数据类型
const fn = (a:number,b:string):void=>{
    console.log(a,b)
}
// 实参列表不能多不能少
fn(10,'fn')

// 可选参数
// 必选参数不能位于可选参数后
const fn1 = (a:number,b?:string):void=>{
    console.log(a,b)
}

fn1(10)
fn1(10,'今天天气不错')
// fn1(1,'1111',555)  参数个数只能<=2 >=1

// 默认参数
const fn3 = (a:number,b:string = 'this is fn3()'):void=>{
    console.log(a,b)
}
fn3(10) // 10 this is fn3()
fn3(10,'this is') // 10 this is


// 剩余参数
const fn4 = (firstName:string,...names:string[]):void=>{
    console.log(firstName,names)
}
fn4("Joseph", "Samuel", "Lucas", "MacKinzie")

TypeScript 联合类型

联合类型（ Union Types ）可以通过管道 (|) 将变量设置多种类型，赋值时可以根据设置的类型来赋值。

 

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

 

语法： Type1 | Type2 | Type3

 

//联合类型的基本用法

let val:number | string | boolean
val = 10
val = 'qwer0'
val = false
console.log(val)
 
//联合类型数组

let a:number[] | string[] | boolean
a = false
a = [1,2,3,4,5,6]
a = ['q','w']


//联合类型函数
const fn = (): void | string | boolean | number[] => {
    return 'qwert'
}
console.log(fn())

const foo = (a: number | number[] | string | string[] | {}): void => {
    console.log(a)
}
foo(10)
foo(['q', 'w'])

TypeScript 类

TypeScript 是面向对象的 JavaScript

 

类描述了所创建的对象共同的属性和方法。

 

TypeScript 支持面向对象的所有特性，比如 类、接口等

 

定义类的关键字为 class ，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

 

字段 − 类里面声明的变量。字段表示对象的有关数据。

 

构造函数 − 实例化时调用，可以为类的对象分配内存。

 

方法 − 对象要执行的操作。

创建实例化对象

 

我们定义出来的类是可以作为类型去使用的

 

 

static 关键字

 

 

  static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用

 

instanceof 运算符

  instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true ，否则返回 false

 

访问控制修饰符

 

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。 TypeScript 支持 3 种不同的访问权限

 

public （默认） : 公有，可以在任何地方被访问。（写或不写都是 public ）

 

protected : 受保护，可以被其自身以及其子类和父类访问。

 

private : 私有，只能被其定义所在的类访问

 

继承

 

TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。

 

类继承使用关键字 extends ，子类除了不能继承父类的私有成员 ( 方法和属性 ) 和构造函数，其他的都可以继承。

 

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（ A 继承 B ， B 继承 C ）

 

继承类的方法重写

 

类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。

 

其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

 

//类的基本写法

// 定义一个Person类
class Person {
    // 字段（成员变量，属性，）
    name: string
    age: number
    sex: string

    // 构造方法(初始化)
    constructor(name: string, age: number, sex: string) {
        this.name = name
        this.age = age
        this.sex = sex
    }

    // 成员方法
    sayHi(): void {
        console.log(this.name + ': hi')
    }

    sayHello = (): void => {
        console.log(this.name + ': hello')
    }

    // 静态方法 内static修饰的方法叫静态方法，静态方法可以被类直接调用
    static drink(): void {
        console.log('喝水')
    }
}


//访问控制符修饰

// public（默认） : 公有，可以在任何地方被访问。（写或不写都是public）
// protected : 受保护，可以被其自身以及其子类和父类访问。
// private : 私有，只能被其定义所在的类访问

class Person2{
    sex:number
    protected name:string
    private idCard:string

    constructor(name: string, idCard: string,sex) {
        this.name = name;
        this.idCard = idCard;
        this.sex = sex
    }
}
const p = new Person2('张三','1215512',0)
console.log(p.idCard)

//继承

// 父类（基类）
class MyPerson{
    name:string
    sex:number
    age:number
    constructor(name: string, sex: number, age: number) {
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
    sayHi(){
        console.log(this.name+': hi')
    }
}
//子类（派生类）
class Student extends MyPerson{
    stuId:number

    constructor(name: string, sex: number, age: number,stuId) {
        // 通过super给父类的构造方法传参
        super(name, sex, age);
        this.stuId = stuId
    }
    sayHi() {
        // 通过super调用父类的方法
        super.sayHi();
        console.log('student say hi')
    }
}

const stu = new Student('张三',0,18,1001)
console.log(stu.stuId,stu.name)
stu.sayHi()

网

 

软件