TYPESCRIPT - 技术教程文章
typescript 为什么使用 let呢【图】
为什么是使用let呢 因为已经厌烦了 int var 呵呵 原文：http://www.cnblogs.com/ganmk--jy/p/5877308.html
Typescript 实战 --- （8）高级类型【代码】【图】
1、交叉类型 将多个类型合并成一个类型，新的类型将具有所有类型的特性，适用于对象混用 语法：类型1 & 类型2 & 类型3interface CatInterface {run(): void }interface DogInterface {jump(): void }// 交叉类型具有所有类型的特性 let pet: CatInterface & DogInterface = {run() {},jump() {} } 2、联合类型 声明的类型并不确定，可以为多个类型中的一个。用竖线（|）分隔每个类型，所以number | string | boolean表示一个值可以...
TypeScript实现井字棋小游戏【代码】
HTML部分:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>Tic Tac Toe</title><link rel="stylesheet" href="style.css"/></head><body><h1>Tic Tac Toe</h1><div class="container"><!-- 游戏面板（棋盘） --><div id="bord" class="game-board x"><div class="row"><div ...
数据结构-栈<Typescript>【代码】【图】
栈什么是栈栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。咖啡厅内的一摞盘子是现实世界中常见的栈的例子。只能从最上面取盘子，盘子洗净后，也只能摞在这一摞盘子的最上面。栈被称为一种后入先出（LIFO，last-in-first-out）的数据结构。由于栈具有后入先出的特点，所以任何不在栈顶的元素都无法访问。为了得到栈底的元素，必须先拿掉上面的元素。对栈的两种主要操作是将一个元素压入栈和将一个元素弹出...
typescript-koa-postgresql 实现一个简单的rest风格服务器 —— typescript 开发环境配置【代码】【图】
最近需要用 nodeJS 写一个后台程序，为了能够获得 IDE 的更多代码提示，决定用 typescript 来编写，随便也学习下 ts，在这记录下实现过程。1、新建文件夹 typescript-koa-postgresql，初始化项目yarn init -y2、安装 typescriptyarn add typescript @types/node --dev3、配置 typescript 编译环境，在项目根目录下新建文件 tsconfig.json 1{2 "compilerOptions": {3 "target": "es2017",4 "outDir": "./dist",5 "m...
获取TypeScript的声明文件.d.ts【代码】
一、TypeScript的声明文件就像C/C++用.h文件。当使用TypeScript调用其他已经编写好的类库时，可以提供IntelliSense智能提示。二、使用npm指令来获取.d.ts文件install -save @types/jquery -g 运行后在type/jquery目录下生成4个文件：index.d.ts,lincense,package.json,readme.md,其中的index.d.ts即为jquery的声明文件。三、npm需要Nodejs环境，安装步骤如下1.从https://nodejs.org/en/下载windows安装包2.安装Node,js3.安装完成后...
关于TypeScript命名空间【代码】
TypeScript 命名空间命名空间一个最明确的目的就是解决重名问题假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标...
TypeScript的配置文件 tsconfig.json【代码】
//tsconfig.json指定了用来编译这个项目的根文件和编译选项 {"compilerOptions": { //compilerOptions:编译选项,可以被忽略，这时编译器会使用默认值"allowSyntheticDefaultImports": true,//允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。"baseUrl": "./src",//解析非相对模块名的基准目录"emitDecoratorMetadata": true, //给源码里的装饰器声明加上设计类型元数据"experimentalD...
webpack+typescript【代码】
1.npm install --save typescript2.npm install --save ts-loaderwebpack.config.jsmodule.exports = { entry: ‘./app.ts‘,output: {filename: ‘bundle.js‘},resolve: {extensions: [‘‘, ‘.webpack.js‘, ‘.web.js‘, ‘.ts‘, ‘.js‘]},module: {loaders: [{ test: /\.ts$/, loader: ‘ts-loader‘ }]} } 原文：http://www.cnblogs.com/bldf/p/6387521.html
typeScript-类型推论【代码】
类型推论如果没有指定类型，那么typeScript会依照类型推论去推断一个类型什么是类型推论以下代码，虽然没有指定类型，但是会在编译的时候报错let myFavoriteNum = ‘seven‘ myFavoriteNum = 7 // ERROR in ) // TS2322: Type ‘number‘ is not assignable to type ‘string‘. 事实上，它等价于let myFavoriteNumber: string = ‘seven‘; myFavoriteNumber = 7; // TS2322: Type ‘number‘ is not assignable to type ‘...
TypeScript躬行记（4）——泛型【代码】
泛型是程序设计语言中的一种风格或范式，相当于类型模板，允许在声明类、接口或函数等成员时忽略类型，而在未来使用时再指定类型，其主要目的是为它们提供有意义的约束，提升代码的可重用性。一、泛型参数 当一个函数需要能处理多种类型的参数和返回值，并且还得约束它们之间的关系（例如类型要相同）时，就可以采用泛型的语法，如下所示。function send<T>(data: T): T {return data; } 函数名称后面跟了<T>，其中把T称为泛...
typescript 引入 lodash 正确姿势【代码】
1、安装依赖yarn add lodash --save yarn add @types/lodash --save-dev 2、引入lodashimport * as _ from ‘lodash‘ 3、使用_.cloneDeep(json) 原文：https://www.cnblogs.com/mengfangui/p/12165615.html
TypeScript——基础——原始数据类型【代码】
前言：JavaScript原始数据类型主要分为布尔值、数值、字符串、nul、undefined和ES6中的新类型Symbol和BigIntTypeScript中原始数据类型的应用一、布尔值（boolean）let isDone : boolean = false ;二、数值（number）let decLiteral: number = 6; let hexLiteral: number = 0xf00d; let binaryLiteral: number = 0b1010;//ES6 中的二进制表示法 let octalLiteral: number = 0o744;//ES6 中的八进制表示法 let notANumber: number = ...
TypeScript 命名空间【代码】
多个命名空间的引用components.tsnamespace Components{export interface User{name: string}export class Header {constructor() {const elem = document.createElement(‘div‘);elem.innerText = ‘This is Header‘;document.body.appendChild(elem);}}export class Content {constructor() {const elem = document.createElement(‘div‘);elem.innerText = ‘This is Content‘;document.body.appendChild(elem);}}export cl...
typescript高级编程(二)【代码】
类型限制在数组里面写函数export interface Plugin {extraReducers?: () => {[name: string]: (stare: any, ...payload: any) => void} }const plugins: Plugin[] = [{extraReducers() {return {reducers1(state: any, payload: any) {},};},},{extraReducers() {return {reducers2(state: any, payload: any) {},};},}, ]; interface ExtraTwo {a: () => number }let b: ExtraTwo[] = [{a() {return 1;}},{a() {return 2;}} ]; fo...
React 脚手架支持Typescript和Sass【图】
首先，创建React工程目录，以及选择Typescript版本进入在my-app目录，安装node-sass然后再安装webpack的sass-loader 接下来进入node_modules --> react-scripts --> config,打开webpack.config.js文件： 找到 "file-loader"后，添加".scss"文件的配置，如下图红线框中的信息: 最后，将src目录下的css改成scss文件： 运行 yarn start 原文：https://www.cnblogs.com/JunXiao/p/11688637.html
TypeScript 函数-函数类型【代码】
//指定参数类型 function add(x:number,y:number){console.log("x:"+x);// reutrn(x+y); } //指定函数类型 function add0(x:number,y:number):string{ // return((x+y).toString());//1return((x+y)+"");//2 均可 } //匿名函数 let aa = function(x:number,y:string):string{return "hello"; } //指明参数的意义 n代表name a待变age let myadds:(name:string,age:number)=>number =function(n:string,a:number):number{return a;...
1 typescript 使用【代码】
typescript是JavaScript的超集，由微软开发1 使用typescript下载：npm i typescript -g单个ts文件的转换命令行运行tsc ./src/index.ts复杂ts引用情况1 tsc --init 生成tsconfig.js，即ts配置文件 2 在配置文件中设置outDir导出文件夹，设置mode为amd 3 编辑tsconfig 4 终端-运行任务-开启ts监视模块 5 使用amd的require.js将入口文件main.js加载进来a.tsexport default class Box{constructor(){}run(){console.log("aaa")} } expo...
TypeScript 中的方法重载【代码】【图】
方法重载（overload）在传统的静态类型语言中是很常见的。JavaScript 作为动态语言， 是没有重载这一说的。一是它的参数没有类型的区分，二是对参数个数也没有检查。虽然语言层面无法自动进行重载，但借助其动态的特性，我们可以在代码中手动检查入参的类型，或者通过 arguments 获取到参数个数，从而实现根据不同的入参做不同的操作。比如有一个获取聊天消息的方法，根据传入的参数从数组中查找数据。如果入参为数字，则认为是 id...
05-TypeScript中的方法新功能（下）【代码】
再TypeScript中，方法还有一些新功能能够让我们更好的控制方法执行。1.Generator方法：yield关键字用于控制方法在执行的时候暂停住，后续方法调用方又可以从暂停的地方继续执行，这种具有yield关键字的并标记为*的方法叫Generator方法。function* dosomething(){console.log("starting");// 执行到这里，会暂停住 yield ;console.log("finished"); }var func1=dosomething(); // 初始调用,执行到yield暂停住func1.next(); //继续...
JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)【代码】
多态（Polymorphism）按字面的意思就是“多种状态”，同样的行为（方法）在不同对象上有不同的状态。 在OOP中很多地方都要用到多态的特性，比如同样是点击鼠标右键，点击快捷方式、点击桌面空白处、点击任务栏等弹出的菜单都是不同的。方法重写（override）: 即子类定义一个与父类名字相同的方法，以此覆盖父类方法，以此来实现不同的功能。 1function Animal(){}2var AnimalP = Animal.prototype;3 AnimalP.eat = funct...
什么是TypeScript
from wikepediaTypeScript是一门由微软维护和开发的编程语言，免费并且开源。它是JavaScript的超集，添加了静态类型和基于class的面向对象编程。TypeScript是为了大型项目的开发而设计的并被转译成JavaScript。因为TypeScript是JavaScript的一个超集，任何已经存在的JavaScript程序同时也是合法的TypeScript程序。TypeScript支持头文件，这些头文件可以包含已有的JavaScript类库的类型信息，这样，其他程序引用这些头文件的时候，就...
TypeScript 简介【代码】【图】
原文链接： http://www.oschina.net/question/12_72250你是否听过 TypeScript？ TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。 为什么会有 TypeScript? JavaScript 只是一个脚本语言，...
Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
概述Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候，发现如果使用systemjs+rollup，只能打包成一个文件，然后lazy loading就没法搞了。因此我使用了webpack2，webpack2自带tree shaking，只要将tsconfig中的module设置成es2015就可以， 虽然效果没rollup好，但支持lazy loading。另外， angular2目前不支持typescript 2.1.X，所以如果想在"target": "es5"前提下使用async/await就不行了，但是可...
在TypeScript中使用其他JS框架或库的方法【代码】
最近刚刚接触TypeScript，感觉非常强大，但是也有一些问题。比如我们正常写js时，只要把其他js库引入页面，甚至于只要加入到项目中，ReSharper就会自动分析他，并提供语法只能感知，写代码很舒服。但是由于TypeScript是强类型语言，他不允许其他未知的js库在当前使用，因为没有办法做编译检测，所以如何在ts中使用其他js库就成了一个问题。查了下有以下几种方法：1、使用declare关键字declarevar $: any; declarevar jQuery: any; ...
TypeScript之调用栈【代码】【图】
class CallStackTool{private static index:number = 0;public static printCallStack (count:number , simple: boolean = true):void {let caller:Function = arguments.callee.caller;let i:number = 0;count = count || 10;CallStackTool.index ++;if( CallStackTool.index > 500 ) CallStackTool.index = 1;console.log(`***-----------------${CallStackTool.index}Start----------------------- **`);while (caller && i <...
TypeScript 中 Optional Chaining 和 Nullish Coalescing【代码】
Optional Chaining 解决的问题是重复且无意义的判空，之所以说无意义，是对业务来说它不是必需的，但不判空，程序直接就挂了，比如：letx=foo.bar.baz(); 这里的访问链路上 foobarbaz 任何一个为 undefined，程序就停止工作。使用 Optional Chaining 修改后：letx=foo?.bar.baz(); 这里 ?. 的句法就是 Optional Chaining，在 TypeScript 3.7 中实现，目前 tc39 提案中处于 Stage 4 阶段。Optional Chaining 在这里表示，如果 foo 是...
typeScript入门（二）函数与类
3.ts的函数1）函数的返回值和参数在函数的定义需要定义其的返回值可以void，来表示没有返回值函数参数的定义，举个例子分析下吧name:string,age?:number=23冒号后面是参数的类型，加个?表示这个参数不是必传的，所以你就可以在这理解到，这个?如果某个参数写了，那后面都是需要加的，因为它不是必传的。在类型后面用个赋值方式就是给这个参数写一个默认参数。当参数很多的时候，你就用需要用三点运算符数组来接受参数。(...arr:any...
TypeScript基本语法
#1---接口interface User { name: string; id: number;}const user: User = { username: "Hayes", id: 0,};#2---类class UserAccount { name: string; id: number; constructor(name: string, id: number) { this.name = name; this.id = id; }}const user: User = new UserAccount("Murphy", 1);#3---函数function getAdminUser(): User { //...}function deleteUser(user: User) { // ...}#4---Composing Types：...
TypeScript（04）： 基础类型【代码】【图】
TypeScript 包含的数据类型如下表:Any 类型任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：let x: any = 1; // 数字类型 x = ‘I am who I am‘; // 字符串类型 x = false; // 布尔类型改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码...