typescript

已于 2022-03-16 15:03:45 修改
阅读量537 收藏
点赞数
文章标签： typescript
于 2022-03-09 16:10:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45972459/article/details/123380285
版权

开发环境搭建

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

1.TS的类型声明

unknown 实际上就是一个类型安全的any；
unknown 类型的变量，不能直接赋值给其他变量

/* 
{}用来指定对象中可以包含哪些属性
语法 {属性名：属性值}
在属性名后加上?表示属性是可选的 */ 
let a :{name:string,age?:number};
a = {name:"lili"};
********************************************************
// ### 01 定义对象结构
// [propName:string]:any 表示任意类型的属性
let b:{name:string, [propName:string]:any};
b = {name:"lili",age:18,gender:"女"}
********************************************************
/*  ### 02 定义函数结构
设置函数结构的类型声明语法：
(形参:类型,形参:类型...) => 返回值
*/
let c :(a:number, b:number) => number;
c = function(n1,n2):number {
    return n1+n2;
}
********************************************************
/*
### 03 数组的类型声明：
类型[]
Array<类型>
 */
let d : string[];
d = ["a","b","c"];

let e :Array<number>;
e = [1,2,3];
********************************************************
/* 
### 04 元组就是固定长度的数组
语法:[类型，类型，类型]
 */
let f :[string,number];
f = ["hello",123]
********************************************************
/* 
### 05 enum 枚举 
*/
enum Gender {
    Male,
    Female
}
let g :{name:string,gender:Gender};
g ={
    name:"lili",
    gender:Gender.Male // "male"
}

&逻辑与

// &表示同时拥有两个参数
let h:{name:string} & {age:number};
h = {name:"lili",age:18}

类型的别名

//适用于类型特别复杂的情况，简化类型的使用
type myType = 1|2|3|4|5;
let i :myType;

2.TS的编译选项

配置tsconfig.json文件

{
    /* 
    tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译
    */

    // ### 01 "include"用来指定哪些ts文件需要被编译
   "include":[
   "./src/**/*" // src任意目录下的任意文件
   ],
   //  ### 02 "exclude" 不需要被编译的文件目录，
   //  默认值：["node_modules","bower_components","jspm_packages"]
   "exclude":[
       "./src/hello/**/*"
   ],
    //  ### 03  "extends" 定义被继承的配置文件
   "extends":"",
    //  ### 04 "files" 指定被编译文件的列表，只有需要编译文件数量少时才会用到
   "files:[
       "core.ts",
       ...
   ],
    //  ### 04 "compilerOptions" （重点）
    // 编译选项是配置文件中非常重要也比较复杂的配置选项，包含多个子选项
   "compilerOptions":{
       "target":"es6", // 用来指定ts被编译为的ES版本
       "module":"es2015", // 指定要使用的模块化规范
       "lib":["dom"], // 指定项目中要使用的库，一般不需要设置
       "outDir":"./dist", // 指定编译后文件所在的目录
       "outFile":"./dist/app.js", // 将所有全局作用域中的代码合并到一个文件中，如果想要合并模块("module":"system")
       "allowJs":false, //是否对js文件进行编译。默认为false
       "checkJs":false, // 是否检查js代码是否符合语法规范，默认为false
       "removeComments":false, // 是否移除注释
       "noEmit":true, // 是否生成编译后的文件
       "noEmitOnError":true, // 当有错误时不生成编译后文件
       "strict":false, //所有严格检查的总开关
       "alwaysStrict":false, // 编译后的文件是否使用严格模式，默认为false
       "noImplicitAny":true, // 不允许隐式的any类型
       "noImplicitThis":true, // 不允许不明确类型的this
       "strictNullChecks":true, // 严格地检查空值
   }
}

在命令行输入tsc（或者tsc -w：监视所有文件）就可以实现ts编译了

3.使用webpack打包ts代码

  1. 对项目进行初始化 （生成package.json文件）；
    npm init -y

  2. 安装webpack所需依赖；
    cnpm i -D webpack webpack-cli typescript ts-loader，
    其他优化的依赖：
    cnpm i -D html-webpack-plugin——自动生成html文件，
    cnpm i -D webpack-dev-server——项目里面安装内置服务器，热刷新，
    cnpm i -D clean-webpack-plugin——生成新文件前清空dist文件夹，
    cnpm i -D @babel/core @babel/preset-env babel-loader core-js——生成不同版本文件，解决浏览器兼容性问题

  3. 编写webpack配置文件webpack.config.js；

// 引入一个包
const path = require("path");
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

// Webpack中的所有配置信息都应该写在module.exports中
module.exports = {
    entry:"./src/index.ts", // 指定入口文件
    // 指定打包文件所在目录
    output: {
        path:path.resolve(__dirname,"dist"), // 路径
        filename:"bundle.js" // 打包后文件的名字
        // 告诉webpack不使用箭头函数（兼容ie的情况）
        environment:{
        	arrowFunction：false
        }
    },
    // 指定webpack打包时要使用的模块
    module： {
        // 指定要加载的规则
        rules: [
            {
                test:/\.ts$/, //指定规则对哪些文件生效
                use:[
                	// 配置babel
                	{
                		// 指定加载器
                		loader:"babel-loader",
                		// 设置babel
                		options:{
                			// 设置预定义的环境
                			presets:[
	                			[
	                				// 指定环境的插件
	                				"@babel/preset-env",
	                				// 配置信息
	                				{
	                					// 要兼容的目标浏览器
	                					target:{
	                						"chrome":"58",
	                						"ie":"11"
	                					},
	                					// 指定corejs的版本
	                					"corejs":"3",
	                					// 使用core.js的方式 "usage"表示按需加载
	                					"useBuiltIns":"usage"
	                				}
	                			]
                			]
                		}		
                	},
                	'ts-loader', //要使用的loader,从后往前执行
                ]
                exclude:/node-modules/ //要排除的文件
            }
        ]
    },
    // 配置Webpack插件
    plugins:[
    	new CleanWebpackPlugin(),
    	new HTMLWebpackPlugin(options:{
    		// title:"这是一个自定义的title",
    		template:"./src/index.html", // 指定网页生成模板
    	}),
    ],
    // 用来设置引用模块
    resolve: {
    extensions:[".ts",".js"] // 指定哪些文件可以作为模块使用
    }
}
  1. 指定ts文件的编译规范 tsconfig.json；
  2. 往package.json文件中添加配置；
"scripts":{
	"build":"webpack",
	// 配置启动服务器
	"start":"webpack serve --open chrome.exe"	
}
  1. 执行编译命令；
    npm run build
  2. 启动服务器查看；
    npm start

4.面向对象简介

面向对象，简而言之就是程序之中所有的操作都需要通过对象来完成。

  • 类的定义
// 使用class关键字来定义一个类  

/*
类中主要包含了两个部分：
    属性
    方法
 */

class Person {

    /* 
        直接定义的属性是实例属性，需要通过对象的实例去访问；
            const per = new Person();
            per.name
        
        使用static开头的属性是静态属性（类属性），可以直接通过类去访问
            Person.age
    
    */


    // 定义属性（实例属性）
    name:string = "lili";
    // 在属性前使用static关键字可以定义类属性（静态属性）
    static age:number = 18;

    // 定义方法
    sayHello() {
        console.log("Hello!");
    }
    // 类方法
    static sayHello2() {
        console.log("Hello");
    }

}

const per = new Person();
console.log(per.name);
// 静态属性通过类来访问
console.log(Person.age);

per.sayHello();
Person.sayHello2();
  • 构造函数和this
class Dog{
    name: string;
    age: number;
    // constructor 被称为构造函数
    // 构造函数会在对象创建时调用
    constructor(name:string,age:number) {
        // 在实例方法中，this就表示当前的实例
        // 在构造函数中当前对象就是当前新建的那个对象
        // 可以通过this向新建的对象中添加属性
       this.name = name;
       this.age = age;  
    }
    bark() {
        // 在方法中可以通过this来表示当前调用方法的对象
        console.log(this.name);
    }
}

const dog1 = new Dog("小黑",4);
const dog2 = new Dog("小白",2);

dog1.bark();
  • 继承和super

// 定义一个animal类
class Animal {
    name: string;

    constructor(name:string) {
        this.name = name;
    }
    sayHello() {
        console.log("动物在叫");    
    }
}

/* 
    使用继承后，子类会拥有父类所有的方法和属性；
    通过继承可以将多个类中共有的代码写在一个父类中，避免代码的重复；
    子类可以对父类中的方法进行拓展和重写；
    子类中使用super关键字调用父类的方法；
*/

// 使Dog类继承Animal类
class Dog extends Animal{
    age:number
    constructor(name:string,age:number) {
        // 如果在子类中写了构造函数，在构造函数中必须对父类的构造函数进行调用
        super(name); // 调用父类的构造函数
        this.age = age;
    }
    // 子类独有的方法
    run() {
        console.log("I`m running");
    }
    sayHello() {
        // super表示当前类的父类
        super.sayHello();
        // console.log("汪汪！");
    }
}
// 使Cat类继承Animal类
class Cat extends Animal{
    sayHello() {
        console.log("喵喵！");
    }
}

const dog = new Dog("旺财",2);
const cat = new Cat("咪咪",3);
dog.run()
  • 抽象类
/* 
    以abstract开头的类是抽象类，
    抽象类是专门用来被继承的类，不能用来创建对象；
    抽象类中可以添加抽象方法；
*/
abstract class Animal {
    name: string;

    constructor(name:string) {
        this.name = name;
    }
    // 定义一个抽象方法
    // 抽象方法使用 abstract 开头，没有方法体
    // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
    abstract sayHello():void;
}
  • 接口

// 描述一个对象的类型
type myType = {
    name:string,
    age:number
};

/*  ### 01
    使用接口来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
    同时接口也可以当成类型声明去使用；

*/
interface myInterface {
    name:string,
    age:number;
}

const obj:myType = {
    name:"sss",
    age:11
};

/* ### 02 
    接口可以在定义类的时候去限制类的结构；
    接口中所有的属性都不能有实际的值，
    接口只定义对象的结构，而不考虑实际值，
    在接口中所有的方法都是抽象方法
*/

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

/* 
    定义类时，可以使类去实现一个接口,
    实现接口就是使类满足接口的要求
*/
class MyClass implements myInter {
    name: string;
    constructor(name:string) {
        this.name = name;
    }
    sayHello() {
        console.log("hi");
    }
}
  • 属性的封装
// 封装：不参与直接修改属性，让数据更安全

class Person {

    // TS可以在属性前添加属性的修饰符

    /* 
        public 修饰的属性可以在任意位置访问（修改）默认值；
        private 私有属性，只能在类内部进行访问（修改）
            通过在类中添加方法使得私有属性可以被外部访问
        protected 受保护的属性，只能在当前类及其子类中进行访问（修改0
    */

    private _name: string;
    private _age : number;

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

    /* 
        getter 方法用来读取属性
        setter 方法用来设置属性
            它们被称为属性的存取器
    */

   /*  // 定义方法，用来获取name属性
    getName() {
        return this._name;
    }
    // 定义方法，用来设置name属性
    setName(value:string) {
        this._name = value;
    }

    getAge() {
        return this._age;
    }

    setAge(value:number) {
        if (value >= 0) {
            this._age = value;
        }
    } */

    // TS中设置getter方法的方式

    get name() {
        return this._name;
    }
    set name(value) {
        this._name = value;
    }
    get age() {
        return this._age;
    }
    set age(value) {
        if (value >= 0) {
            this._age = value;
        }
    }
}

const per = new Person("lili",23);

// 外部获取
console.log(per.name);
per.age = -33;

***********************************************

class A {
    protected num:number;

    constructor(num:number) {
        this.num = num;
    }
}

class B extends A {
    test() {
        // 使子类可以拿到属性
        console.log(this.num);
    }
}

***********************************************

class C {
    // 可以直接将属性定义在构造函数中
    constructor(public name:string, public age:number) {

    }
}
  • 泛型
// function fn(a:number):number {
//     return a;
// }

/* 
    在定义函数或是类时，如果遇到类型不明确就可以使用泛型
*/

function fn<T> (a:T) : T {
    return a;
}

// 可以直接调用具有泛型的函数
let result = fn(10); // 不指定泛型，TS可以自动对类型进行推断
let result2 = fn<string>("hello"); // 指定泛型

 *****************************************************
// 定义多个泛型
function fn2<T,K>(a:T,b:K):T {
    console.log(b);
    return a;
}

*****************************************************
// 限制泛型的范围
interface Inter {
    length :number;
}

//  T extends Inter 表示泛型T必须是Inter的实现类(子类)
function fn3<T extends Inter>(a:T):number {
    return a.length;
}
fn3( {length:10});

class MyClass<T> {
    name:T;
    constructor(name:T) {
        this.name = name;
    }
}
const mc = new MyClass<string>("lili");
洛江清
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
typescript 环境配置
zsxy2019的博客
10-14 228
基本概念 node: 是独立于浏览器运行的js环境 npm: 会随着node一起被安装，是nodejs的包管理器，可以通过npm安装各类工具，尤其是前端开发工具 个人建议使用 yarn 来作为包管理器比较好，因为它会锁定版本号。 npm install -g yarn 编译器的选择 使用vscode typescript环境安装 1.安装node:官网下载 2.安装typescript npm install -g typescript 3.检查type是否安装成功 tsc -v 安装ts-node
TypeScript
03-12
适用于简单Typescript任务的样板启动器（由jest测试），由Localhost Academy提供由样板包括： 打字稿以获得更好的代码编写带有打字稿的笑话，可进行舒适的测试用于实时脚本重新加载的nodemon如何安装全局dep（如果...
typescript环境配置
Awna的博客
08-25 3605
基本概念 node: 是独立于浏览器运行的js环境 npm: 会随着node一起被安装，是nodejs的包管理器，可以通过npm安装各类工具，尤其是前端开发工具 编译器的选择 使用vscode typescript环境安装 安装node:官网下载 安装typescript npm install -g typescript 检查type是否安装成功 tsc -v 这一步如果提示 tsc: command not found 那表明没有配置node-globel环境变量，也就是执行命令的路径
TypeScript编译器tsc的入门指南
最新发布
你若盛开，清风自来
03-30 1040
本文将详细介绍TypeScript编译器tsc的使用方法，包括安装、编译、错误处理和代码格式化等内容。tsc是TypeScript开发者不可或缺的工具，通过本文的介绍，你应该已经掌握了tsc的基本使用方法。了解tsc的详细用法，有助于提高开发效率和代码质量。
配置typescript开发环境
helloful的博客
10-08 137
配置Typescript开发环境流程 安装流程 安装node,npm,vscode 安装Typescript Compiler讲ts编译成js npm install -g typescript npm instal ts-node npm install --save -g @types/node npm update -g typescript //更新 初始化：终端切换到项目的路径下 npm init //创建package.json tsc --init //闯进啊tsconfig.js
TypeScript环境配置详解
qq_44749491的博客
10-20 2873
TypeScript环境配置
typescript环境配置以及ts初学习
2301_76885465的博客
04-19 271
如果我们不指定返回的类型TS是推断不出来返回的是什么类型指定返回的类型，语法规则：Promise<类型>let promise:Promise<string>=new Promise((r)=>r('小满'))resolve(1)})})age:number=0//定义了变量不用也会报错，通常给个默认值或者赋值//TypeScript是不允许直接在constructor定义变量的，需要在constructor上面先声明ts interface 定义类 使用关键词implements后面。
TypeScript的环境配置与简单使用
scq_king的博客
03-30 368
TS的编译环境已经内置，无需手动安装。基于工程化的TS开发模式。
【详细教程 值得收藏】TypeScript的环境配置
XSL_HR的博客
09-27 1319
上篇文章讲述了TS的理论基础和工作流程，在上篇文章中留下了一个问题——我们应该如何让TS文件在浏览器上运行？本文是一篇关于如何配置TS环境的博客，会一步步带领学习TS的我们配置TS的环境。步骤详细，解释清晰！！
【零基础入门TypeScript】TypeScript - 环境设置
共同学习、强我国家
01-02 951
编译时，它将生成以下 JavaScript 代码。在本章中，我们将讨论如何在 Windows 平台上安装 TypeScript。我们还将解释如何安装 Brackets IDE。您可以使用上的 The TypeScript 在线测试您的脚本。在线编辑器显示编译器发出的相应 JavaScript。尝试以下示例。编译时，它将生成以下 JavaScript 代码12。
搭建TypeScript开发环境
diligentkong的博客
07-07 4737
TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更象传统的面向对象语言。TypeScript的优点JavaScript 只是一个脚本
零基础TypeScript 一、环境安装与配置
xw1193195009的博客
03-23 1098
1. 前端开发神器VsCode 这款微软的前端开发软件是前端必备软件，我们实验室的前端开发小伙伴都在用，用过都说好！！！ VsCode提供了海量的插件，一键安装，十分方便，后面用到是再说如何安装插件。 1.1 安装VsCode 直接去官网下载安装即可，官网地址：https://code.visualstudio.com/ 下载之后，选择自己喜欢的位置，一直默认即可。也可以去看一下其他大佬的安装教程。这里提供一篇作者为牛哄哄的柯南的博客作为参考，链接：VSCode安装教程（超详细） 安装完成后就可以快
搭建 TypeScript 环境 & TSC 命令的使用 & 配置 tsconfig 文件
热门推荐
青蛙king的博客
04-17 2万+
目录前言一、TSC 命令的使用二、tsconfig 配置文件的属性1、tsconfig 配置文件的顶层属性（1）、compilerOptions（2）、file（3）、 include 和 exclude（4）、compileOnSave（5）、extends（6）、typeAcquisition（7）、watchOptions（8）、reference2、tsconfig 具体配置与解析汇总3、重点属性的配置详解（1）、strict 模式详解（2）、模块解析baseUrl（3）、路径映射（path）（4）
TypeScript 介绍、安装和配置
Mark
01-09 2292
目录 1、TypeScript 基本介绍 2、Typescript 安装编译 3、配置 WebStorm 自动编译 TypeScript 1、TypeScript 基本介绍 Typescript 是由微软开发的一款开源的编程语言，它是 Javascript 的超级，遵循最新的 ES6、Es5 规范（TypeScript 包含 ES6，ES6 包含 ES5）。TypeScript 扩展了 ...
TypeScript开发环境搭建
hunkcai的专栏
08-01 2691
TypeScript 我们都知道JavaScript并不是一门面向对象的语言，在以前Web前端还不是很复杂的情况下使用JavaScript是可以应付各种需求的，但是当前端开发越来越复杂时，JavaScript就显得比较力不从心了，而TypeScript就是为了解决这个情况而诞生的语言，TypeScript是面向对象的语言同时支持许多面向对象的特性，可以使我们创建出更加强壮和易于扩展的程序。
TypeScript版加密工具PasswordEncoder
我的地盘听我的
07-25 723
TypeScript版的加密工具
BCrypt算法的基础使用
m0_53856016的博客
11-10 875
使用同一个原文进行反复编码，每次得到的结果都是不同的，因为在编码过程中，BCrypt使用了随机的盐，并且，使用的盐也作为编码结果的一部分保存了下来。随机生成一个含有29个字符的字符串,并且会与密码一起合并进行最终的密文生成。BCrypt算法是一种基于哈希算法的算法，所以，这种算法也是不可逆的！密码并未改变都是123456,而加密后的密文每一次的结果都不同的。通过BCrypt算法进行编码后的结果，长度固定为60字符。可以看出生成的不同密文最终的匹配结果都是true.每一次生成的盐的值都是不同的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛江清

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值