TypeScript初体验（一）

1、安装TypeScript

npm install -g typescript

2、检查是否安装成功

tsc -V 

3、手动编译代码

tsc helloworld.ts

输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。

在命令行上，通过 Node.js 运行这段代码：

node helloworld.js

4、简化运行TS的步骤

使用  ts-node  包，直接在Node.js中执行TS代码

安装命令

npm i -g ts-node

使用方法：

ts-node hello.ts

原理：ts-node命令在内部偷偷的将TS->JS，然后，再运行JS，此命令不会生成JS文件，也不会修改对应的JS文件里的内容

5、类型注解

为变量添加约束，约定了什么类型，就只能给变量赋值该类型的值，否则就会报错。

示例代码：

let age: number = 18

代码中的 : number 就是类型注解

6、常用基础类型

JS已有类型：

原始类型：number/string/boolean/null/undefined/symbol
对象类型：object（包括数组、对象、函数等对象）

TS新增类型

联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等

7、原始类型

let age: number = 18
let myName: string = '在熙'
let isLoading: boolean = false
let a: null = null
let b: undefined = undefined
let c: symbol = Symbol()

8、数组类型

let num: number[] = [1,2,3]    //推荐
let num4: boolean[] = [false,trun]
let num2: Array<string> = ['a','b','c']   //不推荐
let num3: Array<number> = [1,2,3]

数组中有多种类型，使用到TS中的联合类型   |（竖线）

let arr: (number | string)[] = [1,'a',3,'f']

9、类型别名

为任意类型起别名，简化该类型的使用

用法：使用type关键字来创建类型别名

           类型别名可以是任意合法的变量名称

           创建类型别名后，直接使用该类型别名作为变量的类型注解即可

代码示例：

type CustomArray = (number | string)[]
let arr: CustomArray = [1, 'a', 5, 'e']
let arr2: CustomArray = [1,2,3,'w']

10、函数类型

实际上指的是：函数参数和返回值的类型

单独指定参数和返回值的类型：

function add(num1: number, num2: number): number {
    return num1 + num2
}
const add2 = (num1: number, num2: number): number => {
    return num1 + num2
}

同时指定参数、返回值的类型：

const add3: (num1: number,num2: number)=> number = (num1,num2) => {
    return num1 + num2
}

注意：这种形式只适用于函数表达式

如果函数没有返回值，那么，函数返回值类型为   : void

function greet(name: string): void{
    console.log('我是'+name);
}

可选参数：在可传可不传的参数名称后面添加?（问号）

注意：可选参数只能出现在参数列表的最后

function mySlice(num?: number,num2?: number): void{
    console.log(num,num2);
}
mySlice(1,3)

11、对象类型

let person: { name: string; age: number; sayHi(): void; greet(name: string): void} = {
    name: '张三',
    age: 18,
    sayHi() { },
    greet(name){}
}

多行可以不用加分号分隔

let person: {
    name: string
    age: number
    sayHi: () => void
    greet(name: string): void
} = {
    name: '张三',
    age: 18,
    sayHi() { },
    greet(name){}
}

可选属性：在属性名称后面添加?（问号），与函数的语法一致

function myAxios(config: { url: string; method?: string }) { }
myAxios({
    url: ''
})

12、接口

当一个对象类型被多次使用时，一般会使用接口（interface)来描述对象的类型，达到复用的目的

用法：

1、使用interface关键字来声明接口

2、接口名称可以是任意合法的变量名称

3、声明接口后，直接使用接口名称作为变量的类型。

4、因为一行只有一个属性类型，所以属性类型后没有分号

 代码示例：

interface IPerson {
    name: string
    age: number
    sayHi():void
}
let person2: IPerson = {
    name: '张三',
    age: 18,
    sayHi() { }
}

interface（接口）和type（类型别名）的对比：

相同点：都可以给对象指定类型

不同点：

        接口，只能为对象指定类型

        类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

 如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承（extends）来实现复用。

代码示例：

interface Point2D { x: number; y: number }
interface Point3D extends Point2D { z: number }
let p3: Point3D = {
    x: 1,
    y: 2,
    z: 3
}

13、元组

元组类型是另一种类型的数组，他确切的知道包含多少个元素，以及特定索引对应的类型

代码示例：

let position: [number, number] = [30, 29]
let og: [number, string] = [1,'e']

14、类型推论

TS的类型推论机制会帮助提供类型，以下两种场景类型注解可以省略不写：

1、声明变量并初始化时

2、决定函数返回值时

代码示例：

let age = 18

function add(num1: number, num2: number){
    return num1 + num2
}

15、类型断言

解释：

1、使用as关键字实现类型断言

2、关键字as后面的类型是一个更具体的类型

3、查看元素的类型：在浏览器控制台，通过console.dir($0)打印DOM元素，在属性列表的最后面可以看到该元素的类型

 代码示例：

const alink = document.getElementById('link') as HTMLAnchorElement