TS入门教程

TS入门教程

数据类型

1.任意类型：any（声明为 any 的变量可以赋予任意类型的值）

//可以是任意类型
let a : any = 1 / "zhangsan" /...

• 任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。

1.变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查
let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型
2.改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确
3.定义存储各种类型数据的数组时
let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

2.数字类型

let a : number = 123

3.字符串类型(一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。)

let a : string = "hello world"

4.布尔类型

let a : boolean = flag

5.数组类型

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

6.元组类型（元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同）

let x: [string, number];
x = ['张三', 1];    // 运行正常
x = [1, '张三'];    // 报错
console.log(x[0]);    // 输出 张三

7.枚举（枚举类型用于定义数值集合。）

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

• enum类型是对JavaScript标准数据类型的一个补充(使用枚举类型可以为一组数值赋予友好的名字 )

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

//默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 
//例如，我们将上面的例子改成从 1开始编号：
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

//或者，全部都采用手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

//枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 
//例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

8.void(用于标识方法返回值的类型，表示该方法没有返回值。)

function hello(): void {
    alert("Hello Runoob");
}

9.null(表示对象值缺失。)

10.undefined(用于初始化变量为一个未定义的值)

• 在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是 object。undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（–strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误
上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型
// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

11.never(never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。)

• never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

变量声明

变量的命名规则

1| 变量名称可以包含数字和字母
2| 除了下划线_和美元$符号外，不能包含其他特殊字符，包括空格
3| 变量名不能以数字开头

我们可以使用以下四种方式来声明变量

1.声明变量的类型及初始值

var [变量名] ： [类型] = 值；
//例如
var uname:string = 'zhangsan';

2.声明变量的类型，但没有初始值，变量值会设置为undefined

var [变量名] ： [类型]；
//例如
var uname:string;

3.声明变量并初始值，但不设置类型，该变量可以是任意类型

var [变量名] = 值；
//例如
var uname= 'zhangsan';

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为undefined

var [变量名];
//例如
var uname;

注意：变量不要使用name否则会与DOM中的全局window对象下的name属性出现了重名

TS遵循强类型，如果将不同的类型赋值给变量会编译错误

//例如
var uname:number = 'hello'; //这个代码编译会报错

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型

语法格式有两种

//第一种
<类型>值
//第二种
值 as 类型

//实例
var str = '1'
var str2:number = <number> <any> str //str、str2 是string类型

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

var num = 2;    // 类型推断为 number
console.log("num 变量的值为 "+num); 
num = "12";    // 编译错误
console.log(num);

//第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。

//报错提示
error TS2322: Type '"12"' is not assignable to type 'number'.

变量作用域

变量作用域指定了变量定义的位置。程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：
全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
局部作用域 − 局部变量，局部变量只能在声明它的一个代码块中使用。

运算符

算数运算符

//实例
var num1:number = 10 
var num2:number = 2
var res:number = 0
    
res = num1 + num2 
console.log("加:        "+res);    //12

res = num1 - num2; 
console.log("减: "+res)            //8

res = num1*num2 
console.log("乘:    "+res)        //20

res = num1/num2 
console.log("除:   "+res)          //5
    
res = num1%num2 
console.log("余数:   "+res)        //0

num1++ 
console.log("num1 自增运算: "+num1)   //11

num2-- 
console.log("num2 自减运算: "+num2)   //1

关系运算符

var num1:number = 5;
var num2:number = 9;
 
console.log("num1 的值为: "+num1);   //5
console.log("num2 的值为:"+num2);    //9
 
var res = num1>num2 
console.log("num1 大于n num2: "+res)    //false
 
res = num1<num2 
console.log("num1 小于 num2: "+res)   //true
 
res = num1>=num2 
console.log("num1 大于或等于  num2: "+res)   //false
 
res = num1<=num2
console.log("num1 小于或等于 num2: "+res)  //true
 
res = num1==num2 
console.log("num1 等于 num2: "+res)     //false
 
res = num1!=num2  
console.log("num1 不等于 num2: "+res)    //true

逻辑运算符

var avg:number = 20; 
var percentage:number = 90; 
 
console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);   //20 90
    
var res:boolean = ((avg>50)&&(percentage>80)); 
console.log("(avg>50)&&(percentage>80): ",res);   //false
 
var res:boolean = ((avg>50)||(percentage>80)); 
console.log("(avg>50)||(percentage>80): ",res);   //true
 
var res:boolean=!((avg>50)&&(percentage>80)); 
console.log("!((avg>50)&&(percentage>80)): ",res);     //true

短路运算符（&& 与 ||）

&& 与 || 运算符可用于组合表达式。

&& 运算符只有在左右两个表达式都为 true 时才返回 true。

// 实例中 a < 10 与 a > 5 是使用了 && 运算符的组合表达式，第一个表达式返回了 false，由于 && 运算需要两个表达式都为 true，所以如果第一个为 false，就不再执行后面的判断(a > 5 跳过计算)，直接返回 false。
var a = 10 
var result = ( a<10 && a>5)  

|| 运算符只要其中一个表达式为 true ，则该组合表达式就会返回 true。

// 实例中 a > 5 与 a < 10 是使用了 || 运算符的组合表达式，第一个表达式返回了 true，由于 || 组合运算只需要一个表达式为 true，所以如果第一个为 true，就不再执行后面的判断(a < 10 跳过计算)，直接返回 true。
var a = 10 
var result = ( a>5 || a<10)

位运算符

var a:number = 2;   // 二进制 10 
var b:number = 3;   // 二进制 11
    
var result; 
        
result = (a & b);     
console.log("(a & b) => ",result)   //2
            
result = (a | b);          
console.log("(a | b) => ",result)      //3
        
result = (a ^ b);  
console.log("(a ^ b) => ",result);      //1
    
result = (~b); 
console.log("(~b) => ",result);       //-4
 
result = (a << b); 
console.log("(a << b) => ",result);        //16
 
result = (a >> b); 
console.log("(a >> b) => ",result);        //0
 
result = (a >>> 1); 
console.log("(a >>> 1) => ",result);     //1

赋值运算符

类似的逻辑运算符也可以与赋值运算符联合使用：<<=, >>=, >>>=, &=, |= 与 ^=。

var a: number = 12 
var b:number = 10  
 
a = b 
console.log("a = b: "+a)    //10
 
a += b
console.log("a+=b: "+a)   //20
 
a -= b 
console.log("a-=b: "+a)    //10
 
a *= b 
console.log("a*=b: "+a)     //100
 
a /= b 
console.log("a/=b: "+a)     //10
 
a %= b 
console.log("a%=b: "+a)    //0

三元运算符

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2 //Test − 指定的条件语句 expr1 − 如果条件语句 Test 返回 true 则返回该值 expr2 − 如果条件语句 Test 返回 false 则返回该值

//
var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0"    //小于 0，或等于 0
console.log(result)

类型运算符

typeof 运算符 typeof 是一元运算符，返回操作数的数据类型。

var num = 12 
console.log(typeof num);   //输出结果: number

instanceof instanceof 运算符用于判断对象是否为指定的类型。

其他运算符

负号运算符(-) 更改操作数的符号

var x:number = 4 
var y = -x; 
console.log("x 值为: ",x);   // 输出结果 4 
console.log("y 值为: ",y);   // 输出结果 -4

字符串运算符: 连接运算符 (+) + 运算符可以拼接两个字符串

var msg:string = "RUNOOB"+".COM" 
console.log(msg)  //RUNOOB.COM