TypeScript快速入门转载

原创

小哥 3年前 (2022-10-22) 阅读数 52 #大杂烩

文章目录

第一章快速入门
第2章：面向对象

第一章快速入门

0、TypeScript简介

TypeScript是JavaScript的超集。
它对JS被延长了JS引入了类型的概念，并添加了许多新的功能。
TS代码需要由编译器编译。JS，然后移交给JS解析器执行。
TS完全兼容JS换句话说，任何JS代码可以直接使用。JS使用。
相较于JS而言，TS具有静态类型、更严格的语法和更强大的功能；TS可以在代码执行之前检查代码，从而减少运行时异常的机会；TS该代码可以编译成任何版本的JS代码，可以有效地解决不同JS操作环境中的兼容性问题；相同的功能，TS代码量将会更大JS，但由于TS在以后的代码维护中，代码结构更加清晰，变量类型更加清晰。TS但要好得多JS。

1、TypeScript 发展环境建设

下载Node.js
- 64位： https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
- 32位： https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
安装Node.js
使用npm全局安装typescript
- 输入命令行
- 输入：npm i -g typescript
创建一个ts文件
使用tsc对ts文件被编译。
- 输入命令行
- 进入ts文件所在的目录
- 执行以下命令：tsc xxx.ts

2，基本类型

类型声明
- 类型声明为TS一个非常重要的特点
- 您可以通过类型声明来指定。TS中的变量(参数、参数)的类型
- 指定类型后，在为变量赋值时，TS编译器将自动检查该值是否符合类型声明，如果符合则赋值，否则将报告错误。
- 简而言之，类型声明设置变量的类型，以便该变量只能存储某个类型的值。
- 语法：
  - let 变量: 类型;
```
let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
```
自动类型确定
- TS具有自动类型判断机制。
- 当同时执行变量的声明和赋值时，TS编译器自动确定变量的类型。
- 因此，如果同时完成变量声明和赋值，则可以省略类型声明。
类型：

类型

例子

描述

number

1, -33, 2.5

任意数字

string

‘hi’, “hi”, hi

任何字符串

boolean

true、false

布尔值true或false

字面量

其本身

限制变量的值是字面金额的值。

any

*

任意类型

unknown

*

类型安全any

void

空值（undefined）

无值(或undefined）

never

没有值

不能为任何值

object

{name:孙悟空的}

任意的JS对象

array

[1,2,3]

任意JS数组

tuple

[4,5]

元素，TS新型定长数组

enum

enum{A, B}

枚举，TS新类型位于
number
- let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; let big: bigint = 100n;
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}.

Ill be ${age + 1} years 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
- let unusable: void = undefined;
never
- function error(message: string): never { throw new Error(message); }
object(没有用处)
- let obj: object = {};
array
- let list: number[] = [1, 2, 3]; let list: Array = [1, 2, 3];
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;

类型断言
- 在某些情况下，变量的类型对我们来说很清楚，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 = (someValue).length;

3、编译选项

自动编译文件
- 编译文件时，请使用 -w 指令后，TS编译器自动监视文件的更改，并在更改时重新编译文件。
- 示例：
  - tsc xxx.ts -w
自动编译整个项目
- 如果直接使用tsc指令，您可以自动将所有内容放在当前项目下。ts文件已编译js文件。
- 但可以直接使用tsc该命令的前提是在项目的在在根目录下创建一个。ts的简介 tsconfig.json
- tsconfig.json是一个JSON文件，在添加配置文件后，只需 tsc 该命令完成整个项目的编译。
- 配置选项：
  - include
    - 定义要在其中编译文件的目录。
    - 默认值：[“*/”]
    - 示例：
      - "include":["src/*/", "tests/*/"]
      - 在上面的示例中，所有src目录和tests编译目录中的文件。
  - exclude
    - 定义需要排除的目录。
    - 默认值：[“node_modules”, “bower_components”, “jspm_packages”]
    - 示例：
      - "exclude": ["./src/hello/*/"]
      - 在上面的示例中，src下hello不编译目录中的文件。
  - extends
    - 定义被继承的简介
    - 示例：
      - "extends": "./configs/base"
      - 在上面的示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
  - files
    - 指定已编译文件的列表，该列表仅在要编译的文件较少时使用。
    - 示例：
      - "files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ]
      - 列表中的所有文件都将是TS编译后的编译器
    - compilerOptions
      - 编译选项是配置文件中非常重要且复杂的配置选项。
      - 在compilerOptions包含用于完成编译配置的多个子选项。
        
        项目选项
        
        target
        
        设置ts代码编译的目标版本
        
        可选值：
        
        ES3(默认)，ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
        
        示例：
        
        "compilerOptions": { "target": "ES6" }
        
        如上所述，我们已经编写了ts代码将被编译ES6版本的js代码
        
        lib
        
        指定代码运行的库(宿主环境)。
        
        可选值：
        
        ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
        
        示例：
        
        "compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
        
        module
        
        设置编译后的代码使用的模块化系统。
        
        可选值：
        
        CommonJS、UMD、AMD、System、ES2020、ESNext、None
        
        示例：
        
        "compilerOptions": { "module": "CommonJS" }
        
        outDir
        
        编译后的文件所在的目录
        
        默认情况下，已编译的js文件会和ts文件位于相同的目录中，设置outDir在此之后，您可以更改编译文件的位置。
        
        示例：
        
        "compilerOptions": { "outDir": "dist" }
        
        设置后编译js将生成该文件。dist目录
        
        outFile
        
        将所有的文件已编译一个js文件
        
        默认情况下，在全局作用域中编写的所有代码都合并为一个代码。js文件，如果module制定了None、System或AMD这些模块将合并到文件中。
        
        示例：
        
        "compilerOptions": { "outFile": "dist/app.js" }
        
        rootDir
        
        指定代码的根目录。默认情况下，编译文件的目录结构将基于最长的公共目录。rootDir您可以手动指定根目录
        
        示例：
        
        "compilerOptions": { "rootDir": "./src" }
        
        allowJs
        
        是否对js文件编译
        
        checkJs
        
        是否对js已检查文档
        
        示例：
        
        "compilerOptions": { "allowJs": true, "checkJs": true }
        
        removeComments
        
        是否要删除评论
        
        默认值：false
        
        noEmit
        
        不要编译代码
        
        默认值：false
        
        sourceMap
        
        是否生成sourceMap
        
        默认值：false
        
        严格检查
        
        strict
        
        启用所有严格检查，默认为。true设置完成后，相当于打开所有严格检查。
        
        alwaysStrict
        
        代码始终以严格模式编译。
        
        noImplicitAny
        
        禁止隐式any类型
        
        noImplicitThis
        
        禁令的类型尚不清楚。this
        
        strictBindCallApply
        
        严格检查bind、call和apply参数列表
        
        strictFunctionTypes
        
        严格检查函数类型
        
        strictNullChecks
        
        严格的空值检查
        
        strictPropertyInitialization
        
        严格检查属性是否已初始化
        
        额外检查
        
        noFallthroughCasesInSwitch
        
        检查switch语句包含正确的break
        
        noImplicitReturns
        
        检查该函数是否没有隐式返回值。
        
        noUnusedLocals
        
        检查未使用的局部变量
        
        noUnusedParameters
        
        检查未使用的参数
        
        高级
        
        allowUnreachableCode
        
        检查无法访问的代码
        
        可选值：
        
        true，忽略无法访问的代码
        
        false，无法访问的代码将导致错误。
        
        noEmitOnError
        
        在出现错误时不要编译
        
        默认值：false

4、webpack

通常，在实际开发中，我们需要使用构建工具将代码打包，TS它还可以与构建工具结合使用，具有以下功能webpack以如何将其与构建工具结合使用为例。TS。
步骤：
1. 初始化项目
  - 转到项目根目录并执行该命令。 npm init -y
    - 主要角色：创建package.json文件
2. 下载构建工具。
  - npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
    - 共安装了7个包
      - webpack
        
        构建工具webpack
      - webpack-cli
        
        webpack命令行工具
      - webpack-dev-server
        
        webpack开发服务器
      - typescript
        
        ts编译器
      - ts-loader
        
        ts装载机，用于webpack中编译ts文件
      - html-webpack-plugin
        
        webpack中html用于自动创建的插件。html文件
      - clean-webpack-plugin
        
        webpack清除插件，每个版本都将首先清除目录。
3. 在在根目录下创建webpack的简介webpack.config.js
  - const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin");
```
module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",

    devtool: "inline-source-map",

    devServer: {
        contentBase: ./dist
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack箭头功能，可选。
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },

    module: {
        rules: [
            {
                test: /.ts$/,
                use: {
                   loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:TS测试
        }),
    ]

}
```
4. 在在根目录下创建tsconfig.json，可以根据自己的需要进行配置
  - { "compilerOptions": { "target": "ES2015", "module": "ES2015", "strict": true } }
5. 修改package.json添加以下配置
  - { ...略... "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack", "start": "webpack serve --open chrome.exe" }, ...略... }
6. 在src下创建ts文件，并在和命令行上执行。 npm run build 编译代码，或执行它。 npm start 来启动开发服务器。

5、Babel

经过一系列配置后，使TS和webpack都被组合在一起，除了webpack，发展也往往需要结合起来。babel在上述步骤的基础上，通过以下步骤转换代码，使其与更多的浏览器兼容。babel引入到项目中。
1. 安装依赖项包：
  - npm i -D @babel/core @babel/preset-env babel-loader core-js
  - 共安装了4套餐分别为：
    - @babel/core
      - babel核心工具
    - @babel/preset-env
      - babel预定义的环境
    - @babel-loader
      - babel在webpack装载机输入
    - core-js
      - core-js用于使旧版本的浏览器支持新版本。ES语法
2. 修改webpack.config.js配置文件
  - ...略... module: { rules: [ { test: /.ts$/, use: [ { loader: "babel-loader", options:{ presets: [ [ "@babel/preset-env", { "targets":{ "chrome": "58", "ie": "11" }, "corejs":"3", "useBuiltIns": "usage" } ] ] } }, { loader: "ts-loader",
```
                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...
```
  - 因此，使用ts编译后的文件将是babel处理，使代码可以直接在大多数浏览器中使用，可以在配置选项中使用。targets指定要在中兼容的浏览器版本。

第2章：面向对象

面向对象是程序中一个非常重要的思想。它被许多学生理解为一个更困难、更深刻的问题，但事实并非如此。面向对象很简单，简而言之，程序中的所有操作都需要由对象来完成。

例如：
- 操作浏览器即可使用。window对象
- 使用操作网页的步骤document对象
- 将使用操作台。console对象

所有的操作都是通过对象进行的，也就是所谓的面向对象，那么对象是什么？这必须首先谈一谈什么是程序。计算机程序的本质是对真实事物的抽象。抽象的反义词是具体的。例如，一张照片是对一个具体人物的抽象，一个汽车模型是对一辆具体汽车的抽象，等等。程序也是对事物的抽象。在节目中，我们可以代表一个人、一只狗、一把枪、一颗子弹和其他所有的东西。一个东西变成了程序中的一个对象。

程序中的所有对象都分为数据和函数两部分。以人为例，人的姓名、性别、年龄、身高、体重等都属于数据，人可以说话、走路、吃饭、睡觉，这些都属于人的职能。数据是对象中的属性，功能称为方法。因此，简而言之，程序中的一切都是对象。

1、类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，例如：可以通过Person类创建一个人的对象，通过。Dog类通过创建狗的对象。Car类创建汽车对象，不同的类可以用来创建不同的对象。

定义类：

class 类名 { 属性名: 类型;

    constructor(参数: 类型){
        this.属性名 = 参数;
    }

    方法名(){
        ....
    }

}

示例：

class Person{ name: string; age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    sayHello(){
        console.log(大家好，我是${this.name});
    }
}

使用类：
- const p = new Person(孙悟空, 18); p.sayHello();

2、面向对象的功能

封装

对象本质上是属性和方法的容器，其主要功能是存储属性和方法，这称为封装。
默认情况下，对象的属性可以任意修改，以确保数据的安全。TS可以在中设置属性的权限
只读属性(readonly）：
- 如果在声明属性时添加一个。readonly，则该属性变为只读且无法修改
TS中的属性有三个修饰符：
- public(默认)，可以在类、子类和对象中修改。
- protected ，可以在类、子类中修改。
- private ，可以在类中修改。

示例：

public

class Person{ public name: string; // 要么写要么什么都不写public public age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以在类中修改
        this.age = age;
    }

    sayHello(){
        console.log(大家好，我是${this.name});
    }
}

class Employee extends Person{
    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //可以修改子类
    }
}

const p = new Person(孙悟空, 18);
p.name = 猪八戒;// 可按对象修改

protected

class Person{ protected name: string; protected age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(大家好，我是${this.name});
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //可以修改子类
    }
}

const p = new Person(孙悟空, 18);
p.name = 猪八戒;// 不能修改

private

class Person{ private name: string; private age: number;

    constructor(name: string, age: number){
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
        console.log(大家好，我是${this.name});
    }
}

class Employee extends Person{

    constructor(name: string, age: number){
        super(name, age);
        this.name = name; //不能在子类中修改
    }
}

const p = new Person(孙悟空, 18);
p.name = 猪八戒;// 不能修改

属性访问器
- 对于一些不想被任意修改的属性，可以进行设置。private
- 直接设置private将导致不再能够通过该对象修改其中的属性。
- 我们可以在类中定义一组方法来读取和设置属性，这个读取或设置属性的属性称为属性访问器。
- 读取属性的方法称为setter方法，则调用设置该属性的方法。getter方法
- 示例：
  - class Person{ private _name: string;
```
    constructor(name: string){
        this._name = name;
    }

    get name(){
        return this._name;
    }

    set name(name: string){
        this._name = name;
    }

}

const p1 = new Person(孙悟空);
console.log(p1.name); // 通过getter读取name属性
p1.name = 猪八戒; // 通过setter修改name属性
```
静态属性
- 静态属性(方法)，也称为类属性。使用静态属性不需要创建实例，可以通过类直接使用。
- 使用静态属性(方法)。static开头
- 示例：
  - class Tools{ static PI = 3.1415926;
```
    static sum(num1: number, num2: number){
        return num1 + num2
    }
}

console.log(Tools.PI);
console.log(Tools.sum(123, 456));
```
this
- 在课堂上，使用this表示当前对象

继承
- 在面向对象时继承的另一个功能。
- 其他类中的属性和方法可以通过继承引入到当前类中。
  - 示例：
    - class Animal{ name: string; age: number;
```
    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
}

class Dog extends Animal{

    bark(){
        console.log(${this.name}在王王！);
    }
}

const dog = new Dog(旺财, 4);
dog.bark();
```
- 无需通过继承修改类即可完成类的扩展。
- 重写
  - 当继承发生时，如果子类中的方法替换父类中同名的方法，这称为方法重写。
  - 示例：
    - class Animal{ name: string; age: number;
```
    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    run(){
        console.log(父类中的run方法！);
    }
}

class Dog extends Animal{

    bark(){
        console.log(${this.name}在王王！);
    }

    run(){
        console.log(子类中的run方法重写父类。run方法！);
    }
}

const dog = new Dog(旺财, 4);
dog.bark();
```
    - 可以在子类中使用super以完成对父类的引用。
- 抽象类（abstract class）
  - 抽象类是专门用于由其他类继承的类。它只能由其他类继承，不能用于创建实例。
  - abstract class Animal{ abstract run(): void; bark(){ console.log(动物在叫~); } }
```
class Dog extends Animals{
    run(){
        console.log(狗在跑~);
    }
}
```
  - 使用abstract开头的方法称为抽象方法，抽象方法没有方法体只能在抽象类中定义，继承抽象类时必须实现抽象方法。

3、接口（Interface）

接口的功能类似于抽象类的功能。不同之处在于，接口中的所有方法和属性都没有实际值。换句话说，接口中的所有方法都是抽象方法。接口主要负责定义类的结构。接口可以限制对象的接口。只有当对象包含接口中定义的所有属性和方法时，它才能与接口匹配。同时，你可以让一个类实现接口，在实现接口的时候保护类中的所有属性。

示例(检查对象类型)：

interface Person{ name: string; sayHello():void; }

function fn(per: Person){
    per.sayHello();
}

fn({name:孙悟空, sayHello() {console.log(Hello, 我是 ${this.name})}});

示例(实施)

interface Person{ name: string; sayHello():void; }

class Student implements Person{
    constructor(public name: string) {
    }

    sayHello() {
        console.log(大家好，我是+this.name);
    }
}

4、泛型（Generic）

在定义函数或类时，在某些情况下，泛型类型可以在无法确定要使用的特定类型(无法确定返回值、参数和属性的类型)的情况下发挥作用。

例如：
- function test(arg: any): any{ return arg; }
- 上例中，test函数具有不确定的参数类型，但当它可以确定时，返回值的类型和参数的类型是相同的。由于类型不确定，因此同时使用参数和返回值any，但很明显，这是不合适的，首先使用。any会关闭TS第二个设置不反映参数和返回值属于同一类型。
- 使用泛型：
- function test(arg: T): T{ return arg; }
- 这里的 <T> 是通用的，T这是我们为该类型指定的名称(不一定T)，设置后即可在函数中使用类属。T来表示该类型。因此，泛型实际上是非常容易理解的，并且代表某种类型。
- 那么，如何使用上面的函数呢？
  - 方法1(直接使用)：
    - test(10)
    - 在使用时，可以直接传递参数，并且将使用类型TS它是自动推断的，但有时编译器无法自动推断它。
  - 模式2(指定类型)：
    - test(10)
    - 您还可以在函数之后手动指定泛型。
- 您可以同时指定多个泛型，用逗号分隔：
  - function test<T, K>(a: T, b: K): K{ return b; }
```
test(10, "hello");
```
  - 在使用泛型时，您可以将泛型用作普通类。
- 泛型还可以在类中使用：
  - class MyClass{ prop: T;
```
    constructor(prop: T){
        this.prop = prop;
    }
}
```
- 此外，泛型的范围也可以受到限制。
  - interface MyInter{ length: number; }
```
function test(arg: T): number{
    return arg.length;
}
```
  - 使用T extends MyInter表示泛型T必须是MyInter不一定要使用接口类和抽象类。