TS学习
-
TS介绍
微软开发的一款开源的编程语言。
是JS的超集,遵循最新的ES6、ES5规范,扩展了JS语法。
更像后端java、C#这样的面向对象的语言。可以让JS开发大型企业项目。
谷歌也在大力支持TS推广、谷歌的angular2.x+就是基于TS语法。
最新的vue、React也可以集成TS
node.js框架Nestjs、midway中用的也是Typescript语法。 -
安装和编译
安装:
npm install -g typescript
cnpm install -g typescript
yarn install -g typescript
运行:
tsc helloworld.ts -
TS开发工具VScode配置自动编译.ts文件
创建tsconfig.json文件 生成配置文件 tsc --init 生成配置文件
在此之后进行下面步骤实现监听TS文件的保存进而转换为JS文件
Terminal->Run Task->typescripy->tsc:watch - tsconfig.json
- TS中的数据类型
typescript中为了使编写的代码更加规范,更有利于维护,增加了类型校验,在typescript中主要给我们增加了:
布尔类型(boolean)
数字类型(number)
字符串类型(string)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null和undefined
void类型
never类型
/** typescript中为了使编写的代码更加规范,更有利于维护,增加了类型校验,在typescript中主要给我们增加了:
布尔类型(boolean)
数字类型(number)
字符串类型(string)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null和undefined
void类型
never类型
*/
// 布尔类型(boolean) true false
let flag:boolean=true
flag=false
// 数字类型(number)
let a:number = 123
console.log(a)
// a="string" // 错误写法,必须是number类型
a = 12.4
console.log(a)
// 字符串类型(string)
let str:string = "this is ts"
// str = 12
// str = false
str = "hello ts"
console.log(str)
// 数组类型(array)
// es5 var arr = [1, '123', false]
// 1、第一种定义数组方式
let arr:number[] = [1, 2, 4, 432, 33] // 必须是数字
console.log(arr)
let arr1:string[] = ["2", "332", "123dsd"] // 必须是string
console.log(arr1)
// 2、第二种定义数组方式
let arr2:Array<number> = [11, 22, 33, 43, 34]
console.log(arr2)
let arr3:Array<string> = ['22', "22", "php", "java", "c++"]
console.log(arr3)
// 元组类型(tuple)属于数组的一种
let arr4:[string, number, boolean] = ["123", 12, false]
// 枚举类型(enum)定义标识符
/**
* 随着计算机不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的计算,
* 例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
* 在其他程序设计语言中,一般用一个数值来表示某一状态,这种处理方式不直观,易读性差。
* 如果能在程序中用自然语言中有相应含义的单词来表示某一状态,则程序就很容易阅读和理解。
* 也就是说,事先考虑到某一变量可能取得值,尽量用自然语言中含义清楚的单词;来表示他的每一个值,
* 这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
* enum 枚举名{
* 标识符[=整型常数],
* 标识符[=整型常数],
* ...
* 标识符[=整型常数],
* };
*/
//pay_status 0 未支付 1 支付 2 交易成功
// flag 1 表示true 0 表示 false
enum Flag {
success = 1,error = -1
}
var f:Flag = Flag.success
console.log(f)
// enum Color {red, blue, orange}
// var c:Color = Color.blue
// console.log(c) // 默认是索引值,输出1
enum Color {red, blue=5, orange}
var c:Color = Color.orange
console.log(c) // 输出6
// 任意类型(any)
// var num:number = 123
// num="str"//报错
// var num:any = 123
// num = "123ss"
// num = true
// console.log(num)
var col:string[] = ["red", "yellow", "blue"] // 可选链,TS3.7+支持
var oBox:any = document.getElementById('box')
oBox.style.color = col?.[0]
// null和undefined 其他(never类型)数据类型的子类型
// var num:number
// console.log(num) // 输出undefined 报错
// var num:undefined
// console.log(num) // 输出undefined 正常
// var num:number | undefined
// console.log(num)
// var num:null
// num = 123 // 报错
// 一个元素可能是number类型,可能是null类型,可能是undefined
var num:number | null | undefined // 若赋值,只能赋值number类型
num = 1234
console.log(num)
// void类型 TS中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值
// ES5定义函数
// function run() {
// console.log('run')
// }
// run()
// 表示方法没有任何返回类型
// function run():void {
// console.log("run")
// }
// run()
// 错误写法
// function run():number {
// console.log("run")
// }’
// 正确写法
function run():number {
return 123
}
// never类型 其他类型(包括 null 和 undefined)的子类型,代表从不会出现的值
// 这意味着声明never的变量只能被never类型所赋值。
/**
* var a1:undefined
* a1 = undefined
* var b1:null
* b1 = null
*/
var a2:never
a2=(()=> {
throw new Error("错误")
})()
"use strict";
/** typescript中为了使编写的代码更加规范,更有利于维护,增加了类型校验,在typescript中主要给我们增加了:
布尔类型(boolean)
数字类型(number)
字符串类型(string)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null和undefined
void类型
never类型
*/
// 布尔类型(boolean) true false
let flag = true;
flag = false;
// 数字类型(number)
let a = 123;
console.log(a);
// a="string" // 错误写法,必须是number类型
a = 12.4;
console.log(a);
// 字符串类型(string)
let str = "this is ts";
// str = 12
// str = false
str = "hello ts";
console.log(str);
// 数组类型(array)
// es5 var arr = [1, '123', false]
// 1、第一种定义数组方式
let arr = [1, 2, 4, 432, 33]; // 必须是数字
console.log(arr);
let arr1 = ["2", "332", "123dsd"]; // 必须是string
console.log(arr1);
// 2、第二种定义数组方式
let arr2 = [11, 22, 33, 43, 34];
console.log(arr2);
let arr3 = ['22', "22", "php", "java", "c++"];
console.log(arr3);
// 元组类型(tuple)属于数组的一种
let arr4 = ["123", 12, false];
// 枚举类型(enum)定义标识符
/**
* 随着计算机不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的计算,
* 例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
* 在其他程序设计语言中,一般用一个数值来表示某一状态,这种处理方式不直观,易读性差。
* 如果能在程序中用自然语言中有相应含义的单词来表示某一状态,则程序就很容易阅读和理解。
* 也就是说,事先考虑到某一变量可能取得值,尽量用自然语言中含义清楚的单词;来表示他的每一个值,
* 这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
* enum 枚举名{
* 标识符[=整型常数],
* 标识符[=整型常数],
* ...
* 标识符[=整型常数],
* };
*/
//pay_status 0 未支付 1 支付 2 交易成功
// flag 1 表示true 0 表示 false
var Flag;
(function (Flag) {
Flag[Flag["success"] = 1] = "success";
Flag[Flag["error"] = -1] = "error";
})(Flag || (Flag = {}));
var f = Flag.success;
console.log(f);
// enum Color {red, blue, orange}
// var c:Color = Color.blue
// console.log(c) // 默认是索引值,输出1
var Color;
(function (Color) {
Color[Color["red"] = 0] = "red";
Color[Color["blue"] = 5] = "blue";
Color[Color["orange"] = 6] = "orange";
})(Color || (Color = {}));
var c = Color.orange;
console.log(c); // 输出6
// 任意类型(any)
// var num:number = 123
// num="str"//报错
// var num:any = 123
// num = "123ss"
// num = true
// console.log(num)
var col = ["red", "yellow", "blue"]; // 可选链,TS3.7+支持
var oBox = document.getElementById('box');
oBox.style.color = col?.[0];
// null和undefined 其他(never类型)数据类型的子类型
// var num:number
// console.log(num) // 输出undefined 报错
// var num:undefined
// console.log(num) // 输出undefined 正常
// var num:number | undefined
// console.log(num)
// var num:null
// num = 123 // 报错
// 一个元素可能是number类型,可能是null类型,可能是undefined
var num; // 若赋值,只能赋值number类型
num = 1234;
console.log(num);
// void类型 TS中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值
// ES5定义函数
// function run() {
// console.log('run')
// }
// run()
// 表示方法没有任何返回类型
// function run():void {
// console.log("run")
// }
// run()
// 错误写法
// function run():number {
// console.log("run")
// }’
// 正确写法
function run() {
return 123;
}
// never类型 其他类型(包括 null 和 undefined)的子类型,代表从不会出现的值
// 这意味着声明never的变量只能被never类型所赋值。
/**
* var a1:undefined
* a1 = undefined
* var b1:null
* b1 = null
*/
var a2;
a2 = (() => {
throw new Error("错误");
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
box
</div>
</body>
</html>
<script src="./index.js"></script>
- TS中的函数
// 函数的定义
// ES5函数定义方式
// // 函数申明类
// function run() {
// return "run";
// }
// // 匿名函数
// var run2 = function() {
// return "run2";
// }
// TS定义函数方法
// 函数声明法
function run():string {
return 'run'
}
// 匿名函数法
var fun2 = function():number {
return 123
}
// TS中定义方法传参
function getInfo5(name:string, age:number):string {
return `${name} --- ${age}`
}
console.log(getInfo5('张三', 20))
var getInfo2 = function(name:string, age:number):string {
return `${name} --- ${age}`
}
console.log(getInfo2('张三', 40))
// // 没有返回值的方法
function run3():void {
console.log('run3')
}
run3()
// 方法可选参数
// ES5里面方法的实参和形参可以不一样,但是TS中必须一样,如果不一样就需要配置可选参数 ?配置
function getInfo3(name:string, age?:number):string {
if (age) {
return `${name} --- ${age}`
} else {
return `${name} --- 保密`
}
}
console.log(getInfo3('张三'))
// 可选参数必须配置到最后面
// ES5没法设置默认参数,ES6和TS可以设置默认参数 可选参数
function getInfo4(name:string, age:number=20):string {
if (age) {
return `${name} --- ${age}`
} else {
return `${name} --- 保密`
}
}
console.log(getInfo4('张三'))
// 剩余参数
// function sum(a:number, b:number, c:number, d:number):number {
// return a+b+c+d
// }
// console.log(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
}
console.log(sum(1, 2, 3, 4))
function sum4(a:number, ...result:number[]):number {
var sum = 0
for(var i = 0; i < result.length; i++) {
sum += result[i]
}
console.log(a)
return sum
}
console.log(sum4(1, 2, 3, 4))
// 函数的重载
// java中方法的重载,重载指的是两个或者两个以上同名函数,但他们的参数不一样,这时会出现函数重载的情况
// typescript中的重载,通过为同一个函数提供多个函数类型定义来实现多种功能的目的
// typescript为了兼容es5、es6重载的写法和java中有区别
// es5中出现同名方法,下面的会替换上面的方法
// function css(config) {
// }
// function css(config, value) {
// }
// ts中的重载
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any {
if (typeof str === "string") {
return "我叫," + str
} else {
return "我的年龄是" + str
}
}
// console.log(getInfo('张三')) // 正确
// console.log(getInfo(20)) // 正确
// console.log(getInfo(true)) // 错误写法
// ts重载参数一样
function getInfo7(name:string):string;
function getInfo7(name:string, age:number):string;
function getInfo7(name:any, age?:any):any {
if (age) {
return `我是${name} --- ${age}`
} else {
return `我是${name}`
}
}
console.log(getInfo7('张三')) // 正确
// console.log(getInfo7(123)) // 错误
console.log(getInfo7('张三', 20)) // 正确
// console.log(getInfo7('张三', '20')) // 错误
// 箭头函数
// es6
// setTimeout(function() {
// console.log('run')
// }, 1000)
// 箭头函数this指向上下文
setTimeout(()=>{
console.log('run')
},1000)
"use strict";
// 函数的定义
// ES5函数定义方式
// // 函数申明类
// function run() {
// return "run";
// }
// // 匿名函数
// var run2 = function() {
// return "run2";
// }
// TS定义函数方法
// 函数声明法
function run() {
return 'run';
}
// 匿名函数法
var fun2 = function () {
return 123;
};
// TS中定义方法传参
function getInfo5(name, age) {
return `${name} --- ${age}`;
}
console.log(getInfo5('张三', 20));
var getInfo2 = function (name, age) {
return `${name} --- ${age}`;
};
console.log(getInfo2('张三', 40));
// // 没有返回值的方法
function run3() {
console.log('run3');
}
run3();
// 方法可选参数
// ES5里面方法的实参和形参可以不一样,但是TS中必须一样,如果不一样就需要配置可选参数 ?配置
function getInfo3(name, age) {
if (age) {
return `${name} --- ${age}`;
}
else {
return `${name} --- 保密`;
}
}
console.log(getInfo3('张三'));
// 可选参数必须配置到最后面
// ES5没法设置默认参数,ES6和TS可以设置默认参数 可选参数
function getInfo4(name, age = 20) {
if (age) {
return `${name} --- ${age}`;
}
else {
return `${name} --- 保密`;
}
}
console.log(getInfo4('张三'));
// 剩余参数
// function sum(a:number, b:number, c:number, d:number):number {
// return a+b+c+d
// }
// console.log(sum(1, 2, 3, 4))
// 扩展运算符,接收形参
function sum(...result) {
var sum = 0;
for (var i = 0; i < result.length; i++) {
sum += result[i];
}
return sum;
}
console.log(sum(1, 2, 3, 4));
function sum4(a, ...result) {
var sum = 0;
for (var i = 0; i < result.length; i++) {
sum += result[i];
}
console.log(a);
return sum;
}
console.log(sum4(1, 2, 3, 4));
function getInfo(str) {
if (typeof str === "string") {
return "我叫," + str;
}
else {
return "我的年龄是" + str;
}
}
function getInfo7(name, age) {
if (age) {
return `我是${name} --- ${age}`;
}
else {
return `我是${name}`;
}
}
console.log(getInfo7('张三')); // 正确
// console.log(getInfo7(123)) // 错误
console.log(getInfo7('张三', 20)); // 正确
// console.log(getInfo7('张三', '20')) // 错误
// 箭头函数
// es6
// setTimeout(function() {
// console.log('run')
// }, 1000)
// 箭头函数this指向上下文
setTimeout(() => {
console.log('run');
}, 1000);