TypeScript学习笔记

已于 2023-01-08 17:50:21 修改
阅读量146 收藏
点赞数
文章标签： typescript javascript 前端
于 2023-01-08 17:47:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15203169/article/details/128603519
版权

TypeScript

TS类型

  • string

    字符串

    let a: string;
let a = 'hello';

  • boolean

    布尔值

    let a: boolean;
let a = true;

  • number

    数字

    let a: number;
let a = 12;

  • 字面量

    固定参数值

    // 这个时候a只能为字符串hello或者数字12
let a: 'hello' | 12;

  • any

    可以表示任意类型，不建议使用，因为any可以复制给任意变量造成错误，如果声明变量时不指定变量类型，则TS解析器会制动判断变量为any（隐式的any）

    let a: any;

  • Null

    只有一个值null

    let a: null;
let a = null;

  • unknow

    表示未知类型的值,给变量u赋值时，与any一致，但是u不能赋值给其它变量

    let u: unknow;

    通过一些条件unknow可以赋值给其它变量

    let a: unknown;
let b: number;

if (typeof a == 'number') {
    b = a
};
//或者
b = <number>a;

    类型断言,用来告诉解析器变量的实际类型

    let a: unknown;
let b: number;

b = a as number;

  • void

    一般用于指定函数返回值为空，可以不写或只写一个return或者return null;

    function n1(): void {
    return;
};
// 或
function n2(): void {
    return null;
};
// 或
function n3(): void {
    
};

  • never

    表示永远不会返回结果（一般用于报错，死循环也没有返回值，函数不能返回任何东西，空也不能）

  • object

    一般不去单独使用

    // 使用方式,object变量里不能多不能少
let b: {name:string};
b = {name: 'hello'};

// 在变量后面加上问号时，这个参数可有可无（可选值），当这个参数有时则需要根据后面指定的类型来设置
// ?表示变量可能存在，可能不存在
let c: {name:string, age?:number};
c = {name:'hello', age:12};
c = {name:'hello'};

// 当需要设置d里必须有一个name属性，其他属性任意时,propName是睡意
//[propName: string]:any表示任意类型属性
let d: {name:string,[propName: string]:any};

    用于限制函数时，在函数里不能使用上面的任意类型属性，

    箭头后是用来指定返回值类型

    let v: (a: number, b: number) => number;

v = function (a, b): number {
    return a + b
};

  • array

    数组，python里的列表

    // 声明全是数字的数组
let n: number[]
// 声明一个全是字符串的数组
let e: string[];
e = ['a', 'b', 'c']
//或者
let g: Array<string>

  • tuple （TS特有）

    元组：固定长度的数组

    let h: [string, number]
h = ['a', 123]

  • enum （TS特有）

    枚举

    这样可以根据Gender去验证属性不用管他具体值代表的是什么，也可以不用给Gender里的属性赋值

    enum Gender1{
    Man = 0, //男
    Woman = 1 //女
}
// 或
enum Gender2{
    Man, //男
    Woman //女
}

let i: {name: string, gender: Gender }

i = {
    name:'李某人',
    gender: Gender1.Man
}

  • &表示同时, | 表示或

    and与or

    let a: {name:string} & {age: number}
a = {name:'lidong', age:12}

let b: {name:string} | {age: number}
b = {name:'str'}
b = {age:12}

  • 类型的别名

    type my = 1 | 2 | 3 | 4

let m: my
let k: my

编译选项

  • 直接运行TS文件

    npm i -g ts-node

  • 编译TS文件为JS文件

    tsc app.ts

  • 自动监视TS文件并编译

    一个终端只能监视一个文件

    tsc app.ts -w

  • 自动监视所有文件并编译

    直接执行

    tsc

    前提是需要在当前目录下有一个tsconfig.json

    tsconfig.json

    {
  /*
  include 指定需要编译的文件
  **  表示任意文件夹
  *   表示任意文件

  exclude 指定不需要编译的文件
  默认值['node_modules','bower_components','jspm_packages']

  extends 基础config目录下的base.json文件中的配置信息到tsconfig.json
  */
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./src/**/*"
  ],
  "extends": "./config/base",
  // 编译器配置
  "compilerOptions": {

    // 用来指定TS文件被编译的版本，默认转为ES3
    "target": "ES6",

    // 指定要使用的模块化标准 ES2015 = ES6
    "module": "ES6",

    // 用来指定项目中要使用的库
	// "lib": [],

    // 指定编译后的文件所在的目录
    "outDir": "./dist",

    // 将代码合并为一个文件,设置outFile后
    // 会将全局作用域中的代码合并到同一个文件中
    // module 必须设置为system或amd才能把模块化的代码合并
    "outFile": "./dist/app.js",

    // 是否对js文件进行编译，默认是false
    "allowJs": false,

    // 检查js代码是否符合TS规范
    "checkJs": false,

    // 是否移除注释，默认为false保留注释
    "removeComments": false,

    // 不生成编译后的文件
    "noEmit": true,

    //当有错误时不生成文件,默认false
    "noEmitOnError": true,

    // 所有严格检查的总开关，为true时以下都不用写了
    "strict": false,

    // 用来设置编译后的文件是否使用严格模式, 默认为false
    // 严格模式编译的代码好一些， 当有模块时会自动进入严格模式
    "alwaysStrict": false,

    // 不允许隐式的any（不是自己赋予的any）
    "noImplicitAny": false,

    // 不允许不明确类型this
    "noImplicitThis": false,

    // 严格检查空值
    "strictNullChecks": false
  }
}

webpack

  1. 初始化项目

    生成一个package.json

    npm init -y

  2. 安装webpack

    npm i -D webpack webpack-cli typescript ts-loader

  3. 创建webpack配置文件

    webpack.config.js

    const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode:'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(
            {
                // title: "网页标题"
                template: "./src/index.html"
            }
        ),
    ],
    // 用来设置可以引用的模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

  4. 添加打包命令

    package.json

    {
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
      //加上下面这个
      "build": "webpack"
  }
}

  5. 执行打包命令

    npm run build

webapck插件 html-webpack-plugin

用于一起打包css，与index

  1. 安装html-webpack-plugin

    npm i -D html-webpack-plugin

  2. 配置

    const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode:'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(
            {
                // title: "网页标题"
                //设置模板index
                template: "./src/index.html"
            }
        ),
    ],
}

webpack插件 webpack-dev

用于实时更新网页,网页随着TS文件更新

  1. 安装webpack-dev

    npm i -D webpack-dev-server

  2. 安装命令

    参考上方安装build命令

    "start":"webpack server"

  3. 运行

    npm run start

webpack插件 clean-webpack-plugin

用于打包前清空dist文件夹

  1. 安装

    npm i -D clean-webpack-plugin

  2. 参考html-webpack-plugin安装方法

兼容性工具

用于解决兼容性问题，通过一些方式让老的浏览器去支持新的技术

  1. 安装

    npm i -D @babel/core @babel/preset-env babel-loader core-js

  2. 配置

    webpack.config.js

    const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        // 告诉webpack不用箭头函数，对于部分老版本浏览器不支持ES6箭头函数
        environment: {
            arrowFunction: false
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            //设置预定义的环境
                            presets: [
                                //指定环境插件
                                '@babel/preset-env',
                                // 配置信息
                                {
                                    // 要兼容的目标浏览器
                                    targets: {
                                        "chrome": "88"
                                    },
                                    // 指定corejs版本
                                    "corejs": "3",
                                    // 使用corejs的方式 'usage'
                                    "useBuiltIns": "usage"
                                }
                            ]
                        }

                    },
                    'ts-loader'
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin(
            {
                template: "./src/index.html"
            }
        ),
    ],
    resolve: {
        extensions: ['.ts', '.js']
    }
}

面向对象

  • 程序

    显示世界的抽象，一个人的抽象=>照片

类（class）

  • 定义类：

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

  • 示例

    class Person{
    // 直接定义的属性是实例属性，需要对象的实例去访问
    // 需要创建实例才能访问
    name = 'laowang';

    // 静态属性 只能通过    类名.属性名  获取
    // 可以直接访问无需创建实例
    static age = 12;

    // 只读属性 无法修改    需要创建实例才能使用
    readonly next = 0

    // 静态只读属性
    static readonly last = 1

    // 方法 方法前加static为静态方法
    sayHello(){
        console.log('hello')
    }

    // 构造方法 类似python    def __init__():   构造函数会在类创建时执行
    // this 表示当前实例   类似python    self
    a:string
    b:number
    constructor(a:string, b:number) {
        this.a = a
        this.b = b
    }
}

const a = new Person('hello', 23)

类的继承

class Animal{
    name:string;
    age:number;

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

    sayHello(){
        console.log('key')
    }
}

// Dog继承了Animal
// 子类拥有父类的所有方法及属性
class Dog extends Animal{

}

class Cat extends Animal{

}

const a = new Dog('lihua', 12)
a.sayHello()

super关键字

import {name} from "ts-loader";

class Animal{
    name:string;

    constructor(name:string) {
        this.name = name
    }

    sayHello(){
        console.log('key')
    }
}

class Cat extends Animal{
    age:number;

    constructor(name:string, age:number) {
        // 不调用父类，那么父类的构造函数就不会走,子类的构造函数必须调父类的构造函数
        super(name);
        this.age = 12

    }
    sayHello() {
        // super表示当前类的父类
        super.sayHello();
    }
}

const a = new Cat('lihua',12)
a.sayHello()

抽象类与抽象方法



// 以abstract开头的类不能创建示例，只能被其它类继承

abstract class Animal{
    name:string;

    constructor(name:string) {
        this.name = name
    }
    // 抽象类可以定义抽象方法,抽象类方法没有函数体，子类必须重写
    abstract sayHello():void
}

class Cat extends Animal{
    sayHello() {
        // super表示当前类的父类
        console.log('hello')
    }
}

const cat = new Cat('lihua')
cat.sayHello()

接口

/*
* 接口
*   用来定义一个类的结构
* */

interface my {
    name: string;
    age: number
}

interface my {
    gender:string
}

const mys: my = {
    name:'he',
    age:12,
    gender:'a'
}

// 接口中所有方法都是抽象方法
interface myint{
    name:string;
    sayHello():void
}

class MyClass implements myint{
    name: string;

    constructor(name:string) {
        this.name = name
    }

    sayHello() {
        console.log(1)
    }
}

属性封装

防止一些值被误改

class Person {
    // public 表示公有属性，默认就是公有
    public _name: string;
    // private 表示私有属性，只能在类里访问
    //  通过在类中添加方法使得能获取私有属性
    private _age: number
    // protected 受保护的属性，只能在当前类或者当前类的子类中进行访问
    protected _gender: string

    constructor(name: string, age: number, gender: string) {
        this._name = name
        this._age = age
        this._gender = gender

    }

    // TS 中设置get方法
    get age() {
        return this._age
    }

    set age(value: number) {
        if (value > 0) {
            this._age = value
        }
    }
}

class A {
    // 简化写法
    constructor(public name: string, public age: number) {
    }
}

泛型

// 在定义函数时遇到类型不明确就可以使用泛型,T是任意的
function fn<T>(a: T): T {
    return a;
}

function fn1<ab, ac>(a: ab, b: ac): ab {
    console.log(b)
    return a;
}

// 不指定类型，TS可以制动推断
fn1(10, 'hello')
// 不是所有情况都能自动推断,手动指定泛型
fn1<string, number>('hello', 12)

interface myInterface {
    length: number
}

// 表示泛型T必须是myInterface的一个实现类（子类）
function f<T extends myInterface>(a: T): number {
    return a.length;
}

f('heol')

class MyClass<T> {
    name: T;

    constructor(name: T) {
        this.name = name
    }
}
极限可导
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
typescript学习笔记
03-04
Typescript 学习笔记 TypeScript 是一种静态类型的编程语言，作为 JavaScript 的超集，它的主要特性是坚持与 ECMAScript 标准同步发展。下面是 TypeScript 的一些重要知识点： 一、ECMAScript 标准同步发展 * ...
TypeScript 学习笔记
Alex_CYX的博客
07-22 984
本博客记录了学习TypeScript的过程。涵盖了TypeScript的基础知识、高级特性以及实用工具。内容包括TypeScript的安装与配置、基本语法、类型系统、函数和类的使用、模块化开发等。
cesium加载魔方立方体
taozi8957的博客
08-12 195
cesium加载魔方立方体
TypeScript 编译选项 compilerOptions 全部配置项
咸鱼滚滚
08-12 1378
示例： 在这个例子中，当处理 JSX 代码时，TypeScript 编译器将使用名为 的函数作为工厂函数，而不是默认的 。示例： 在这个例子中，当处理 JSX 代码时，TypeScript 编译器将从 模块导入用于处理 JSX 的函数或对象，而不是默认的 React 库。示例： 在这个例子中，TypeScript 编译器将在全局命名空间中查找名为 ""的对象来识别 React 相关的功能。示例： 在这个例子中，TypeScript 编译器将从当前目录下的 目录开始查找源文件。项目结构如下： 配置： 在
mapbox点位动态连线
taozi8957的博客
08-12 267
mapbox点位动态连线
TypeScript学习第十二篇 － 各种数据类型的定义
越陌度阡
08-12 258
1. 接口通过interface定义，type是用来定义类型别名；2. 接口可以重复定义，type不可以；3. 接口可以继承，type不可以继承，但是可以使用联合类型和交叉类型来模拟继承；
vue3使用pnpm运行项目但是运行不起来
一个努力不被优化的程序员
08-12 194
重新创建项目，将老项目的package.json，vite.config.ts，src等文件拖拽替换。删除node_modules重新下：文字编译乱码，utf-8可能解析处理问题。（如果哪位知道为什么会这样或者怎么解决麻烦留言下）运行项目的时候发现根本运行不起来了。删除node_modules重新下。尝试过创建.npmr文件。创建.npmr：不管用。
提升前端性能的JavaScript技巧
han2434的博客
08-14 709
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
Electron学习与总结
song854601134的博客
08-12 215
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 213
【代码】display:flex布局，最简单的案例。
vue 3d echarts scatter3D元素塌陷，图标塌陷进地图完美解决方案
creatlh的博客
08-12 187
当我们手机用 scatter3D 类型时，最小值因为渲染问题会塌陷进模型里面，所以只要让value固定，再将label formatter 配合 boxHeight属性即可解决，（代码附带自定义label图标解决办法）
Vue2 axios
最新发布
qq_53374893的博客
08-14 115
说明一下， 当前服务器 有资源 就不会走代理服务器了，直接返回当前资源 而且只能代理一个服务器.
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 160
【代码】playwright链接本地浏览器，实现自动登录。
【无标题】
weixin_42348009的博客
08-14 121
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值