TYPESCRIPT - 技术教程文章
【Typescript】环境搭建（1）【代码】【图】
目录环境搭建创建index.html创建ts文件webpack 配置启动后面会写一些Typescript相关的一些内容，会先从简单的环境搭建，基本类型，枚举类型，类，接口等基础开始。再慢慢记录一些实战内容。项目目录结构：环境搭建1、安装TS TS 安装可以选择全局安装npm i typescript -g2、TS configtsc --init创建成功以后会在跟目录下创建一个tsconfig.json3、package.jsonnpm init会创建一个package.json文件。可以拷贝下面的内容，然后执行npm ...
typescript 入门教程二【代码】
ts中面向对象成员修饰符：public , private , protexted（ts官方网站：ts）在ts中，默认的成员修饰符就是publicpublic：是表示是公开的，在任何地方，都可以调用，不管在类中，还是子类中，还是对象中均是可以直接调用private:是表示私有的，只能在类中访问，不能在子类或者对象中访问，要调用私有的属性或者方法，可以通过在类中设置公有的方法访问私有的成员，对外暴露公有的方法进行访问，子类继承的时候，也可以继承父类私有的...
15、TypeScript-函数【图】
1、参数和返回值可以指定类型 2、可选参数：在参数上加上？，表示可选的，可传可不传 3、默认参数：如果你不传参数，默认为20，如果你传参，就是你传的参数 4、剩余参数：会把传进来的实参变成一个数组，可以进行遍历，一定要在形参前面加上...原文：https://www.cnblogs.com/hihi-jing/p/9532992.html
TypeScript学习 ———— 三、function【代码】
函数的声明function concatString(a:String,b:String):String{ return a+b } concatString(‘Hellow‘,‘TypeScript‘) //HellowTypeScripttype Sum1=((a:Number,b:Number)=>Number)|String //声明一个类型interface Sum2{(a:Number,b:Number):Number }const sum:Sum1=(a:Number,b:Number):NUmber=>a+b;//也可以如下定义sum函数const sum:Sum2=(a:Number,b:Number):NUmber=>a+b;//但是当我们希望sum函数可以返回一个String类型时...
初探typescript【图】
学习任何知识都不是一蹴而就的。typescript也是如此。今天我们来初步的了解一下typescript的安装与编译。以及基础的语法知识。 第一步：安装ts 第二步：在安装好的文件夹里面，写上ts文件 第三步：编译ts文件 就会发现我们的目录多了js文件 通过以上方法，我们可以通过TypeScript写的JavaScript应用。 接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解。 如果user值不是string类型的话，我...
typescript类【代码】
//4.1定义类class Person{name:string;constructor(n:string){this.name = n;}getName():string{returnthis.name}setName(name:string):void{this.name = name;} } const p = new Person(‘qin‘); p.setName(‘kai‘);//实现继承class Web extends Person{constructor(name:string){super(name)} } var w = new Web(‘li‘); w.getName()//4.2类里的修饰符（ts定义属性时给我们提供了3种修饰符） // public： 公有， 在类里...
TypeScript-封装【代码】
class People {private _name: string;age: number; print() {return this._name + ":" + this.age + ":";}//加入封装，使外部可使用私有get name():string{return this._name;}set name(newName:string){this._name=newName;//可加判断if(newName =="aaa"){ }else{ }} } let h = new People(); // h.name ="aaa";//Property ‘name‘ is private and only accessible within class ‘People‘ //接口 h.name = "sss"; h.age = 19...
vue3+typescript+element-plus表单验证(非获取实例)【代码】
vue3用composition api 取代了之前的options api，并且加强了支持typescript，另代码可读性和可改性更强了，用习惯了setup函数真的可以说句，真香。但是不可避免的，需要趟一些雷，比方说element-plus的表单验证功能。由于setup里取消了this获取实例，就突然变得不知所措。以下是我填坑的一些经验。先看element-plus官方文档中的验证写法。methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) ...
TypeScript Type Innference(类型推断)【代码】
在这一节，我们将介绍TypeScript中的类型推断。我们将会讨论类型推断需要在何处用到以及如何推断。基础在TypeScript中，在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息。var x = 3;变量"x"的值被推断为number。这种推断发生在变量或者成员初始化、设置参数默认值、决定函数返回类型的时候。最佳公共类型当需要从多个表达式中进行类型推断的时候，这些表达式的类型将会用来推断出一个"最佳公共类型"。例如：var x...
TypeScript【代码】【图】
下周一就开始学习JQuery了，╮(╯▽╰)╭，好快啊。js最后的总结了，不，应该是课业的最后总结了，毕竟，学无止境 1namespace meng{2 export class Student{3 private _name;4 private _age;5 private _gender;6 7 constructor(name,age,gender){8this._name=name;9this._age=age; 10this._gender=gender; 11 } 1213 get name() { 14returnthis._name; 15 } 1617 set ...
TypeScript学习（一）【图】
TypeScript安装：npm install -g typescript 【全局安装TypeScript】tsc -v 【查看tsc版本】tsctypescript的编译工具【把typescript代码编译成浏览器可以执行的javascript代码】- 使用npm安装了全局typescript后会自动安装tsc 字符串：1.使用 `` 两个撇号连接，可以随意换行2.多行字符串表达式写法：【使用``双撇号包裹，绑定变量使用 ${} 】【不使用双撇号是不可以这样写的】3.自动拆分字符串调用函数时，不使用()小括号调用，...
TypeScript学习笔记-高级类型【代码】
交叉类型为将两个类型混合联合类型表示可以是几种类型之一，用 | 分隔如果一个值是联合类型，那我们只能访问次联合类型的所有类型的公共成员可以使用typeof检查基础类型和instanceof来详细类型typescript会把null和undefined区别对待nul和undefined是所有其他类型的一个有效值声明了--strictNullChecks 标记后，当你声明一个变量时，他不会自动的包含null和undefined。而可选参数和可选属性会被自动的加上undefined去除null的手段（...
typescript学习笔记【代码】
/** 可索引接口** */// 对数组的的约束interface Lx { [idnex:number]:string}var arr:Array<string>=["1111111","2222222"]console.log(arr[1])//对对象的约束：index为string类型interface Obj { [index:string]:string}var obj:Obj={"jing":"guorui"}console.log(obj)//---------------------------------------------------------------------/** 类类型的接口，*implements用来继承类类型接口* */interface Animal {nam...
vscode 配置 react+typeScript 开发环境【代码】【图】
电脑环境：需要先安装好 1. nodejs （官网下载安装，安装8.0以上版本， 使用 node --version 查看是否安装成功）2. npm （安装好node时跟着就安装好了npm，使用 npm -v 查看是否安装成功）3. typescript （打开终端命令，输入 npm install -g typescript ，输入 tsc -v 查看是否安装成功） vscode 中搭建 react + typeScript 开发环境1. 新建一个空文件夹，比如命名为 react_add_ts 2. 在vscode中打开这个文件夹，注意这时候...
TypeScript新手入门学习指南，持续更新中~【代码】【图】
TypeScript新手指南众所周知， js 是一门弱类型语言，并且规范较少。这就很容易导致在项目上线之前我们很难发现到它的错误，等到项目一上线，浑然不觉地， bug 就UpUp了。于是，在过去的这两年， ts 悄悄的崛起了。周一随着一波热潮，也开始进入了 ts 的世界，不得不感叹 ts 的静态美。下面的文章中将讲解我对 TS 入门的一些归纳总结。一起来了解一下吧！一、什么是TypeScript？1、编程语言的类型动态类型语言（Dynamic Typed Lang...
使用vscode调试小段的typescript代码
最近在学习typescript。学习 嘛，当然免不了各种练习，试错。那么使用vscode就可以很方便的做到。首先是安装node.js。我们知道，node.js提供了js脱离浏览器的执行平台。node.js可以在官网下到，安装的时候下一步下一步就可以了。使用node.js的npm包管理工具安装插件。打开cmd输入一下命令安装全局插件（全局插件好像电脑上任何文件夹都可以访问,不过局部安装可以用tsconfig文件灵活的控制使用插件版本）:npm install -g ts-nodenpm...
TypeScript学习笔记（七） - 命名空间【代码】【图】
本篇将介绍TypeScript的命名空间，并简单说明一下与模块的区别。在之前的例子里，有如下一段代码，通过修改这段代码来演示命名空间的用法。 1interface Animal {2 name: string;3 eat(): void;4}5 6class Dog implements Animal {7 name: string;8 constructor(theName: string) {9this.name = theName; 10 } 1112 eat() { 13 console.log(`${this.name} 吃狗粮。`); 14 } 15} 1617class Cat implem...
转载：《TypeScript 中文入门教程》 3、接口【代码】
版权文章转载自：https://github.com/zhongsp建议您直接跳转到上面的网址查看最新版本。介绍TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接口初探下面通过一个简单示例来观察接口是如何工作的：function printLabel(labelledObj: { label: string }) {console.log(labelledObj....
vscode配置typescript和eslint的环境【代码】
一、typescript配置tsconfig.build.json{"extends": "./tsconfig.json","compilerOptions": {"outDir": "./deploy/dist",},"exclude": ["node_modules", "dist", "test", "**/*spec.ts"] } tsconfig.json{"compilerOptions": {"lib": ["es5", "es6"],"target": "es6","module": "commonjs","baseUrl": ".","paths": {"@common/*":["src/common/*"],"@configuration/*":["src/modules/configuration"],"@creative/*": ["src/modules...
TypeScript入门知识五（面向对象特性二）
1.泛型（generic）参数化的类型，一般用来限制集合的内容class Person { constructor(private name: string) { } work() { }}var worker: Array<Person> = [];//这里指定数组中只能放Person类创建的对象worker[0] = new Person("zhang san");2.接口interface用来建立某种代码约定，使得其他开发者在调用某个方法或者创建新的类时必须遵循接口所定义的代码约定。（一）//接口声明属性， interfac...
typeScript学习【代码】
typescript元组let arr: [string,number] = ['haha',3]enmu类型enum Color {Red = 3,Blue,Green } let color = Color[0] console.log(color) // undefinedlet color2 = Color[3] console.log(color2) //red可以指定序号enum Color {Red = 3,Blue = 5,Green = 7 }any类型void类型没有返回值function test ():void {console.log("void") }undefined和 nullundefined 是 null 的子类型，所以可以赋值给它let u: null = null let n: nu...
JavaScript 、TypeScript 中的 Boolean【代码】
boolean 是 JavaScript 中一种有趣的原始数据类型。在TypeScript中，非严格模式下（"strictNullChecks": false），它总共允许4个值 true 、false、undefined、null 。JavaScript 中的 Booleanboolean 可以取值 true 或 false 。 其他类型的值可以是真值或假值，例如 undefined 或 null 。let b = true if(b) console.log(‘logged‘)b = false if(b) console.log(‘not logged‘)b = undefined if(b) console.log(‘not logged‘)b...
基于Typescript的Vue项目配置国际化【代码】
基于Typescript的Vue项目配置国际化简介使用vue-i18n插件对基于Typescript的vue项目配置国际化，切换多种语言, 配合element-ui或者其他UI库本文以配置中英文两种语言为例安装安装国际化插件vue-i18nnpm i vue-i18n --save 添加locales文件在根目录下(src/)下新建目录 i18n/ 在src/i18n/目录下新建en.json文件，对应英文{"lang": {"login": "login"} } 在src/i18n/目录下新建zh.json文件，对应中文{"lang": {"login": "登录"} } 配置...
Declaration Merging with TypeScript
原文：https://blog.oio.de/2014/03/21/declaration-merging-typescript/ Why might you need this?There can be several scenarios where this might be required. One of the most common ones is when you want to extend an existing JavaScript library that comes with a type definition.---------------------------------------------------Declaration Merging with TypeScriptPosted on 21. March 2014 by S?nke Sothma...
08_TypeScript装饰器【代码】
装饰器：装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）。 1、类装饰器：类装饰器在类声明之前被声明（紧靠着类声明），类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数。类装饰器：普通装饰器（无法传参）//定义一个装饰器（其实就是一个方法）function decorator(target:any){//target 就是当前类 c...
在项目中使用TypeScript【代码】
新版本的Visual Studio对TypeScript已经有了很好的支持，我们可以直接添加TypeScript文件到项目中，IDE会在编写TypeScript代码的同时自动生成js文件到ts文件的同级目录下（注意只是生成，需要手动添加到项目里面来）。 然而在TypeScript中使用项目中已有的类库例如jQuery，则需要添加声明文件（*.d.ts）至项目目录中，否则IntelliSense是无法正常工作的。 除了自己编写声明文件以外，网上也有开源的项目例如definitelytyped，...
TypeScript 素描 - 函数【代码】
/* 函数和javaScript并没有太大差别,只是增加了额外的功能,使函数有 更为强大的功能而且更易用使用 *///现在支持函数的参数指定类型,在前面的博文中大家应该已经看到 //还可以指定函数的返回值 function fun7(x: number, y: number): number {return x + y; }let myadd = function (x: number, y: number): number { return x + y; };/*可选参数与默认参数*/ function fun8(x?: number, y: number = 8): void { }; //一个可选参数,...
如何在Vue项目中使用TypeScript【代码】
参考资料typeScript 文档Vue 官方文档 - TypeScript 支持代码地址vue-ts新建项目vue create vue-ts cd vue-ts vue add @vue/typescript 项目配置，可以参考这篇文章 在 Vue+TypeScript 项目中，如何配置 ESLint 和 Prettier类型注解和编译时类型检查类型注解：变量后面通过冒号+类型来做类型注解// test.ts let title1: string; // 类型注解 title1 = "xbl"; // 正确 title1 = 4; // 错误 let title2 = "xx"; // 类型推论 title2 =...
Typescript泛型【代码】
Typescript泛型 参考：https://www.tslang.cn/docs/handbook/generics.html 介绍软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。function identity<T>(arg: T): T {return arg; }我们给identity添加了类型变量T。T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之...
webpack配置练习typescript的web项目【代码】
目前最流行的三大框架，Angular高版本强制依赖ts，后来react和vue也引入对ts的支持。ts除了是js的超集，还很可能是js的未来，花点时间学一下也是有必要的。先从配置一个ts的web开发环境说起。首先建立文件夹ts-web并进入，然后初始化npm# 创建项目文件夹ts-web mkdir ts-web # 进入文件夹 cd ts-web # 初始化npm npm init -y安装与ts有关的依赖# 首先需要全局安装typescript npm i typescript -g# 再在项目中安装typescript和ts-lo...