TypeScript入门

一、 TypeScript 介绍

• Typescript是由微软开发的一款开源的编程语言
• Typescript是Javascript的超集，遵循最新的ES5/ES6规范。TypeScript扩展了Javascript语法
• TypeScript更像后端Java、C#这样的面向对象语言可以让JS开发大型企业应用
• 谷歌也在大力支持TypeScript,谷歌的Angular2就是基于 TypeScript语法的
• 最新的Vue、React也可以集成Typescript.

二、TypeScript安装和编译

安装

cnpm i typescript -g
tsc helloworld.ts

Vscode+TypeScript

tsc --init
{"outDir": "./js"}
Terminal - Run Task - 
tsc: watch - front/tsconfig.json

三、数据类型

布尔类型(boolean)

let married: boolean=false;

数字类型(number)

let age: number=10;

字符串类型(string)

let firstname: string='zfpx';

数组类型(array)

let arr2: number[]=[4,5,6];
let arr3: Array<number>=[7,8,9];

元组类型(tuple)

是数组类型中的一种

let fullname: [string,string]=['zhang','san'];

枚举类型(enum)

事先考虑某一个变量的所有的可能的值，尽量用自然语言中的单词表示它的每一个值
比如性别、月份、星期、颜色、单位、学历

js enum Gender{ GIRL, BOY } console.log(李雷是${Gender.BOY}); console.log(韩梅梅是${Gender.GIRL});
enum Week{ MONDAY=1, TUESDAY=2 } console.log(今天是星期${Week.MONDAY});

任意类型(any)

let root:any=document.getElementById('root');
root.style.color='red';

null 和 undefined

null 和 undefined 是其它类型的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined

let x: number;
x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误
let y: number | null | undefined;
y = 1; // 运行正确
y = undefined;    // 运行正确
y = null;    // 运行正确

void 类型

void表示没有任何类型，一般用于定义方法的时候方法没有返回值

function greeting(name:string):void {
    console.log('hello',name);
}
greeting('zfpx');

never类型

never是其它类型(null undefined)的子类型，代表不会出现的值

let x: never;
x = (()=>{ throw new Error('exception')})();

四、函数

函数的定义

function hello(name:string):void {
    console.log('hello',name);
}
hello('zfpx');

没有返回值

let hello2 = function (name:string):void {
    console.log('hello2',name);
}
hello('zfpx');
hello2('zfpx');

可选参数

在TS中函数的形参和实参必须一样，不一样就要配置可选参数,而且必须是最后一个参数

function print(name:string,age?:number):void {
    console.log(name,age);
}
print('zfpx');

默认参数

function ajax(url:string,method:string='GET') {
    console.log(url,method);
}
ajax('/users');

剩余参数

function sum(...numbers:number[]) {
    return numbers.reduce((val,item)=>val+=item,0);
}
console.log(sum(1,2,3));

函数重载

• 在Java中的重载，指的是两个或者两个以上的同名函数，参数不一样
• 在TypeScript中，表现为给同一个函数提供多个函数类型定义

let obj: any={};
function attr(val: string): void;
function attr(val: number): void;
function attr(val:any):void {
  if (typeof val === 'number') {
      obj.age=val;
  } else {
      obj.name=val;
  }
}
attr('zfpx');
attr(9);
attr(true);
console.log(obj);