TYPESCRIPT - 技术教程文章
Typescript方法重载实现系列二【代码】【图】
Typescript方法重载实现系列二function getInfo(name:string):string; function getInfo(name:string,age:number):string; function getInfo(name:any,age?:any):any{if (age) {return ‘我叫---‘+name+‘我的年龄是‘+age}else{return ‘我是‘+name} } console.log(getInfo("李四")) console.log(getInfo("李四",20))运行结果:原文：https://www.cnblogs.com/malong1992/p/13380935.html
[TypeScript] Stopping a TypeScript Build When Errors Are Found【代码】
TypeScript will always compile even if there are ridiculous errors in your project. This lesson shows how to configure your .tsconfig with "noEmitOnError" so that no files are output if tsc reports an error. tsconfig.json:{"compilerOptions": {"module": "commonjs","target": "es5","noImplicitAny": false,"sourceMap": false,"outDir": "./dist","noEmitOnError": true},"files": ["main.ts"] } 原文：http:/...
TypeScript入门四：TypeScript的类（class）【代码】
TypeScript类的基本使用（修饰符）TypeScript类的抽象类（abstract）TypeScript类的高级技巧 一、TypeScript类的基本使用（修饰符）TypeScript的类与ES6的类非常类是，所以建议先了解ES6的类的相关内容：ES6入门六：class的基本语法、继承、私有与静态属性、修饰器。1.最简单的TypeScript的类示例与ES6实现对比： 1class tsClass{2 public a:string ; //公有成员 3 private b:number[] ; //私有成员 4 protected c:string[] ...
typescript 相关【代码】
很多时候需要用到类型 {key:value} ， 以下为声明方式: //key为string , value为numbervar map: { [key: string]: number; } = { "t" : 3, "o" : 5, "g" :10};for(let k in map){ egret.log(map[k]);}拓展 window 对象:shims-tsx.d.ts 代码 (shims-tsx.d.ts 放在 src 目录下 ) (vue ui 安装 typescript 也可以自动创建。)import Vue, {VNode} from ‘vue‘declare global {interface Window {MathJax: any}namespace J...
[TypeScript] Generating Definition Files【代码】
TypeScript allows you to generate definition files for your own libraries. This lesson shows you how to organize your project and generate the definition files so that others projects can use your library with TypeScript. If you‘re writing a library and you want to generate your own definition files, just make sure and add declaration to your tsconfig:{"compilerOptions": {"rootDir": "src","module...
TYpeScript接口的使用【代码】
1、接口中的属性值的使用： 1// 作用是强制类型检查 2interface Iperson { 3 name: string;4 age: string;5}6 7class Person { 8 constructor(public config:Iperson) { 910 } 11} 1213 let p1: Person = new Person({ 14 name: ‘swe‘, 15 age:‘12‘ 16 });2、接口中的方法的使用没有多态。使用效果与Java十分类似。 1interface Animal { 2 eat();3}4 5class Dog implements Animal { 6 eat() { 7 ...
typescript_类【代码】
//类的定义class Animal{id:string;//默认访问修饰符为 public ： 类本身、子类、类外部可访问public name:string; // public ： 类本身、子类、类外部可访问protected type:string = ‘动物‘; // 保护成员 protected， 类本身、子类可访问， 类外部不可访问private color:string; // 私有成员 private: 类本身访问， 子类、类外部不可访问//构造函数 constructor(id:string, name:string,color:string){this.id = id;this.nam...
typescript装饰器-类装饰器【代码】【图】
type Ctor<T> = new (...args: any[]) => Tfunction auto<T>(className: Ctor<T>) {returnfunction (target: any, attr: any) {// target 是类的原型对象, attr 属性的名称 (url) console.log(target);console.log(attr);console.log(className)target[attr] = new className();} }function autoClass<T extends { new(...args: any[]): any }>(constructor: T) {return class extends constructor {name = "new property";...
TypeScript的4种编译方式
1、手动编译 1.1、首先找到TypeScript的安装目录，我的在”C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0“。 1.2、使用cmd工具命令cd到安装目录。 1.3、输入命令：tsc 文件名.ts，回车编译。一旦编译成功，就会在相同目录下生成同名的js文件（编译成功后是没有任何消息提示的。上图中，这也是编译成功的。只要不存在语法错误）。2、设置自动编译 2.1、找到项目文件（*.csproj的文件），编辑打开，找到<Targe...
TypeScript入门知识二（参数新特性）
一，参数类型 1.在参数的名称后面使用冒号来指定参数的类型，当赋值的不是指定类型数值时会报错。 var myname: string = "zhang san"; 2.当你没有指定类型时，会默认你第一次赋值的数据类型为当前变量的数据类型，在TypeScript中称为(类型推断机制) var myname = "zhang san"; myname = 13;//(这时候就会报错) 3.any 类型，当定义为any 类型时，可以赋多种类型的数值。 var myname ：any = "zhang san"; m...
TypeScript【代码】
http://www.typescriptlang.org/Playground/ TypeScript lets you write JavaScript the way you really want to.TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.Any browser. Any host. Any OS. Open Source. var Greeter = (function () {function Greeter(message) {this.greeting = message;}Greeter.prototype.greet = function () {return "Hello, " + this.greeting;};return Greete...
react typescript jest config (一)【代码】
1. initialize projectcreate a folder project Now we’ll turn this folder into an npm package.npm init -yThis creates a package.json file with default values.2. Install react typescript dependenciesFirst ensure Webpack is installed.npm i webpack webpack-cli webpack-merge html-webpack-plugin webpack-dev-server -DWebpack is a tool that will bundle your code and optionally all of its dependencies into...
Typescript中存取器getters和setters的使用【代码】【图】
1.存取器存取器可以让我们可以有效的控制对，对象中的中的成员的访问。 可以通过getters和setters来进行操作 在typescript中分别对应 get 和 set 2.如何解决报错typescript 编译报错： Accessors are only available when targeting ECMAScript 5 and higher.报错原因：问器只在针对ECMAScript 5或更高版本时可用 知道了原因我们就可以解决了执行如下借可以解决了 tsc ./你的文件名.ts -t es5 3.get和set的执行时机在获取值的时候，...
typescript函数书写【代码】
ts函数书写跟js函数书写有点区别，传参也是声明数据类型，同时还要在()后面也要声明返回的数据类型function xiaojiejie(age: Number): string {return age + '岁小姐姐!' } var age: Number = 18 var result: string = xiaojiejie(age) console.log(result) => 18岁小姐姐!1、可选参数可选参数必须跟在必须参数后面，可选参数可传可不传，如果不传，默认就是undefinedfunction myfn (str?:string): string {return '参数' + str }2...
TypeScript（12）： Array(数组)【代码】【图】
数组对象是使用单独的变量名来存储一系列的值。数组非常常用。假如你有一组数据（例如：网站名字），存在单独变量如下所示：var site1="Google"; var site2="Runoob"; var site3="Taobao";如果有 10 个、100 个这种方式就变的很不实用，这时我们可以使用数组来解决：var sites:string[]; sites = ["Google","Runoob","Taobao"]这样看起来就简洁多了。TypeScript 声明数组的语法格式如下所示：var array_name[:datatype]; /...
[Typescript] “Record” Mapped Type【代码】
"Record" repersent key-value pair.type MyRecord<K extend string, T> = {[P in K]: T } Record key should be string.array[0]in javascript, even we give array 0 as key, it still convert to string "0"array[0] array["0"]they are the same. let dictionary: Record<string, TrackStates> = {}interface TrackStates {current: string;next: string; }const item: Record<keyof TrackStates, string> = {current:...
Typescript环境配置 (vscode)【代码】
typescript环境配置安装node, 安装cnpm安装typescript, ts-nodecnpm install -g typescript cnpm install -g ts-node 用vscode打开项目文件夹tsc -init 生成一个tsconfig.json文件 文件如下：{"compilerOptions": {/* Visit https://aka.ms/tsconfig.json to read more about this file *//* Basic Options */// "incremental": true, /* Enable incremental compilation */"target": "es5", ...
【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)【代码】
源代码地址通过对于斗罗大陆小说的游戏化过程，熟悉Angular的结构以及使用TypeScript的面向对象开发方法。Github项目源代码地址RPG系统构造ver0.03 2020/04/10人物和其他RPG游戏类似，游戏里面的人物角色大致有这样的一些属性：生命值，魔法值（魂力），攻击力，防御力，速度。RPG游戏中的角色随着等级的提高，这些属性都会提升，属性提升的快慢则取决于资质，同时，由于在实际战斗中，会出现各种增益和光环效果，这些值都是动态变...
TypeScript学习笔记（五）：接口【代码】
使用接口在前面的笔记中我们知道可以使用Object Type来指定参数的属性，如下：1function printLabel(labelledObj: {label: string}) { 2 console.log(labelledObj.label); 3} 45var myObj = {size: 10, label: "Size 10 Object"}; 6 printLabel(myObj);这种做法也可以通过接口实现： 1interface LabelledValue {2 label: string;3}4 5function printLabel(labelledObj: LabelledValue) {6 console.log(labelledObj.label);7}8 9...
从零配置webpack(react+less+typescript+mobx)【代码】
本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config.js文件，内容如下 const path = require(‘path‘);module.exports = {mode: ‘development‘,// 入口 这里应用程序开始执行entry: path.resolve(__dirname, ‘src/index.tsx‘),// 出口 output: {// 输出文件的目标路径...
TypeScript 中的 InterFace【代码】
类型其实很重要 InterFace 在 TypeScript 中很重要的作用之一就是类型命名 可选属性，只读属性 函数类型 ，索引类型，类的类型interface Person{readonly firstName: string, //readonly 表示当前属性为只读属性，不可更改。laseName: string,kids: number, age?: number //属性后加 ？代表可选属性可有可无 }var p: person = {firstName = "Bart",lastName = "Jack",kids = 2 ,age = 38 }//函数类型interface Add...
[TypeScript] Collect Related Strings in a String Enum in TypeScript【代码】
As of TypeScript 2.4, it is now possible to define string enums, or more precisely, enums with string members. Just like any other numeric enum, string enums can be made constant using the const modifier so that they disappear entirely from the generated JavaScript; in this case, all enum values will be inlined into the output. For example,we have the code:fetch("https://swapi.co/api/people/1/", ...
typescript
## 写在前面注：以下 TypeScript 简写为 ts。2018 年 Vue 3.0 用 ts 重写，你多少能嗅到一些行业的变化，变化的本质是对工程上成本和收益的思考。2.0 选用 Flow 进行静态代码检查，3.0 直接使用 ts 重写，Flow 的投入显然能 cover 其本身带来成本。ts 相对于 Flow 在成本方面是较高的，毕竟 ts 是一门语言而 Flow 只是个工具，在收益方面 ts 带来的是整个编程体验的提升，搭配 VSCode 可以做更多的智能提示和校验。Angular 也从 2....
typescript就这回事【代码】
本文讲解typescript语法由于js语法本身的混乱，再加上目前框架的割据，导致typescript用起来没有一致性，本文尽量总结实际开发中可能会用到的知识点目录数据类型类型断言duck typing函数类型的验证索引验证类验证接口扩展泛型与第三方库一起使用命名空间react组件属性验证数据类型Boolean 布尔类型 let isDone: boolean =false; Number 数字类型 let num: number =5; String 字符串类型 let str: string =‘aa‘; Array 数组 let l...
VSCode配置TypeScript
网上教程一堆，记录下我认为的关键点：1.创建tsconfig.json，使用命令行在项目文件夹下输入“tsc --init”即可；2.创建tasks.json，在VSCode中，使用ctrl+shift+p打开命令板，然后输入configure task Runner，按回车选择typescript-tsconfig.json即可；3.执行tasks.json的命令，即把.ts编译为.js文件，按ctrl+shift+b可以执行该命令，如果报错，可以重启VSCode试试；原文：http://www.cnblogs.com/hammerc/p/7413228.html
TypeScript 学习笔记-类
接口继承类接口拥有类的全部属性及方法，但不提供实现，对于private和protected声明的成员，只能被该类自身或其子类继承派生类必须调用super()来执行基类的构造函数TypeScript里成员默认声明为publicprivate声明的成员不能再类的外部访问protected声明的成员子类中可以访问构造函数上也能声明protected，但是该类只能被其子类实例化类的参数可以被声明为readonly，readonly声明的属性必须在声明时或在构造函数里被初始化类的构造函...
TypeScript + React + Redux 实战简单天气APP全套完整项目
目录： 下载链接：百度网盘从面向过程的js到面向对象的js，让web前端更加高大尚。让你的前端步步日上，紧跟技术发展的前沿。让你构建更加复杂的应用，不只是web，App照样搞定。跟后台开发人员一较高下。巅峰对决。适用人群：js前端工程师，web前端设计师，typescript技术人员课程简介：TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编...
TypeScript 命名空间-Namespace【代码】
TypeScript 通过 tsc 编译成 JavaScript 时，用的是 var 全局变量，var 用多了会造成全局变量污染，为了解决这个问题，使用命名空间。# 生成 package.json 文件 npm init -y # 生成 tsconfig.json文件 tsc -init 命名空间namespace Home {class Header {constructor() {const elem = document.createElement("div");elem.innerText = "This is Header";document.body.appendChild(elem);}}class Content {constructor() {const ele...
TypeScript学习笔记（六）：泛型【代码】
认识泛型TypeScript也实现了类型于C#和Java的泛型以实现类型的参数化，我们先看一个需求：1function identity(arg: any): any { 2return arg; 3 }我们希望方法identity可以传入任意类型，并且返回传入的类型，这样写可以达到效果但是不能确定返回的类型，使用泛型的写法如下：1function identity<T>(arg: T): T { 2return arg; 3} 45var output = identity<string>("myString"); // type of output will be ‘string‘6var output...
typescript 类 -- 学习笔记三【代码】
typescript 类 -- 学习笔记三 class Point {public x: numberpublic y: numberconstructor(x: number, y: number) {this.x = xthis.y = y}public getPosition() {return `${this.x} ${this.y}`} }const point = new Point(1, 2)class Parent {public name: stringconstructor(name: string) {this.name = name} }class Child extends Parent {constructor(name: string) {super(name)} }// public 公共// private 私有的// protect...