资讯专栏INFORMATION COLUMN

TypeScript入门教程

Dr_Noooo / 3165人阅读

摘要:现在,出现了更多本身支持或者通过插件支持语法智能提示纠错甚至是内置编译器的文本编辑器和。

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((param).length)
        return (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(length: number,value: T):Array{
    let array: Array = [];
    for(let i=0;i(2,"hello world");
useGeneric(100,1);
装饰器(注解)

装饰器是特殊类型的声明,可以被附加到类声明、方法、访问符、属性或参数上,具体文档:
https://www.tslang.cn/docs/ha...

装饰器并未成为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/k...

自己编写声明文件
declare module “name”;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107727.html

相关文章

  • TypeScript极速完全入门-3ts结合react进行项目开发

    摘要:前面我们已经说了大部分的核心内容,接下来我们就说说如何用开发实际项目。因为和结合很紧密,资料也很多,而且我会找机会专门说下这方面的知识,所以我们将重点放到如何用结合上来。所以前面打牢基础,现在我们开始实际组建工作流。 前面我们已经说了大部分typescript的核心内容,接下来我们就说说如何用typescript开发实际项目。 因为angular和typescript结合很紧密,资料也...

    arashicage 评论0 收藏0
  • 中文代码示例之5分钟入门TypeScript

    摘要:中文编程知乎专栏原文官方文档起的这个噱头名字虽然光看完文章就不止分钟走完整个文档流水账如下代码编辑器用的是源码在第一个程序问好那谁吃了么那谁路人打酱油的问好路人运行问好编译生成问好文件添加参数类型问好那谁吃了么那谁如果那谁的类型不符比如中文编程知乎专栏原文 Typescript官方文档起的这个噱头名字: TypeScript in 5 minutes, 虽然光看完文章就不止5分钟...走完整...

    番茄西红柿 评论0 收藏0
  • TypeScript入门-基本类型

    摘要:基本类型在中,提供了一下基本数据类型布尔类型数据类型字符串类型数组类型元组类型枚举类型任意值类型和类型类型其中元组枚举任意值类型和类型是有别与的特有类型。布尔类型布尔类型是最简单的数据类型,只有和两种值。 学习Angular 2 , 《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音,这意味着掌握 TypeScript 语音将更...

    _ipo 评论0 收藏0
  • 前端周刊第59期:选 Flow 还是 TypeScript

    摘要:周末是时隔两月的家人团聚,而每次内容的准备平均需要我集中精力工作小时,所以第期的内容今早才准备好,对不住大家了。下面是本周精选内容,请享用。本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009742537?w=1240&h=509); 周末是时隔两月的家人团聚,而...

    Julylovin 评论0 收藏0
  • 平时积累的前端资源,持续更新中。。。

    本文收集学习过程中使用到的资源。 持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端 微信公众号 小程序 webpack GraphQL 性能与监控 高质文章 趋势 动效 数据结构与算法 js core 代码规范...

    acrazing 评论0 收藏0

发表评论

0条评论

Dr_Noooo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<