1.typescript概述
-
什么是javascript？（运行环境 浏览器/ nodejs）
JavaScript (缩写: JS)是-种运行在客户端(比如:浏览器)中的编程语言。
当应用于浏览器时，为网站提供动态交互特性，让网页“动”起来。
JavaScript的运行环境: 1浏览器2 Node.js.
Node.js让JavaScript摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。 -
什么是typescript？
TypeScript (简称: TS)是JavaScript的超集(JS 有的TS都有)。
TypeScript = Type + JavaScript (为 JS添加了类型系统)。
// TypeScript代码:有明确的类型，即: number ( 数值类型)
let age: number = 18
// JavaScript代码:无明确的类型
let age = 18
TypeScript是微软开发的开源编程语言,设计目标开发大型应用。
可以在任何浏览器、任何计算机、任何操作系统上运行。
2.TS相比于JS的优势
JS的类型系统存在"先天缺陷”， 绝大部分错误都是类型错误( Uncaught TypeError )
- 优势一:类型化思维方式，使得开发更加严谨，提前发现错误，减少改Bug时间。
- 优势二:类型系统提高了代码可读性,并使维护和重构代码更加容易。
- 优势三:补充了接口、枚举等开发大型应用时JS缺失的功能。
- Vue 3源码使用TS重写，释放出重要信号: TS是趋势。
- Angular默认支持TS; React与TS美配合，是很多大型项目的首选。
3.typescript中的数据类型
- 1.布尔类型
//布尔类型
let isTrue:boolean = true;
let isFalse:boolean = false;
console.log(isTrue)
console.log(isFalse)
- 2.数字类型
//数字类型
let size:number = 18;
let score:number = 99.8;
let sub:number = - 100;
console.log(size)
console.log(score)
console.log(sub);
- 3.字符串类型
//字符串类型
let pname:string = '康家豪';
console.log(pname);
//模板字符串
let age:number = 18;
let str:string = `${
pname}的年龄是${
age}岁！`;
console.log(str)
- 4.数组类型
//数组类型
// 语法一:
let names:string[] = [];
//数组的类型注解由两部分组成:类型+ []。处表示字符串类型的数组(只能出现字符串类型)。
names = ['time','is','money'];
console.log(names);
//语法二:泛型
let scores:Array<number> = [1,2,3,4,5,6]
- 5.元组类型
//元组类型（通过元组类型可以给数组中的元素指定多个数据类型）
let tuple:[string,number,boolean] = ['康家豪',18,true];
console.log(tuple);
- 6.枚举类型
枚举类型( enum)
随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。
例如:性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
在其它程序设计语言中，一般用一个数值来代表某状态，这种处理方法不直观， 易读性差。
如果能在程序中用自然语言中有相应含义的单词来代表某一状态 ，则程序就很容易阅读和理解。
也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，
这种方法称为枚举方法，用这种方法定义的类型称枚举类型。
//用于标识状态
enum Flag {
success = 1,
error = 0
}
var f1:Flag = Flag.success;
var f2:Flag = Flag.error;
console.log(f1);
console.log(f2);
enum Colors {
red,
blue,
green
}
var c:Colors = Colors.red;
console.log(c) //0 没有赋值默认为对应的索引值
- 7.任意类型 (any) (获取dom节点)
var num:number = 19;
num = 20; //报错
var num:any = 20;
num = 99;//不会报错
- 8.null和undefined（都只有一个值，并且值为它本身。）
//用来定义可能为未赋值又需要赋值的数字
var num:undefined | number;
console.log(num)
//一个元素可能是number类型 可能是null 可能是undefined
var num:number | undefined | null;
- 9.void类型(一般用于定义方法没有返回值)
//ES5 没有返回值的函数
function run():void{
console.log('run')
}
run();
function run2():number{
return 123
}
run2();
- 10.never类型(声明never的变量只能被never类型所赋值)
var a:never;
a = () => {
throw new Error('错误');
}
4.TS中的函数
4.1 函数的定义
- 4.1.1 ES5中定义函数
//函数声明法
function run(){
return 123;
}
//匿名函数
var run2 = function(){
return 123;
}
- 4.1.2 ts中定义函数的方法
//函数声明法
function run():string{
return 'run';
}
//匿名函数
var run2 = function():number{
return 123;
}
//ts中定义方法传参
function getInfo(name:string,age:number):string{
return `${
name}--- ${
age}`;
}
console.log(getInfo('康家豪',20))
//没有返回值的方法
function run():void{
console.log('run')
}
run();
4.2 方法可选参数
es5中方法的实参和形参可以不一样，但是ts中不可以，需要配置可选参数
- 举个例子(如果我某个函数中的参数是非必须的，我该怎么处理)
function getInfo(name:string,age:number):string{
if(age){
return `${
name}--- ${
age}`;
}else{
return `${
name}--- 年龄保密`;
}
}
console.log(getInfo('康家豪'))
//这样程序是可以运行的，但是ts报错，并且不严谨
//所以我们需要配置可选参数
function getInfo(name:string,age？:number):string{
if(age){
return `${
name}--- ${
age}`;
}else{
return `${
name}--- 年龄保密`;
}
}
console.log(getInfo('康家豪'))
//注意：可选参数必须配置到所有参数的最后面
4.3 默认参数
function getInfo(name:string,age:number = 20):string{
if(age){
return `${
name}--- ${
age}`;
}else{
return `${
name}--- 年龄保密`;
}
}
console.log(getInfo('康家豪',99))
4.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,7))
4.5 箭头参数
//this指向函数定义处的上下文
let a = () => {
console.log('aaa')
}
a()