TypeScript 基础使用

TypeScript(简称：TS)是Javascript的超集。

TypeScript = Type + JavaScript（在Javascript的基础上添加了类型支持）。

TypeScript是微软开发的开源性编程语言，可以在任何运行JavaScript的地方运行。

TypeScript与JavaScript的主要区别

1. 从编程语言的动静进行区分，TypeScript属于静态类型的编程语言，JavaScript属于动态类型的编程语言。
   • 静态类型：编译期做类型检查
   • 动态类型：执行期做类型检查
   • 代码编译与代码执行顺序：先编译后执行
2. JavaScript需要等到代码真正执行的时候才能发现错误，TypeScript则在代码编译的时候就能发现错误。

TypeScript编译与运行

XXXTODO链接

tsc file.ts   //编译ts文件
node file.js  //运行js文件
ts-node file.js   //编译ts文件为js文件，并运行js文件
1
2
3

类型注解

let str:string = '喜欢大海';
console.log(str)
1
2

说明：代码中的:string就是类型注解。

作用：为变量添加类型约束。

常用类型

基础类型

基础类型：number、string、boolean、null、undefined、symbol。

1. 字符串类型

   let a:string = '听';
   let str:string = `${a}话`;
   1
   2

2. 数字类型

   let notANumber: number = NaN;//Nan
   let num: number = 123;//普通数字
   let infinityNumber: number = Infinity;//无穷大
   let decimal: number = 6;//十进制
   let hex: number = 0xf00d;//十六进制
   let binary: number = 0b1010;//二进制
   let octal: number = 0o744;//八进制
   1
   2
   3
   4
   5
   6
   7

3. 布尔类型

   let bool:boolean = true;
   let boola:boolean = Boolean(1);
   1
   2

4. 空值

   若开启了严格模式（‘strict’:true），则 null 不能 赋予 void 类型。

   开启strictNullChecks模式，null 和 undefined 赋值给基础类型也是会报错的。

   let a:void = undefined;
   let b:void = null;   
   function ting(name:string):void{
       console.log(name);
   }
   ting('时间');
   1
   2
   3
   4
   5
   6

数组类型

数组类型的两种写法：number[]、Array

let num:number[] = [1,2,3];   //当前数组中只能存在number类型数据  推荐
let num:Array<number> = [1,2,3];   // 同上 不推荐
1
2

联合类型

多个类型进行联合使用

let myPhone: number | string  = '133-0000-0000'; /* 字符串或数字类型 */
let arr:(number|string)[] = [1,'2',3];   /* 只含有数字与字符串的数组 */
1
2
3

函数类型

函数类型：函数参数与返回值的类型。

type ArrNS = (number | string)[];

/* 1.普通函数 */
function Add(num:number,str:string):ArrNS {
    return [num,str]
}
/* 2. 函数表达式 */
let Add=(num:number,str:string):ArrNS=> {
    return [num,str]
}
/* 3.同时指定参数与返回值的类型 只适用于函数表达式 */
let Add:(num:number,str:string)=>ArrNS=(num,str)=> {
    return [num,str]
}

let n:ArrNS = Add(10,'100');
console.log(n);   //[ 10, '100' ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

对象类型

用{}描述对象结构，属性采用属性名：类型的形式，方法采用方法名():返回值类型的形式；多个属性用;分隔。

type Num = number;
type Str = string;
type VoidN = void;

/*单行书写对象*/
let ting:{name:Str;age:Number;SayHi(name:string):VoidN}={
    name:'听话',
    age:17,
    SayHi(name) {
        console.log('喜欢大海');
    },
}
/*多行书写对象*/
let ting:{
    name?:Str    //可选属性
    age:Number
    SayHi(name:string):VoidN   //多行可取消分号，通过换行分隔多个属性类型
}={
    name:'听话',
    age:17,
    SayHi(name) {
        console.log('喜欢大海');
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

接口类型

1. 基础使用

   使用interface关键字来声明接口

   interface data{
       name:string    /*同对象类型注解格式一样*/
       age:number
   }
   let list:data={
       name:'李四',
       age:12
   }
   1
   2
   3
   4
   5
   6
   7
   8

   注：接口类型只能给对象指定类型；类型别名可以为任何类型指定类型，包括对象。

2. 接口继承

   将公共的属性进行抽离，通过extends继承实现复用。

   interface data{
       name:string
   }
   interface datas extends data{
       age:number
   }
   let ting:datas={
       name:'123',   
       age:17
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

元组类型

数组类型没有个数限制(不严谨)；元组类型是另一种类型的数组，可以明确元素的个数与其对应的类型。

let data:[number,string]=[123,'123'];
1

字面量类型

某个特定的字符串可也以作为TS中的类型。

使用场景：字面量类型配合联合类型一起使用，表示一组明确的可选值列表。

function run(direction:'up' | 'down' | 'left' | 'right'){
    console.log(direction)
}
run('up')
1
2
3
4

枚举类型

定义一组命名常量；枚举不仅用作类型，还提供值(枚举成员都是有值的)。

enum ting{Up=12,Down,Left,Right} /* Up:12 Down:13 Left:14 Right:15 默认从零开始自增 数字枚举*/
function run(direction:ting){
    console.log(direction)
}
run(ting.Up)

/* 字符串枚举 */
enum tinghua{Up='up',Down='down'} /* 字符串枚举每个成员必须有初始值 */
/* 推荐使用字面量类型+联合类型组合的方式 */
1
2
3
4
5
6
7
8
9

• 使用enmu关键字定义枚举。
• 约定枚举名称、枚举中的值以大写字母为开头。
• 枚举中多个值通过,隔开。
• 定义枚举后，使用枚举名称作为类型注解。

any类型

原则：不推荐使用any。因为当值的类型为any时，可以对该值进行任意操作，并且不会有代码提示(即使会存在错误)。

let a = null;  //any类型
let obj:any={x:0};
obj.num=100; //以下皆不会报错
obj();
let a;
function add(num,num1){}
1
2
3
4
5
6

其他隐式类型具有any类型的情况：

• 声明变量不提供类型也不提供默认值。
• 函数参数不加类型注解。

类型别名

可为任意类型取别名，简化类型的使用。

type NumStr = (number | string)[];   //使用type创建类型别名
let ting:NumStr = [1,'2',3]
1
2

类型推论

某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型。

类型推论前提：1.声明变量并初始化时(声明却未赋值则不行)；2.决定函数返回值时。

let age /*number*/ = 18;   //推荐：能省略就省略，充分利用TS类型推论的能力，提升开发效率
let arr /*number[]*/ = [1,2,3];
function ting/*string*/(num:number,str:string){
    return num+str;   
}
1
2
3
4
5

类型断言

类型太宽泛，列如：无法操作a标签中的href属性等，因此使用类型断言指定更加具体的类型。

let link = document.getElementById('link') as HTMLAnchorElement;  /* 推荐 */
let links = <HTMLAnchorElement>document.getElementById('link');   /* 不推荐 */
console.log(link.href)
1
2
3

• 可利用浏览器控制台，通过console.dir($0)打印当前元素。

typeof

可以在类型上下文中引用变量或属性的类型(类型查询)。

使用场景：根据已有变量的值，获取该值的类型从而引用(简化类型书写)。

let obj:{name:string;age:number}={
    name:'张三',
    age:10
}
function ting(val:typeof obj){
    console.log(val)
}
// ting(2)/* 错误 */
ting({name:'李四',age:10})   
1
2
3
4
5
6
7
8
9

可选属性

可选属性的含义是该属性可以不存在，使用?表示该属性可选。必选参数必须放置在可选参数之前

/* 可选参数 参数? 必选参数必须放置在可选参数之前 */
type Num = number;
type Str = string;
function ting(start:Num,end?:Str):void{  /* start 必选参数 end? 可选参数  */
    console.log(start,end);
}
ting(12,'17');
1
2
3
4
5
6
7