TypeScript简单介绍

1. TypeScript介绍

1.1 初识TypeScript

  1. TypeScript是微软开发的一门编程语言，是JavaScript的一个超集。
  2. TypeScript扩展了JavaScript的语法，添加了一些新的遵循ES6规范的语法，具有基于类的面向对象编程的特性。任何已经存在的JavaScript程序可以不加任何改动的在TypeScript运行环境下运行。
  3. Angular2框架使用TypeScript编写。

1.2 课程内容介绍

  1. 学习TypeScript的好处
  2. 安装TypeScript开发环境
  3. TypeScript概念、语法和特性介绍

2. TypeScript的优势

  1. 支持部分ES6规范
  2. 类型检查
  3. 面向对象的特性

3. 搭建TypeScript开发环境

3.1 在线编译器(compiler)

  1. 编译器将TypeScript代码编译成JavaScript代码。
  2. 在线编译地址
    http://www.typescriptlang.org/play/index.html

3.2 本地编译器(compiler)

  1. 安装步骤
    ① 安装node.js
    ② npm install –g typescript
    ③ 创建Hello.ts
    ④ 书写代码
    ⑤ tsc Hello.ts
    ⑥ 生成Hello.js
  2. Webstorm IDE编辑器
    可自动将.ts文件转换为.js文件

4. 字符串新特性

  1. 多行字符串
    .ts文件
const str = `ab
c`;

.js文件

var str = "ab\nc";
  1. 字符串模板
    .ts文件
var myname = '小明';
var getName = function () {
    return '小李';
};
console.log(`hello ${myname}, 你好 ${getName()}`);

.js文件

var myname = '小明';
var getName = function () {
    return '小李';
};
console.log("hello " + myname + ", \u4F60\u597D " + getName());
  1. 自动拆分字符串
function test(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
};
var myname = '小明';
var getAge = function () {
    return 18;
}
test`hello my name is ${myname}, i'm ${getAge()}`;

形参a对应的实参为["hello my name is ", ", i'm ", ""]
形参b对应的实参为"小明"
形参c对应的实参为18。

5. 参数新特性

5.1 参数类型

  1. 在参数名称后面使用冒号来指定参数的类型
  2. 如何声明类型
var str: string = 'str';
str = 1; //Type '1' is not assignable to type 'string'.

虽然编译检查错误，但是.ts文件生成的.js文件并没有错误。

  1. 类型推断机制
    var str2 = 'str2';
    str2 = 1; //Type '1' is not assignable to type 'string'.
    变量会根据第一次赋值时的类型推断应赋值的类型。
  2. 五中基本类型
    string、number、boolean、any、void
var str:string = 'str';
var strArr: string[] = ['a','b'];
var num:number = 13;
var numArr: Array<number> = [1,2];
var boo: boolean = true;
let array:[string, number];
array = ['hello', 10];
var any:any = 'any';
any = 3; 
function voidFn(): void{
}
  1. 函数参数类型以及返回值类型
function test(num: number): string{
    return "";
};
test(13);
  1. 自定义类型
class Person {
    name: string;
    age: number;
}
var p: Person = new Person();
p.name = 'zhangsan';
p.age = 18;

5.2 参数默认值

  1. 在参数民称后面使用等号来指定参数的默认值
function test(a: string, b: string, c: string = 'z'){
    console.log(a);
    console.log(b);
    console.log(c);
}
test('x', 'y');

注意：有默认值的参数必须声明必选参数之后。

5.3 可选参数

  1. 在方法的参数声明后面用问号来表明此参数为可选参数
function test(a: string, b?: string, c: string = 'z'){
    console.log(a);
    console.log(b);
    console.log(c);
}
test('x');

注意：①函数体中应对可选参数未传的情况做对应处理。②可选参数必须声明在必选参数之后。③有默认值的参数与可选参数的顺序不固定。

6. 函数新特性

6.1 Rest与Spread操作符

  1. 用来声明任意数量的方法参数。
  2. …使用在形参上，将实参转化为数组
    .ts文件
function fn(...args) {
    args.forEach(arg => {
        console.log(arg);
    })
}
fn(1, 2, 3);
fn(5, 6);

.js文件

function fn() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
fn(1, 2, 3);
fn(5, 6);
  1. …使用在实参上
function fn(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var args = [1, 2];
fn(...args);
var args2 = [5, 6, 7];
fn(...args2);

注释：TypeScript还不支持，ES6支持。

6.2 generator函数

  1. 控制函数的执行过程，手动暂停和恢复代码执行。
function* doSomething(){
    console.log('start');
    yield;
    console.log('end');
}
var fn = doSomething();
fn.next(); //start
fn.next(); //end

注释：TypeScript还不支持generator函数，ES6支持。

  1. 示例
function* getStockPrice(stock){
    while(true){
        yield Math.random()*100;
    }
}
var priceGenerator = getStockPrice('IBM');
var limitPrice = 15;
var price = 100;
while(price > limitPrice){
    price = priceGenerator.next().value;
    console.log(`generator return ${price}`);
}
console.log(`buy at ${price}`);

6.3 解构表达式

  1. 通过表达式将对象或数组拆解成任意数量的变量。
  2. 对象的解构赋值
const { a, b: b1, c: {d}} = { a: 1, b: 2 , c: {d:3}};
console.log(a);  //1
console.log(b1); //2 
console.log(d);  //3
  1. 数组的解构赋值
const arr = [1, 2, 3, 4, 5];
const [a, ,c, ...other] = arr;
console.log(a); //1
console.log(c); //3
console.log(other);//[4, 5]
  1. 函数参数的解构赋值
var arr = [1,2,3,4];
function fn([a,,b,...others]){
    console.log(a);//1
    console.log(b);//3
    console.log(others); //[4]
}
fn(arr);

7. 表达式与循环

7.1 箭头表达式

  1. 示例
const arr = [1, 2, 3, 4];
const arr1 = arr.filter(item => item % 2 == 0);
console.log(arr1); //[2, 4]
  1. 用来声明匿名函数，消除传统匿名函数的this指针问题。
function Person(name:string) {
    this.name = name;
    setTimeout(function () {
        console.log(this.name); //空
        console.log(this);  //window对象
    }, 1000);

    setTimeout(() => {
        console.log(this.name); //zhangsan
        console.log(this);      //Person对象
    }, 2000);
}

var p = new Person('zhangsan');

7.2 for…of…循环

  1. forEach循环、for…in…循环与for…of…循环对比
var arr = [1, 2, 3, 4];
arr.des = 'four';
arr.forEach(item => console.log(item)); //1,2,3,4
//优点：不遍历des属性。 缺点：不能使用break语句中断循环
for (let i in arr) {
    console.log(i); //0,1,2,3,des
}
//优点：可以使用break语句中断循环。 缺点：遍历des属性。
for (let i of arr) {
    console.log(i);  //1，2，3，4
}
//优点：不遍历des属性，可以使用break语句中断循环。

注释：every方法可以中断循环。
for…of…循环可以用来遍历Array、Map、Set、String。

8. 面向对象特性

8.1 类

  1. 面向对象特性
    类是TypeScript的核心，使用TypeScript开发时，大部分代码都书写在类中。
  2. 类的声明
    权限修饰符：public(默认)、private、protected
    public修饰或无权限修饰符时，该成员可以在本类以及本类以外被访问。
    Private修饰的成员只能够在本类内被访问。
    Protected修饰的成员只能够在被本类内或其子类被访问。
class Person{
    name;
    public age;
    private sex;
    protected eat() {
        console.log('eat');
    }
}
const p1 = new Person();
p1.name = 'xm';
p1.age = 18;
p1.sex = 'man'; //错误
p1.eat(); //错误
  1. 类的构造函数
class Person{
    name;
    constructor(name:string) {
        this.name = name;
    }
    getName() {
        console.log(this.name);
    }
}
var p1 = new Person('xm');
p1.getName();

等价写法

class Person{
    constructor(public name:string) {
        this.name = name;
    }
    getName() {
        console.log(this.name);
    }
}
  1. 类的继承
    super关键字既可以调用父类的构造函数，又可以调用父类的成员函数。
class Person{
    constructor(private name:string) {
        this.name = name;
    }
    getName() {
        console.log(this.name);
    }
    eat() {
        console.log('eat');
    }
}
class Employee extends Person{
    code: string;
    constructor(name: string, code: string) {
        super(name);
        this.code = code;
    }
    getCode() {
        console.log(this.code)
    }
    work() {
        super.eat();
        this.doWork();
    }
    private doWork() {
        console.log('work');
    }
}
var p1 = new Employee('xm', '001');
p1.getCode();
p1.work();

8.2 泛型

  1. 参数化的类型，一般用来限制集合的内容。
class Person{
    name;
    constructor(name){
        this.name = name;
    }
}
class Employee extends Person{}

const persons: Array<Person> = [];

persons[0] = new Person('xm');
persons[1] = new Employee('xl');
persons[2] = 2;

8.3 接口

  1. 用来建立某种代码约定，使其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定。
  2. 接口作为方法参数的类型声明
interface IPerson{
    name: string;
    age: number;
}
class Person{
    constructor(public config: IPerson) {
    }
}
const p = new Person({
    name: 'zs',
    age: 18
});
  1. 类实现接口
interface Animal{
    eat();
}
class Sheep implements Animal{
    eat() {
        console.log('grass');
    }
}

8.4 模块(Module)

  1. 模块可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源(类、方法、变量)暴露出去供外部使用，哪些资源只在模块内部使用。
    注释：一个文件就是一个模块。
  2. import与export
    a.ts文件
const a = 1;
const fn =()=>{};
class Person{};
export {a,fn,Person}

b.ts文件

import {a, fn, Person} from "./a";
console.log(a);
fn();
new Person();

8.5 注解(annotation)

  1. 注解为程序的元素(类、方法、变量) 加上更直观明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用。

8.6 类型定义文件(*.d.ts)

  1. 类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript工具包。如：Jquery。

9. 课程总结

  1. 基本概念以及优势、开发环境搭建、语法和特性。
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,240评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,328评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,182评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,121评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,135评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,093评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,013评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,854评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,295评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,398评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,989评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352

推荐阅读更多精彩内容