高级TypeScript

1、联合类型和类型保护

      联合类型：一个变量可能有两种或两种以上的类型。

      类型保护：联合类型的具体实例需要加以判断

2、枚举类型

3、泛型：泛指的类型，使用<>来定义

    函数泛型

//  定义泛型

function join<T>(first: T, second: T) {

    return `${first} ${second}`

}

//  定义多个泛型

function join2<T, P>(first: T, second: P) {

    return `${first} ${second}`

}

console.log(join<string>("hello", 'desx'));             //  hello desx

console.log(join2<string, number>("hello", 34));   //  hello 34

//  泛型中数组的使用

function myFun<T>(params: T[]) {

    return params;

}

console.log(myFun<string>(['hello', 'world']))     // [ 'hello', 'world' ]

     类中泛型

interface Girl {

    name: string

}

class SelectGirl<T extends Girl> {

    constructor(private girls: T[]) { }

    getGirl(index: number): string {

        return this.girls[index].name;

    }

}

const selectGirl = new SelectGirl([

    { name: "小红" },    { name: "小兰" },    { name: "小紫" }

]);

console.log(selectGirl.getGirl(1));    //小兰

4、搭建浏览器开发环境

    4.1、新建文件夹，拖入编译器中，打开终端并运行 npm init -y，创建package.json文件。

    4.2、终端运行 tsc -init，生成tsconfig.json文件。

    4.3、新建src和build文件夹，再建一个index.html文件。

    4.4、在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。

    4.5、配置tsconfig.json文件，设置outDir和rootDir

            "outDir": "./build",    "rootDir": "./src", 

    4.6、编写index.html，引入<script src="./build/page.js"></script>

    4.7、编写page.ts，加入一句输出console.log('google.com')，制台输入tsc生成js文件。

    4.8、到浏览器中查看index.html文件，按F12可以看到google.com，大功告成！

5、使用Parce打包

    5.1、新建文件夹，拖入编译器中，打开终端并运行 npm init -y，创建package.json文件。

    5.2、终端运行 tsc -init，生成tsconfig.json文件。

    5.3、配置tsconfig.json文件，设置outDir和rootDir

            "outDir": "./build",    "rootDir": "./src", 

    5.4、新建src和build文件夹，再在src目录下创建index.html和page.ts文件。

    5.5、编写index.html，引入<script src="./page.ts"></script>

    5.6、编写page.ts文件。 const teacher:string="nancy"  console.log(teacher)

    5.7、安装parcel：yarn add --dev parcel@next

    5.8、修改package.json的test属性  "test": "parcel ./src/index.html"

        终端会有个地址：http://localhost:1234

        把地址放到浏览器上，可以看到浏览器的控制台会输出nancy。

6、在TypeScript中使用JQuery

        直接在index.html加入<script>标签，代码如下

            <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

        在page.ts中编写如下代码

declare var $: any;

const teacher:string="nancy"

console.log(teacher)

$(function(){

    alert('hello nancy')

})

        yarn test进行编译和启动服务，在地址栏输入了http://localhost:1234,可以看到效果

安装jquery

    用 npm 进行安装： npmi @types/jquery

    直接在page.ts文件的头部加入这句代： declarevar$:any;