TypeScript基础【学习笔记】

一、TypeScript 开发环境搭建

  1. 下载并安装 Node.js
  2. 使用 npm 全局安装 typescript
    • 进入命令行
    • 输入:npm i -g typescript
  3. 创建一个 ts 文件
  4. 使用 tsc 对 ts 文件进行编译
    • 进入命令行
    • 进入 ts 文件所在目录
    • 执行命令:tsc xxx.ts

二、基本类型

  • 类型声明

    • 通过类型声明可以指定 TS 中变量(参数、形参)的类型

    • 类新声明给变量设置了类型,使得变量只能存储某种类型的值

    • 语法:

      let 变量: 类型;
      let 变量: 类型 =;
      function fn(参数: 类型, 参数: 类型): 类型 {...
      }
      
  • 自动类型判断

    • TS 拥有自动的类型判断机制
    • 当对变量的声明和赋值是同时进行的,TS 编译器会自动判断白能量的类型
    • 如果变量的声明和赋值是同时进行的,可以省略掉类型声明
  • 新增类型

    类型例子描述
    any*任意类型
    unknown*类型安全的 any
    void空值 (undefined)没有值 (或 undefined)
    never没有值不能是任何值
    tuple[4, 5]元组,固定长度数组
    enumenum(A, B)枚举
    // 使用字面量声明
    let a: 10;
    a = 10;// 可以使用 | 来连接多个类型(联合类型)
    let b: 'male' | "female";
    b = 'male';
    b = 'female';let c: boolean | string;// 相当于关闭了 TS 类型检测
    let d: any;
    // let d; // 隐式的 any
    d = 10;
    d = 'hello';
    d = true;let e: unknown;
    e = 10;
    e = 'hello';
    e = true;let s: string;
    // d: any,可以赋值给任意变量
    // s = d;
    e = 'hello';
    // unknown 类型的变量不能直接赋值给其他变量
    if (typeof e === 'string') {s = e; // 类型不同
    }// 类型断言
    s = e as string;
    s = <string>e;function fn(): void {return;
    }function fn2(): never {throw new Error('报错了');
    }// 变量后面加上一个 ?表示属性是可选的
    let b: {name: string, age?: number};
    b = {name: 'abc', age: 18}; // 需要 name 属性let c: {name: string, [propName: string]: any};
    c = {name: 'aaa', age: 18, gender: 'male'}; // 设置函数结构的类型声明:
    // 语法:(形参: 类型, 形参: 类型 ...) => 返回值
    let d: (a: number, b: number) => number;
    // d = function(n1: string, n2: string): number {
    //     return 10;
    // } // 报错let e: string[]; // 表示字符串数组
    e = ['a', 'b', 'c'];
    let f: number[];
    f = [1, 2, 3]
    let g: Array<number>;
    g = [1, 2, 3];// 
    let h: [string, number]; // 元组
    h = ['hello', 123];// enum
    enum Gender {Male = 0,Female = 1
    }
    let i: {name: string, gender: Gender};
    i = {name: 'abc',gender: Gender.Male
    }
    // console.log(i.gender === Gender.Male);let j: { name: string } & { age: number }; // & 表示同时
    // j = {name: '孙悟空', age: 18};// 类型的别名
    type myType = 1 | 2 | 3 | 4 | 5;
    let k: myType;
    let l: myType;
    let m: myType;
    k = 5;
    

三、编译选项

1、自动编译文件

  • 编译文件时,使用 -w 指令后,TS 编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译
  • 示例:
    tsc xxx.ts -w

2、自动编译整个项目

  • 直接使用 tsc 指令,可以自动将当前项目下的所有 ts 文件编译为 js 文件

  • 直接使用 tsc 命令的前提时要现在项目根目录下创建一个 ts 的配置文件 tsconfig.json

  • 配置选项:

    • include

      • 定义希望被被编译文件所在目录
      • 默认值:["**/*"]
      • 示例:“include”: ["src/**/*", "tests/**/*"]
    • exclude

      • 定义需要排除在外的目录
      • 默认值:["node_modules", "bower_components", "jspm_packeages"]
      • 示例:“exclude”: ["./src/hello/**/*"]
    • extends

      • 定义被继承的配置文件
      • 示例:“extend”: "./configs/base"
    • files

      • 指定被编译文件的列表,只有需要编译的文件少时才会用到

      • 示例:

        "files": ["core.ts","sys.ts","types.ts",...
        ]
        
    • compilerOptions

      • 编译选项是配置文件中非常重要也比较复杂的配置选项

      • 在 compilerOptions 中包含多个子选项,用来完成对编译的配置

        • 项目选项

          • target

            • 设置 ts 代码编译的目标版本

            • 可选值:
              ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext

            • 示例:

              "compilerOptions": {"target": "ES6"
              }
              
          • 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"
              }
              

          示例:

          {"include": ["./src/**/*" // **:表示任意目录  *:表示任意文件],// "exclude": [//     "./src/hello/**/*"// ],"compilerOptions": {"target": "ES2015","module": "ES6",// "lib": ["es6", "dom"],"outDir": "./dist", // 用来指定编译后文件所在的目录// "outFile": "./dist/app.js"   // 将代码合并为一个文件"allowJs": true, // 是否对 js 文件进行编译"checkJs": true,    // 是否检查 js 代码是否符合规范"removeComments": true, // 是否移除注释"noEmit": false, // 不生成编译后的文件"noEmitOnError": true,  // 当有错误时不生成编译后的文件"strict": true,    // 所有严格检查的总开关"alwaysStrict": true,  // 用来设置编译后的文件是否使用严格模式"noImplicitAny": true,  // 不允许隐式的 any 类型"noImplicitThis": true,    // 不允许不明确类型的 this"strictNullChecks": true,  // 严格地检查空值}
          }
          

3、webpack

  1. 初始化项目

    • 进入项目根目录,执行命令 npm init -y:创建 package.json 文件
  2. 下载构建工具
    npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

    • 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');// 写入 webpack 的所有配置信息
    module.exports = {// 指定入口文件entry: "./src/index.ts",// 指定打包文件所在位置output: {// 指定打包文件的目录path: path.resolve(__dirname, 'dist'),// 打包后的文件filename: 'bundle.js',// 不使用 箭头函数environment: {arrowFunction: false}},// 指定 webpack 打包时使用的模块module: {// 指定要 load 的 rulerules: [{// test 指定规则生效的文件test: /\.ts$/,// 要使用的 loaderuse: [// 配置 babel{// 指定加载器loader: "babel-loader",// 设置 babeloptions: {// 设置预定义的环境presets: [[// 指定环境插件"@babel/preset-env",// 配置信息{// 要兼容的目标浏览器targets: {'chrome': "127",'ie': '11'},// 指定 core-js 的版本"corejs": "3",// 使用 corejs 的方式"useBuiltIns": "usage" // 表示按需加载}]]}},'ts-loader'],// 要排除的文件exclude: /node-module/}]},// 配置 webpack 插件plugins: [new CleanWebpackPlugin(),new HTMLWebpackPlugin({// title: "这是一个自定义的 title"template: "./src/index.html"}),],resolve: {extensions: ['.ts', '.js']}
    };
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Appium: 手机应用自动化测试(二)

前言 上一篇文章地址&#xff1a; Appium: 手机应用自动化测试(一)-CSDN博客 下一篇文章地址&#xff1a; 暂无 一、元素定位 通过上一节&#xff0c;我们了解到可以通过adb获取当前界面的元素信息&#xff0c;获取如下&#xff1a; This XML file does not appear to h…

差速解算程序,基于C++语言

下面是一个简单的 C 程序示例&#xff0c;用于计算两轮差速机器人的运动学解算。这个程序包括了运动学正解和逆解的实现。 我们将定义一个类 DiffDriveSolver&#xff0c;其中包含了正解和逆解的函数。此外&#xff0c;我们还将定义一个简单的测试函数来演示如何使用这个类。 …

Fusion360点击登录后没有跳转至浏览器

今日Fusion360崩溃后重启程序&#xff0c;点击“登录”之后没有跳转到浏览器登陆界面。搜了一下找到解决方案&#xff1a; 访问 http://login.autodesk360.com/ 并登录Autodesk账号。重新启动Fusion 360.

软件测试必备 - 14个接口与自动化测试练习网站

随着互联网和移动应用的快速发展,接口和自动化测试的重要性日益凸显。越来越多的企业开始重视API测试,因为它不仅能提升开发效率,还能确保系统的稳定性和安全性。这些练习网站为测试人员提供了宝贵的资源,帮助他们掌握必要的技能,应对日益复杂的测试需求。 在软件测试的世…

如何将远程修改同步到个人fork仓库

1、添加 远程上游仓库 // git remote add <remote-name> <url> git remote add upstream https://github.com/Soft/someproject.git //远程主干仓库 git remote add origin https://github.com/Demodevelop/someproject.git //远程仓库的fork 仓库 需要将远程…

【Linux】TCP全解析:构建可靠的网络通信桥梁

文章目录 前言1. TCP 协议概述2. TCP报头结构3. 如何理解封装和解包呢&#xff1f;4. TCP的可靠性机制4.1 TCP的确认应答机制 4.2 超时重传机制5. TCP链接管理机制5.1 经典面试题&#xff1a;为什么建立连接是三次握手&#xff1f;5.2 经典面试题&#xff1a;为什么要进行四次挥…

第10章、dva介绍与环境搭建;

一、介绍与环境搭建; 1、介绍; dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。 2、特性; 易学易用:仅有 6 个API,对 redux 用户尤其友好,配合 umi 使用…

探索 Laravel 事件工厂:构建测试数据的高效工具

探索 Laravel 事件工厂&#xff1a;构建测试数据的高效工具 引言 Laravel&#xff0c;作为一个优雅而强大的PHP框架&#xff0c;提供了许多令人惊叹的功能来简化开发过程。其中&#xff0c;事件工厂&#xff08;Event Factories&#xff09;是Laravel测试工具箱中一个非常有用…

Java每日一题 ~ 盛最多水的容器

. - 力扣&#xff08;LeetCode&#xff09; 1.题目解析 本题的要求就是&#xff1a;给定数组索引之间的差值为宽&#xff0c;元素值中小的为边长求面积。 2.算法分析 思路一&#xff1a;暴力枚举 暴力法的思路是对所有可能的容器组合进行穷举&#xff0c;计算它们能容纳的水…

[硬件]—电感传感器

电感传感器 1.概述 工作基础&#xff1a;电磁感应&#xff0c;即利用线圈自感或互感的改变来实现非电量测量。工作原理&#xff1a; 被测物理量&#xff08;非电量&#xff1a;位移、振动、流量&#xff09;&#xff1b;线圈自感系数L/互感系数M&#xff1b;电压或电流&#…

自定义Laravel Artisan风格:打造个性化命令行体验

自定义Laravel Artisan风格&#xff1a;打造个性化命令行体验 引言 Laravel的Artisan命令行工具是开发过程中不可或缺的一部分&#xff0c;它提供了一个强大的接口来执行各种开发、维护、测试等任务。除了执行命令&#xff0c;Artisan还允许开发者自定义命令行输出的风格&…

设计模式实战:订单处理系统的设计与实现

问题描述 设计一个订单处理系统,支持订单的创建、处理、取消和通知功能。系统需要确保订单处理流程的灵活性和可扩展性。 设计分析 命令模式 命令模式用于将请求封装成对象,从而使我们可以用不同的请求、队列或日志来参数化其他对象。订单处理系统中的每个操作(创建订单…

0729作业+梳理

一、作业 1.写一个日志文件&#xff0c;将程序启动后的每一秒时间写入到文件中 代码&#xff1a; #include<myhead.h> #include<time.h> //判断原本文件中的行数 int len_txt(FILE *fp) { char buf0; int count 1; while(1) { buffgetc…

计算是守恒与对称的,谋算(算计)是变通与破缺的

计算通常涉及到严格的数学或逻辑规则&#xff0c;这些规则保证了信息或量的守恒和对称性。例如&#xff0c;数学运算如加减乘除都遵循特定的规律&#xff0c;确保了结果的准确性和一致性。相比之下&#xff0c;谋算&#xff08;或称算计&#xff09;更多指策略性的考虑或具有权…

Redis 缓存中间件

目录 概念 安装redis redis基本命令 给redis添加密码 基础数据类型 string类型 list列表类型 set创建&#xff08;一个键对应一个值&#xff09; set 创建数据 get 获取数据 keys * 展示所有的键 exists 判断键值是否存在 type 查看数据的类型 del 删除键 rename…

学习008-02-04-03 Group List View Data(组列表查看数据)

Group List View Data&#xff08;组列表查看数据&#xff09; This lesson explains how to group the Employee List View data by department and position. 本课介绍如何按部门和职位对员工列表视图数据进行分组。 Note Before you proceed, take a moment to review the …

机械学习—零基础学习日志(高数15——函数极限性质)

零基础为了学人工智能&#xff0c;真的开始复习高数 这里我们将会学习函数极限的性质。 唯一性 来一个练习题&#xff1a; 再来一个练习&#xff1a; 这里我问了一下ChatGPT&#xff0c;如果一个值两侧分别趋近于正无穷&#xff0c;以及负无穷。理论上这个极限值应该说是不存…

2024下《系统架构设计师》案例简答题,刷这些就够了!

2024年软考下半年已经越来越近了&#xff0c;不知道今年备考架构的同学们准备得怎么样了呢&#xff1f; 简答题一直是架构拿分的重点区域&#xff0c;对于许多考生来说&#xff0c;也往往是最具挑战性的部分。今天我就把那些重要的案例简答题类型整理汇总给大家&#xff0c;希望…

02 Go语言操作MySQL基础教程_20240729 课程笔记

概述 如果您没有Golang的基础&#xff0c;应该学习如下前置课程。 Golang零基础入门Golang面向对象编程Go Web 基础Go语言开发REST API接口_20240728 基础不好的同学每节课的代码最好配合视频进行阅读和学习&#xff0c;如果基础比较扎实&#xff0c;则阅读本教程巩固一下相…

Qt Designer,仿作一个ui界面的练习(二):部件内容的填充

有了完成了布局的基本框架设计之后&#xff0c;对各个部件逐步完成内容的填充。 一、还是从顶边栏开始&#xff1a; 1、在顶边栏的topLogo里面拖入一个QLabel&#xff08;标签&#xff09;&#xff0c;命名为logoImage&#xff0c;删除标签的文字。 2、右键点击topLogo&#x…