介绍 TypeScript
- TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
- TypeScript 由微软开发的自由和开源的编程语言。
- TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
TypeScript 数据类型
TypeScript 基本数据类型
TypeScript 对比 JavaScript 来讲是一门强类型语言吗，不能更改原有的类型
例如在 JavaScript 中
let a = '1';
a = 1;
console.log(a); // 10
在上面的代码中，我们可以看到 a 刚开始是 String 类型，后面赋值 10 变成了 Number 类型
在 TypeScript 中
let a = '1';
a = 1; // Type '1' is not assignable to type 'string'
因为强类型语言是一种强制类型定义的语言，所以一开始 a的值 string 后面就不能赋上其它类型的值
在 TypeScript 也可以这样子来定义变量
let a: string = '1';
这个叫做 typeScript 的原型，其他原型
let a: string = '1';
let num: number = 1;
let ifLogin: boolean = false;
......
// 一种特殊的类型
let anything;
anything = 1;
anything = '1';
可以不对当前值做初始化，此时变量可以被赋值为任意值。等同于：
let anything: any;
any 类型可以存储任何类型的值
TypeScript 数组、元组、枚举
数组
在 TypeScript 中数组的原型写法
let name: Array<string> = ['a','b']
前面的 Array 是 name 这个变量的值的类型，<>里面是数组里面的值的类型。
let name: Array<string> = ['a','b']
console.log(name[0]);
转换成 js 在浏览器打印出 console.log(name[0]) 打印出 a。
let name: Array<string> = ['a','b']
name[0] = 100;
报错 Type '100' is not assignable to type 'string'
let name: Array<string> = ['a','b']
name[0] = '100';
name = 'a'; // 报错
name = ['100']; // 没问题
name = [100] // 报错
因为在初始化变量 name 的时候就定义好了是 array 类型，数组里面值的类型是 string。
多种初始化数组变量，定义数组变量也可以这样写：
let numbers: Array<number> = [1, 2, 3];
let numbers: number[] = [1, 2, 3];
let anyArray: any[] = [1, '2', false];
元组
可以在数组里面设置多个类型值
let box: [string, number] = ['hello', 2];
枚举
enum Color{
Black,
Yellow,
Red
}
let myColor: Color = Color.Red;
console.log(myColor); // 输出 3
枚举是存的数值，而不是打印出属性 Red
函数的相关类型
返回值的类型
function returnVal():string{
return 'hahaha';
}
console.log(returnVal())
打印出 hahaha
function returnVal():string{
return 100;
}
console.log(returnVal())
打印报错
空
function say():viod {
console.log('hahaha');
}
参数返回值
function box(val1,val2){
return val1+val2
}
box(1, '2'); // 输出 '12';
// 等同于
function box(val1:any, val2:any){
return val1 + val2
}
box(1, '2'); // 输出 '12';
// 可以定义类型
function box(val1:number, val2:number){
return val1 + val2
}
box(1, 2); // 输出 3
box(1, '2'); //报错
设置返回值类型
function box(val1:number, val2:number):number{
return val1 * val2
}
box(1, 2); // 输出 3
函数类型
function say():viod {
console.log('hahaha');
}
function box(val1:number, val2:number){
return val1 + val2
}
let myfunc;
myfunc = say;
myfunc(); // 输出 hahaha
myfunc = box;
myfunc(5, 5); // 输出 10
这里的 myfunc 是 viod 类型，可以存储不同的函数
function say():viod {
console.log('hahaha');
}
function box(val1:number, val2:number){
return val1 + val2
}
let myfunc: (a: number,b:number) => number; // 给函数、返回值指定类型
myfunc = say; // 报错
myfunc(); // 报错
myfunc = box;
myfunc(5, 5); // 输出 10
TypeScript 对象类型和 type
object
let obj = {
name: "cheng",
age: 20
};
obj = {} // 报错
// 因为初始化的时候已经给 obj 这个对象设置了属性和属性值类型
obj = {
a: 'cheng',
b: 20
} // 报错
// 因为初始化的时候已经给 obj 设置格式, 包含了 name，age 所以在 obj 里面要有 name 和 age
完整写法
let obj:{name: string, age: number} = {
name: "cheng",
age: 20
};
obj = {
name: 'wu',
age: 18
}
修改正确
复杂对象类型
let comp: {data: number[], myfunc:(itme: number)=> number[]} = {
data: [1, 2, 3],
myfunc: function(itme: number):number[]{
this.data.push(itme);
return this.data;
}
};
console.log(comp.myfunc(20)); // 输出 [1, 2, 3, 20]
type 生成类型
type IType = {data: number[], myfunc:(itme: number)=> number[]};
let comp: IType = {
data: [1, 2, 3],
myfunc: function(itme: number):number[]{
this.data.push(itme);
return this.data;
}
};
console.log(comp.myfunc(10)); // 输出 [1, 2, 3, 10]
union type、检查类型 、null undefined 、never
union type
let unionType:any = 12;
unionType = '12';
let a:number| string| boolean = 12;
a = '12';
a = true;
a = {}; // 报错
检查类型
let checkType = 10;
if(typeof checkType == "number"){
console.log('number');
}
null & undefined
let a = null；
a = undefined；
let myNull = 12;
// 可以在非严格模式下设置，不报错
myNull = null;
never
never 类型是任何类型的值类型，也可以赋值给任何类型。然而没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。any 也不可以赋值给 never。通常表现为抛出异常或无法执行到终止点（例如无线循环）。
let x:never;
x = 12; // 报错: 不能将其他类型转为 never 类型
let y: number;
y = (()=>{
throw new Error(msg)
})();
可以正常执行
never 的应用场景
抛出异常
function error (msg: string):never {
throw new Error(msg)
}
死循环
function loop():never{
while (true){}
}
练习
let sumVal = {
money: 200,
count(val){
this.money += val
}
};
let handleCount = {
name: 'Henry',
sumVal: sumVal,
friends: ['wu', 'chen']
}
handleCount.sumVal.count(500);
console.log(handleCount);
答案
type sumVal = {money:number, count:(val:number)=> number}
let sumVal:sumVal = {
money: 200,
count(val:number):number{
this.money += val
}
};
let handleCount:{name:string,sumVal:sumVal}, friends:array<string>} = {
name: 'Henry',
sumVal: sumVal,
friends: ['wu', 'chen']
}
handleCount.sumVal.count(500);
console.log(handleCount);
网友评论