TypeScript入门教程
TypeScript是什么
- TypeScript是JavaScript的一个超集
- TypeScript需要编译为JavaScript才能运行(语法糖)
- TypeScript提供了类型系统,规范类似Java
- TypeScript提供了ES6的支持,也可以支持部分ES7草案的特性,不用担心TypeScript无法兼容目前主流的JavaScript解释器
环境安装
- 安装node.js
https://nodejs.org/en/download/ - 安装TypeScript包,这就是TS的编译器
npm install -g typescript - 检查TypeScript是否安装成功
tsc -v
TypeScript开发工具
TypeScript是开源的项目,由微软开发和维护,因此最初只有微软的 Visual Studio 支持。现在,出现了更多本身支持或者通过插件支持 TypeScript 语法、智能提示、纠错、甚至是内置编译器的文本编辑器和IDE。
- Visual Studio Code,微软出品,内置支持TypeScript特性
- Sublime Text的官方插件
- WebStorm的最新版本内置支持
类型系统
原始数据类型
主类型:
string、number、boolean
特殊类型:
null、undefined、symbol(ES6)
基础类型声明与使用:
string:let name: string = ‘Alice’;let desc: string = `my name is ${name}`;
number:let norm: number = 666;let binaryNum: number = 0b111;let hexNum: number = 0xfff;let octalNum: number = 0o17;let nan: number = NaN;let infinity: number = Infinity;
boolean:let yet: boolean = true;let flag: boolean = Boolean(0);
null:let n: null = null;
undefined:let u: undefined = undefined;
symbol:let s: Symbol = Symbol(2);
void:let v2: void = null;let v5: void = undefined;
任意值类型
```let name: string = ‘Tom’;name = 666;demo.ts(2,1): error TS2322: Type '666' is not assignable to type 'string'.
```
使用any类型:
```let name: any = ‘Tom’;name = 666;
```
隐式任意值类型:let name;name = ‘Tom’;name = 666;等价于:let name : any; name = ‘Tom’;name = 666;
类型推论
TS会在没有明确指定类型的时候推测出一个类型,这就是类型推论
let user = ‘Tom’;
user = 666;demo.ts(2,1): error TS2322: Type '666' is not assignable to type 'string'.
联合类型
TS中的联合类型表示取值可为多种类型中的一种:
let user: string | number;
user = 666;
user = ‘Tom’;
访问联合类型的属性或方法时,只能访问所有类型的共有方法:
function test(param: string|number){
return param.length;
}demo.ts(2,18): error TS2339: Property 'length' does not exist on type 'string | number’.
类型断言
类型断言可以手动指定一个值的类型,但是类型断言不是强制类型转换,TypeScript编译器不支持强制类型转换。
function test(param: number|string){if((<string>param).length)return (<string>param).length;else return param.toString().length
}
对象的类型—接口
interface Sport {name: string,teamwork: boolean
}let football: Sport = {name: 'soccer',teamwork: true
}
可选属性:
interface Sport {name: string,teamwork: boolean,needPg?: boolean
}let football: Sport = {name: 'soccer',teamwork: true
}
任意属性:
interface Sport {name: string,teamwork: boolean, needPg?: boolean,[other: string]: any
}let football: Sport = {name: 'soccer',teamwork: true,needPg: true,count: 22
}
一旦定义任意属性,那么确定属性和可选属性的类型必须是它的子属性
只读属性:
interface Sport {readonly name: string,teamwork: boolean}let football: Sport = {name: 'soccer',teamwork: true
}
函数的类型
函数声明
function avg(x: number,y:number):number{
return (x+y)/2;
}
函数表达式
let avg = function(x:number,y:number):number{
return (x+y)/2;
}
or
let avg: (x:number,y:number) => number = function(x:number,y:number):number{
return (x+y)/2;
}
函数可选参数:
function avg(x: number,y?:number):number{
if(y){return (x+y)/2;
}else{
return x;
}
}
可选参数必须在必选参数的后面
函数的可选参数与默认值:
function avg(y:number = 10,x: number):number{
if(y){return (x+y)/2;
}else{
return x;
}
}
TypeScript会将添加默认值的参数识别为可选参数,此时不受“可选参数必须在必选参数的后面”的限制
函数重载:
TypeScript中通过为一个函数进行多次函数定义,并实现函数完成重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: any):any{
if(typeof x == ‘number’){return Number(x.toString().split(‘’).reverse().join(‘’));
}else{
return x.split(‘’).reverse().join(‘’);
}
}
面向对象的函数重载:
interface A{say(x:number);say(x:string);
}class AA implements A{say (x:any){if(typeof x == ‘string’)console.log(‘string’,x);else
console.log(‘number’,x);}
}
console.log((new AA()).say(1));
console.log((new AA()).say('123'));
字符串字面量类型
该类型约束值只能是某几个字符串的一个,这是在编译器层面做的约束,并不会改变生成的js代码
type Name = 'abc' | 'def' | 'mn';
function demo(e: Name): void{console.log(e);
}
demo(‘abc');
TypeScript与面向对象
类
class Block {private hash: string;private prevHash: string;private nonce: number;constructor (hash: string, prevHash: string, nonce = 0){this.hash = hash;this.prevHash = prevHash;this.nonce = nonce;}public get $hash(): string {return this.hash;}public set $hash(value: string) {this.hash = value;}public get $prevHash(): string {return this.prevHash;}public set $prevHash(value: string) {this.prevHash = value;}public get $nonce(): number {return this.nonce;}public set $nonce(value: number) {this.nonce = value;}public computeHash(){let sha256 = crypto.createHash('sha256');sha256.update(`${this.prevHash}${this.nonce.toString(16)}`,'utf8');let hash = sha256.digest('hex');return hash;}
}
抽象类
TypeScript中抽象类不允许被实例化
abstract class BtcBlock {public abstract computeHash(x:string):string;
}
class Block extends BtcBlock {public computeHash(x:string):string{return `btc${x}`;};
}
接口
上节已提到,TS中的接口就是抽象多个类的共有属性与方法,作为对象的类型而存在
interface Alarm {alert(): void;
}
interface Light {lightOn(): void;lightOff(): void;
}
class Auto implements Alarm, Light {alert(){console.log('car alart');}lightOn(){console.log('car light on');}lightOff(){console.log('car light off');}
}
泛型
即在定义类、函数或接口时不指定具体类型,而在使用时指定类型的特性。
function useGeneric<T>(length: number,value: T):Array<T>{let array: Array<T> = [];for(let i=0;i<length;i++){array.push(value);}return array;
}
useGeneric<string>(2,'hello world');
useGeneric<number>(100,1);
装饰器(注解)
装饰器是特殊类型的声明,可以被附加到类声明、方法、访问符、属性或参数上,具体文档:
https://www.tslang.cn/docs/handbook/decorators.html
装饰器并未成为ES7的规范,因此未来可能会发生改变,并不推荐大家在线上项目中使用
装饰器之方法装饰器
function enumerable(value: boolean) {return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {descriptor.enumerable = value;};
}class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}@enumerable(false)greet() {return "Hello, " + this.greeting;}
}
TypeScript与JavaScript生态
描述非TypeScript编写的类库的类型,需要声明类库所暴露出的API,类似于C的头文件,在TypeScript中文件类型则为 .d.ts
- 使用TypeScript生态提供的声明文件
npm install @types/node
声明文件列表:
http://npm.vdian.net/browse/keyword/@types - 自己编写声明文件
declare module “name”;
转载于:https://www.cnblogs.com/accordion/p/8973209.html
TypeScript入门教程相关推荐
- 我写的第一本书《TypeScript 入门教程》
阅读原文 持续了大半年的学习和写作,在今天终于告一段落了. 写书之旅 最初有写书的想法,是刚加入微软的时候. 由于工作中需要重度使用 TypeScript,所以我花了几天的时间研读了好几遍官方手册和中 ...
- TypeScript入门教程 之 classes-emit
TypeScript入门教程 之 classes-emit What's up with the IIFE 为该类生成的js可能是: function Point(x, y) {this.x = x; ...
- TypeScript入门教程 之 箭头函数
TypeScript入门教程 之 箭头函数 亲切地称为粗箭头(因为->是细箭头并且=>是粗箭头),也被称为lambda函数(由于其他语言).另一个常用功能是胖箭头功能()=>some ...
- TypeScript入门教程 之 类/抽象类/构造器/Getter/Setter
TypeScript入门教程 之 类/抽象类/构造器/Getter/Setter 将JavaScript中的类作为头等项很重要的原因是: 类提供了有用的结构抽象 为开发人员提供一种一致的方式来使用类, ...
- TypeScript入门教程 之 const
TypeScript入门教程 之 const const是ES6 / TypeScript提供的非常受欢迎的功能.它使您可以与变量保持不变.从文档以及运行时的角度来看,这都是很好的.要使用const只 ...
- TypeScript入门教程 之 解构
TypeScript入门教程 之 解构 TypeScript支持以下形式的解构(以解构的名义命名,即分解结构): 对象分解 阵列解构 人们很容易将解构视为结构的逆.JavaScript中的结构化方法是 ...
- TypeScript入门教程 之 枚举 Enums
TypeScript入门教程 之 枚举 Enums 枚举是一种组织相关值集合的方法.许多其他编程语言(C / C#/ Java)具有enum数据类型,而JavaScript没有.但是,TypeScri ...
- TypeScript入门教程 之 for ... of 与 for ... in
TypeScript入门教程 之 for ... of 与 for ... in 新手JavaScript开发人员经常遇到的错误是,for...in数组不会遍历数组项.相反,它迭代传入的对象的键.下面 ...
- TypeScript入门教程 之 生成器函数
TypeScript入门教程 之 生成器函数 生成器函数 function *是用于创建生成器函数的语法.调用generator函数将返回一个generator对象.发电机对象如下刚刚所述迭代器接口( ...
- 原创 TypeScript入门教程 之 迭代器
原创 TypeScript入门教程 之 迭代器 Iterator Iterator本身不是TypeScript或ES6功能,Iterator是面向对象的编程语言所通用的行为设计模式.通常,它是一个实现 ...
最新文章
- ASP.NET 2.0 AJAX中Webservice调用方法示例
- 在线报名竞赛网站java源码_我用Java写出了一个QQ!可在线聊天(附源码)~
- CCF 2019年题目题解 - Python
- tensorboard ckpt pb 模型的输出节点_tensorflow, ckpt 转 pb 并进行预测
- 关于ngx_trylock_accept_mutex的一些解释
- 大括号之谜:C++的列表初始化语法解析
- opencv 图像 抠图 算法_图像抠图算法学习 - Shared Sampling for Real-Time Alpha Matting
- 各层电子数排布规则_干货 | 高中化学电子排布、第一电离能和电负性知识汇总...
- PostgreSQL 配置内存参数
- python列表去重_python 字典列表/列表套字典 去重重复的字典数据
- mysql主从 副本集,MongoDB的主从、副本集模式
- atitit.javascript调用java in swt attilax 总结
- iphone数据传输已取消怎么办_消失的3.5mm接口:厂商真好心取消3.5mm接口?其实大家全都是韭菜...
- rabbitMQ windows 下安装
- Win10下载的文件如何解除锁定?Win10系统解除锁定下载的文件方法
- Scratch(三十五):FlyBird
- sendto函数深入理解
- 了解卡尔曼滤波器2--最优状态估计
- 11g OCM 考试感悟
- 微型计算机使用的键盘shift,微型计算机使用的键盘中,shift键称为什么
热门文章
- python根据关键词下载图片_python批量下载PPT图片,看完本代码你也会批量下载图片...
- 区间dp讲解之石子合并问题 区间dp的分析方法
- nyoj1140鸡蛋栈(怒切一水)
- jquery name选择器_【百战程序员从开始到植发】之jquery
- 【POJ2826】An Easy Problem?!(线段相交+分情况讨论+精度)
- 职高计算机专业小白可以读吗,「高考从小白到精通」报考计算机类专业是否是一个正确的选择?...
- 发的楷体怎么写_小学生硬笔书法怎么练
- 极客大学产品经理训练营 产品思维和产品意识(上) 第3课总结
- 西南大学计算机应用基础作业答案2020,2018秋【西南大学】[0483]《计算机应用基础》作业(资料)...
- 177.第N高的薪水