typescript

2021-02-23  本文已影响0人  jeneen1129

前提:

1. 视频链接:

主讲老师大地

2. 文件链接:

itying-typescript教程

3. 官网:

typescript
ts
angular

一、简介

google研发,为了面向大型复杂的项目,使用javascript可以搭建
ts 是 javascript 的超集,包含 es6 和 es5
实现类似 java | c# 这种面向对象的编程语言

ts 是由 c# 之父 Anders Hejlsberg 发起的

建议使用 es6 语法

二、使用

1. 安装

npm|cnpm install -g typescript 或者
yarn global add typescript

安装成功如下图:


1.png

2. 使用

三.语法

以下 typescript 简写为 ts

1.数据类型

ts 中 为了 使代码更规范,更有利于维护,增加了类型校验
变量一旦确定为哪个数据类型,不可改变数据类型
函数返回值类型等等语法比较严格,不然语法会报错

序号 类型 标识符 含义 备注 是否基本类型
1 布尔类型 boolean [true/false] let flag:boolean=false
2 数字类型 number [\d+.\d+] 未区分浮点类型和整数类型
3 字符串类型 string [char+] 单、双引号包裹
4 数组类型 array [number...] 必须指定数组类型,如 let arr:number[] = [1,2,3], 第二种定义方式 let arr:Array<number> = [1,2] 泛型
5 元组类型 tuple 数组的一种,可以指定每个数组元素的类型 let arr:[string, number, boolean] = ['ts', 3.18, true]
6 枚举类型 enum 事先考虑某个变量可能取得值 enum 枚举名 { 标识符[=整型常数], ... } ,类似C语言,其中值默认为索引值, 示例: enum Flag {success=1, error} let f:Flag=Flag.success
7 任意类型 any 可以赋值为任意类型 Object类型可以指定该类型 ×
8 null null 一个变量可以是基本数据类型,或者null或者undefined let num:number / null ×
9 undefined undefined 其他类型未初始化变量为undefined,但是引用会报错;如果直接指定undefined没有初始化就不会报错 let num:number / null / undefined ×
10 空类型 void 一般用于方法没有返回值 function run():void{} ×
11 never类型 never 从来不会出现 let a:never a=(()=>{ throw new Error('错误') })() ×

2.函数

3.类(上) —— es5 中的类

4.类(下) —— ts 中的类

2.png

5.接口

interface 关键字

接口的作用:
在面向对象的编程中,接口是一种规范的定义
它定义了行为和动作的规范,起到限制和规范的作用。
接口定义了某类所需遵守的规范,不关注类的内部状态数据,也不关注类里面方法的实现细节,它只规定类里必须提供某些方法,提供方法的类就可以满足实际需要。
ts 中的接口类似于 java, 同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等。

6.泛型

泛型: 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。
组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时
为你提供了十分灵活的功能。

在 c# 或者 java 等语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,方便用户以自己的数据类型来使用组件

通俗理解: 泛型就是解决类、接口、方法的复用性、对不特定数据类型的支持

7. ts 中的类型、接口、类、泛型的综合使用案例 —— ts 封装统一操作 Mysql 、 Mongodb 、 Mssql 的底层库

需求分析如下:
功能:定义一个操作数据库的库, 支持 Mysql Mssql Mongodb
要求1:Mysql Mssql Mongodb 功能一样, 都有 增删改查(add,update,delet,get)方法
注意:约束统一的规范,以及代码重用
解决方案:需要约束规范所以要定义接口,需要代码重用所以用到泛型
1. 接口: 在面向对象的过程中,接口是一种规范的定义,它定义了行为和动作的规范
2. 泛型: 通俗理解,泛型就是提高 类、接口、方法的复用性

interface DBI<T>{
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): any[];
}
// 定义一个操作 mysql 数据库的类   tip: 实现泛型接口 类也要是泛型类
class MySqlDb<T> implements DBI<T>{
    add(info: T): boolean {
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }
}

class MsSqlDb<T> implements DBI<T>{
    add(info: T): boolean {
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }
}

class MongoDb<T> implements DBI<T>{
    add(info: T): boolean {
        throw new Error("Method not implemented.");
    }
    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }
    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }
    get(id: number): any[] {
        throw new Error("Method not implemented.");
    }
}
// 操作用户表 定义一个 User 类和数据表做映射
class User {
    id: number | undefined;
    username: string | undefined;
    password: string | undefined;
    constructor(id: number, username: string, password: string) {
        this.id = id
        this.username = username
        this.password = password
    }
}
let u1 = new User(1, 'lily', '111111')
// let mMysql = new MySqlDb() // 没有校验作用
let mMySql = new MySqlDb<User>() // 类作为参数来约束数据传入的类型
mMySql.add(u1) 
let mMsSql = new MsSqlDb<User>() // 类作为参数来约束数据传入的类型
mMsSql.add(u1) 

8. ts 模块

js 模块化 学习
ts 模块的概念(官方):
· ts1.5发生了一些术语的变化,‘内部模块’ 称为 ‘命名空间’
· ‘外部模块’现在简称为‘模块’,模块在其自身的作用域里执行,而不是在全局作用域里,说明在一个模块里的变量、函数、类等等在模块外部不可见(不暴露、封装性) ,除非 export , 需要使用的时候使用 import 引入 export 暴露的方法、类、变量等等。

语法与 es6 相同

``` typescript
// index.ts 使用
import {User, UserModel} from './7-ts-modules/model/User'
import {Article, ArticleModel} from './7-ts-modules/model/Article'

/**
 * 案例 之 7-ts 进行模块化
 */
var u = new User(1, 'lily', '111111')
UserModel.add(u)
var article = new Article(1, '特大新闻!特大新闻!今天有毛毛雨!', 'lily')
ArticleModel.add(article)


// db.ts
interface DBI<T>{
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): any[];
}
// 定义一个操作 mysql 数据库的类   tip: 实现泛型接口 类也要是泛型类
export class MySqlDb<T> implements DBI<T>{
    add(info: T): boolean {
        console.info(info)
        return true
    }
    update(info: T, id: number): boolean {
        return true
    }
    delete(id: number): boolean {
        return true
    }
    get(id: number): any[] {
        return []
    }
}

export class MsSqlDb<T> implements DBI<T>{
    add(info: T): boolean {
        console.log(info)
        return true
    }
    update(info: T, id: number): boolean {
        return true
    }
    delete(id: number): boolean {
        return true
    }
    get(id: number): any[] {
        return []
    }
}

// User.ts
import {MySqlDb} from '../db/db'

class User {
    id: number | undefined;
    username: string | undefined;
    password: string | undefined;
    constructor(id: number, username: string, password: string) {
        this.id = id
        this.username = username
        this.password = password
    }
}

let UserModel = new MySqlDb<User>() // 类作为参数来约束数据传入的类型

export { User, UserModel }

// 同理 > Article.ts
import {MsSqlDb} from '../db/db'

class Article {
    id: number | undefined;
    title: string | undefined;
    author: string | undefined;
    constructor(id: number, title: string, author: string) {
        this.id = id
        this.title = title
        this.author = author
    }
}

let ArticleModel = new MsSqlDb<Article>() // 类作为参数来约束数据传入的类型

export { Article, ArticleModel }

```

引入其他模块之后,编译之后的文件路径会有所变化

Notes:

  1. 可以感受到 ts 不仅可以用于 网页, 还可以用于 大型程序多人开发, nodejs环境...
  2. 其编程思想仍然更古不变,编程思想,设计模式很重要

9. 命名空间

定义:
代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内
同 java 的包、.Net 的命名空间一样, ts 的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。
命名空间内的对象通过 export 暴露
与模块的区别:

名称 区分
命名空间 内部模块,主要用于组织代码,避免命名冲突
模块 ts 的外部模块简称,侧重代码的复用,一个模块里可能会有多个命名空间

相同点: 解决的都是代码作用域的问题

利用 namespace 关键字:

``` typescript
namespace PersonA {
    interface Animal {
        name: string;
        eat() : void;
    }
    export class Dog implements Animal {
        name: string;
        constructor(name:string) {
            this.name = name
        }
        eat() {
            console.log('小狗在吃饭')
        }

        export namespace H {
            let name: string = 'jaj'
        }
    }
}

namespace PersonB {

}

let dog = new PersonA.Dog('花花')
dog.eat()
```

10. 装饰器

定义:
装饰器是一种特殊类型的声明,它能够被附加到类声明、方法、属性或参数上,可以修改类的行为。
通俗理解: 装饰器是一个方法,可以注入到类、方法、属性参数来扩展他们的功能。
常见的装饰器有: 类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法: 普通装饰器(无法传参)、装饰器工厂(可传参)
装饰器是过去几年中 js 最大的成就之一,已经是 es7 的标准特性之一

装饰器顺序:

顺序 名称 多个内部顺序
1 属性装饰器
2 方法装饰器
3 方法参数装饰器 先执行后面的,从后向前
4 类装饰器 先执行后面的,从后向前

四.案例 【 ts + angular 】

前提:

安装angular/cli:
npm|cnpm install -g @angular/cli
验证:
ng version
新建项目:
ng new demo01

scss 和 sass 的区别:scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力

  1. 文件扩展名不同,sass是以“.sass”后缀为扩展名,而SCSS是以“.scss”后缀为扩展名。
  2. 语法不同,sass是以严格的缩进式语法规则来书写,而scss的语法与css语法非常相似。

运行项目:
ng serve --open

来自b站视频观看笔记,有错请指正!!

上一篇下一篇

猜你喜欢

热点阅读