TypeScript入门-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

TypeScript入门

简介: TypeScript入门
+关注继续查看
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅998元/3年,立即抢购>>>:9i0i.cn/aliyun

福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

简介

  1. 微软开发
  2. Javascript超集
  3. 遵循ES6

Google 使用 TypeScript 开发了 Angular2框架


运行环境

概念,语法,特性


ES5、ES6 是TypeScript规范

TypeScript 是JavaScript 超集


TypeScript - compiler -> JavaScript


在线compiler

http://www.typescriptlang.org/index.html


安装开发环境

# 确保npm已安装
npm --version
6.9.0

# 安装
npm install -g typescript

# 查看版本
tsc --version
Version 3.7.4

# 编译
tsc demo.ts

demo.ts

exports class Demo{}

转换后的代码

"use strict";
exports.__esModule = true;
var Demo = /** @class */ (function () {
    function Demo() {
    }
    return Demo;
}());
exports.Demo = Demo;

使用IDE WebStrom 配置保存编译

1、打开 WebStrom -> Preferences -> Languages & Frameworks -> TypeScript

2、设置 Node interpreter 和 TypeScript

3、勾选 Recompile on changes


特性

字符串特性

1、多行字符串

var name = `
first line
second line
`

2、字符串模板

var name = `hello ${name} ${getName()}`

3、自动拆分字符串

function test(template, name, age){
}

var name = 'Tom',

var getAge = function(){
    return 18
}

test`my name is ${name} i'm ${age}`
//相当于 test(["my name is ", " i'm ", ""], name, age)

4、指定类型

// 指定变量类型
var woname: string = "Tom";

var alias: any = '12';

var age: number = 12;

var man: boolean = true;

// 定义类中元素类型
class Person {
    name: string;
    age: number;
}

var person = new Person();
person.name = "Jack";
person.age = 23;
console.log(person);

5、函数参数

// 指定函数参数和返回值类型
function test(name: string): void {

}

// 设置默认参数, 要声明到最后
function test2(name: string = 'default'): void {

}

// 设置可选参数,要声明明到必选参数之后
function test3(age?: number, name: string = 'default'): void {

}

test2('demo')
test3()

// 任意数量参数
function test4(...args) {
    args.forEach(arg => {
        console.log(arg);
    })
}

test4(1, 2, 3)

// 解包数组ts不支持
function test5(a, b, c) {
}

var args = [1, 2, 3]
test5(...args)

6、generator函数

// generator函数,手工控制程序执行 ts不支持
// babeljs: https://www.babeljs.cn/repl
function* test6() {
    yield;
    console.log("log");
}
test6().next()

function* getStock(num: number) {
    let count = 0
    while (true) {
        yield Math.random()
        if (count > num) {
            break
        }
    }
}

console.log(getStock().next().value)

7、析构表达式

// 对象析构表达式, 可以取别名, 获取嵌套表达式内容,可以有多余的值
const { name1: name2, age1: { age2 } } = {
    name1: "Tom",
    age1: { age2: 23 },
}
console.log(name2, age2);

// 数组析构表达式,位置取
var [a, b, ...others] = [1, 2, 3, 4];
console.log(a, b, others);
// 1 2 [ 3, 4 ]

8、箭头函数

// 箭头函数匿名表达式, 消除this带来的问题
var sum = (arg1, arg2) => { arg1 + arg2 };

console.log([1, 2, 3, 4].filter(value => value % 2 == 0));
// [ 2, 4 ]

9、循环

// forEach 循环
var list = [1, 2, 3];

list.forEach(value => {
    console.log(value);
});

// for-in循环打印下标
for (let index in list) {
    console.log(index);
}

// for-of循环打印值
for (let value of list) {
    console.log(value);
}

// 打印字符串
// for (let s of 'munber') {
//     console.log(s);
// }

10、面向对象

// class是TS和核心
class Student {
    // 访问控制符,默认
    public name;

    // 外部不能访问,只能在内部访问
    private age;

    // 内部和子类访问,外部不能访问
    protected sex;

    // 构造函数,实例化时候被调用, 可以申明属性
    constructor(public school: string) {
        console.log("constructor");

    }

    eat() {
        console.log("eat");

    }
}

// 实例化
let s1 = new Student('school');
s1.name = 'Tom';
console.log(s1.school);

s1.eat();

11、类的继承

class LittleStudent extends Student {
    // 子类自己的数据
    code: string;

    constructor(code: string) {
        // 必须要调用父类构造函数
        super('school');
        this.code = code;
        console.log("LittleStudent");

    }

    work() {
        // 调用父类的方法
        super.eat();
        this.eat();
    }
}

let ls1 = new LittleStudent('LittleStudent');
ls1.eat();
ls1.work();

12、泛型

// 泛型 只能放某个类型元素
let intList: Array<number> = [];
intList.push(1);
// intList.push('2'); 报错

13、接口

// 接口 代码约定
interface IHuman {
    name: string;
    age: number;
}


class HumanImpl implements IHuman {
    // 实现接口的内容
    name: string;
    age: number;

    constructor(public config: IHuman) {

    }

}

new HumanImpl({ name: 't', age: 12 });

14、模块,重用单元

a.ts

// 不对外暴露
var var0;

function func0() {

}

class Clazz0 {

}

// 对外暴露
export var var1;

export function func1() {

}

export class Clazz1 {

}

b.ts


// 导入其他模块对外暴露的内容
import { var1, func1, Clazz1 } from './a';

console.log(var1);

func1()

new Clazz1()

15、注解

说明信息,与业务逻辑无关

16、类型定义文件

类型定义文件 *.d.ts 使用已有的工具包,如JQuery

github 工具 typings

17、总结

基本概念和优势

开发环境

语法特性

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
7428 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8268 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5534 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9513 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2245 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
17375 0
1429
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载


http://www.vxiaotou.com