TypeScript
TypeScript简介
源起
随着时间的推移，微软发现外部客户在开发大规模 JavaScript 应用的过程中遭遇了语言本身的短板，在 2012 年 10 月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript，当前最新版本为TypeScript 3.9。
TypeScript 是 JavaScript 的严格超集，因此任何 JavaScript 都是合法的 TypeScript。TypeScript 为 JavaScript 带来了强大的类型系统和对 ES2015的支持，它的编译工具可以运行在任何服务器和任务系统上。类型系统实际上是非常好的文档，增强了编辑器在 智能提示，跳转定义，代码补全 等方向上的功能，并且在编译阶段能发现大部分的错误，对于大型工程的代码可读性和可维护性起到了了不起的作用。
TypeScript 是什么
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系：
TypeScript 与 JavaScript 的区别
| TypeScript | JavaScript |
|---|---|
| TypeScript 的超集用于解决大型项目的代码复杂性 | 一种脚本语言，用于创建动态网页 |
| 可以在编译期间发现并纠正错误 | 作为一种解释型语言，只能在运行时发现错误 |
| 强类型，支持静态和动态类型 | 弱类型，没有静态类型选项 |
| 最终被编译成 JavaScript 代码，使浏览器可以理解 | 可以直接在浏览器中使用 |
| 支持模块、泛型和接口 | 不支持模块，泛型或接口 |
| 支持 ES3，ES4，ES5 和 ES6 等 | 不支持编译其他 ES3，ES4，ES5 或 ES6 功能 |
TypeScript 的优点
增加了代码的可读性和可维护性
非常包容
-
TS是JS的超集，TS是JS的超集，.js 文件可以直接重命名为.ts即可
-
即使不显式的定义类型，也能够自动做出类型推论
-
可以定义从简单到复杂的几乎切类型
-
即使TypeScript编译报错，也可以生成JS文件
-
兼容第三方库，即使它不是用TS写的，也可以编写单独的类型文件供TS读取
拥有活跃的社区 -
大部分第方库都有提供给TS的类型定义文件
-
Angular/React/Vue都支持TS编写
-
TS拥抱了ES6规范，也支持部分ESNext 草案的规范
TypeScript使用
搭建ts开发环境
- 全局下载ts: npm install -g typescript
- 查看ts版本: tsc -v
- 编译ts生成js文件: tsc hello. ts
- vscode自动化编译
1).生成配置文件tsconfig json
tsc --init
2).修改配置
"module":” amd"，
”outDir":” ./js"
// "strict": true;
3).启动监视任务:
终端->运行任务-> 监视tsconfig. json
创建一个hello world
function sayHello(person: string) {
console.log( 'hello, ' + person)
}
sayHello( 'tom' )数据类型
typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，写ts代码必须指定类型，在typescript中主要给我们提供了以下数据类型
- 布尔类型（boolean）
- 数字类型（number）
- 字符串类型(string)
- 数组类型（array）
- 元组类型（tuple）
- 枚举类型（enum）
- 任意类型（any）
- null 和 undefined
- void类型
- never类型
布尔类型（boolean）
/*es5的写法 （正确写法） ts中（错误写法）
var flag=true;
flag=456;
*/
var flag:boolean=true;
// flag=123; //错误
flag=false; //正确 数字类型（number）
var num:number=123;
num=456;字符串类型(string)
var str:string='this is ts';
str='haha'; //正确数组类型（array） ts中定义数组有两种方式
// var arr=['1','2']; //es5定义数组
// 1.第一种定义数组的方式
var arr:number[]=[11,22,33];
console.log(arr);
//2.第二种定义数组的方式
var arr:Array<number>=[11,22,33];
console.log(arr)元组类型（tuple） 属于数组的一种
// 元组类型（tuple） 属于数组的一种
// var arr:Array<number>=[11,22,33];
//console.log(arr)
//元祖类型
let arr:[number,string]=[123,'this is ts'];
console.log(arr);枚举类型（enum）
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
} ; enum Color {blue,red,'orange'};
var c:Color=Color.red;
console.log(c); //1 如果标识符没有赋值 它的值就是下标
enum Color {blue,red=3,'orange'};
// var c:Color=Color.red;
// console.log(c); //3
var c:Color=Color.orange;
console.log(c); //4任意类型（any）
var num:any=123;
num='str';
num=true;
console.log(num)
//任意类型的用处
var oBox:any=document.getElementById('box');
oBox.style.color='red';- null 和 undefined
var num:number;
console.log(num) //输出：undefined 报错
var num:undefined;
console.log(num) //输出：undefined //正确
//定义没有赋值就是undefined
var num:number | undefined;
console.log(num);
var num:null;
num=null;
//一个元素可能是 number类型 可能是null 可能是undefined
var num:number | null | undefined;
num=1234;
console.log(num)- void类型 :typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
//es5的定义方法
// function run(){
// console.log('run')
// }
// run();
//表示方法没有返回任何类型
//正确写法
function run():void{
console.log('run')
}
run();
//错误写法
function run():undefined{
console.log('run')
}
run();
//正确写法
function run():number{
return 123;
}
run(); - never类型:是其他类型 （包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。
var a:undefined;
a=undefined;
var b:null;
b=null;
var c:never;
// c=123; //错误的写法
c(()=>{
throw new Error('错误');
})()函数
1、函数的定义
//es5定义函数的方法
//函数声明法
function run(){
return 'run';
}
//匿名函数
var run2=function(){
return 'run2';
}
//ts中定义函数的方法
//函数声明法
function run():string{
return 'run';
}
//错误写法
function run():string{
return 123;
}
//匿名函数
var fun2=function():number{
return 123;
}
alert(fun2()); /*调用方法*/
//ts中定义方法传参
function getInfo(name:string,age:number):string{
return `${name} --- ${age}`;
}
alert(getInfo('zhangsan',20)); 2、可选参数
es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
function getInfo(name:string,age?:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
alert(getInfo('zhangsan'))
alert(getInfo('zhangsan',123))
//错误写法
function getInfo(name?:string,age:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
alert(getInfo('zhangsan'))注意:可选参数必须配置到参数的最后面
3、默认参数
es5里面没法设置默认参数，es6和ts中都可以设置默认参数
function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
// alert( getInfo('张三'));
alert( getInfo('张三',30));4、剩余参数
function sum(a:number,b:number,c:number,d:number):number{
return a+b+c+d;
}
// alert(sum(1,2,3,4)) ;
//三点运算符 接受新参传过来的值
function sum(...result:number[]):number{
var sum=0;
for(var i=0;i<result.length;i++){
sum+=result[i];
}
return sum;
}
alert(sum(1,2,3,4,5,6)) ; 5、函数重载
java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
ts为了兼容es5 以及 es6 重载的写法和java中有区别。
//es5中出现同名方法，下面的会替换上面的方法
function css(config){}
unction css(config,value){}
//ts中的重载
/*function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(str:any):any{
if(typeof str==='string'){
return '我叫：'+str;
}else{
return '我的年龄是'+str;
}
alert(getInfo('张三')); //正确
alert(getInfo(20)); //正确
alert(getInfo(true)); //错误写法
*/
function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
if(age){
return '我叫：'+name+'我的年龄是'+age;
}else{
return '我叫：'+name;
}
}
alert(getInfo('zhangsan')); /*正确*/
// alert(getInfo(123)); 错误
alert(getInfo('zhangsan',20));6、箭头函数 es6
this指向的问题 箭头函数里面的this指向上下文
setTimeout(()=>{
alert('run')
},1000)参考：https://zhuanlan.zhihu.com/p/144004258
扫一扫
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
