TypeScript（上）

一、TypeScript简介

二、开发环境搭建

1.编写 

2.编译

官方也提供了一个在线开发 TypeScript 的云环境——TypeScript: 演练场 - 一个用于 TypeScript 和 JavaScript 的在线编辑器。

基于它，我们无须在本地安装环境，只需要一个浏览器即可随时学习和编写 TypeScript，同时还可以方便地选择 TypeScript 版本、配置 tsconfig，并对 TypeScript 实时静态类型检测、转译输出 JavaScript 和在线执行。

而且在体验上，它也一点儿不逊色于任何本地的 IDE，对于刚刚学习 TypeScript 的我们来说，算是一个不错的选择。

三、基础数据类型

1.JS的八种内置类型

 

let str: string = "jimmy";
let num: number = 24;
let bool: boolean = false;
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let big: bigint = 100n;
let sym: symbol = Symbol("me"); 

 

 

 

 

 

注意点：

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给其他类型。

// null和undefined赋值给string
let str:string = "666";
str = null
str= undefined

// null和undefined赋值给number
let num:number = 666;
num = null
num= undefined

// null和undefined赋值给object
let obj:object ={};
obj = null
obj= undefined

// null和undefined赋值给Symbol
let sym: symbol = Symbol("me"); 
sym = null
sym= undefined

// null和undefined赋值给boolean
let isDone: boolean = false;
isDone = null
isDone= undefined

// null和undefined赋值给bigint
let big: bigint =  100n;
big = null
big= undefined

如果你在tsconfig.json指定了"strictNullChecks":true ，null 和 undefined 只能赋值给 void 和它们各自的类型。

2.number和bigint

let big: bigint =  100n;
let num: number = 6;
big = num;
num = big;

会抛出一个类型不兼容的 ts(2322) 错误。

3其他类型

四、编译选项

 

 

 1.allowJs:是否对js文件进行编译

2.checkJs，removeComments，noEmit

3.noEmitOnError，strict，alwaysstrict，onImplicitAny，onImplicitThis，strictsNullChecks

 

 五、webpack

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

步骤：

  1. 初始化项目

     - 进入项目根目录，执行命令 

npm init -y

       - 主要作用：创建package.json文件

  2. 下载构建工具

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

       - 共安装了7个包

         - webpack

           - 构建工具webpack

         - webpack-cli

           - webpack的命令行工具

         - webpack-dev-server

           - webpack的开发服务器

         - typescript

           - ts编译器

         - ts-loader

           - ts加载器，用于在webpack中编译ts文件

         - html-webpack-plugin

           - webpack中html插件，用来自动创建html文件

         - clean-webpack-plugin

           - webpack中的清除插件，每次构建都会先清除目录

  3. 根目录下创建webpack的配置文件webpack.config.js

const path = require("path");
//引入Html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')      
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    
    //指定入口文件
    entry: "./src/index.ts",
    
    output: {
        //指定打包文件所在目录
        path: path.resolve(__dirname, "dist"),
        //打包后文件的文件
        filename: "bundle.js",
        
    },
    mode:'development', //设置开发环境
    
    //用来设置引用模块
    resolve:{
        extensions: [".ts", ".js"]
    },

    //指定webpack打包时要使用的模块
    module: {
        rules: [
            {
                test: /\.ts$/,
                use:  "ts-loader",
                exclude: /node_modules/
            }
        ],
    },
    //设置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]

}

 4. 根目录下创建tsconfig.json，配置可以根据自己需要

{
           "compilerOptions": {
               "target": "ES2015",
               "module": "ES2015",
               "strict": true
           }
       }

5. 修改package.json添加如下配置

 {
         ...略...
         "scripts": {
           "test": "echo \"Error: no test specified\" && exit 1",
           "build": "webpack",
           "start": "webpack serve --open "
         },
         ...略...
       }

6. 在src下创建ts文件，并在并命令行执行```npm run build```对代码进行编译，或者执行```npm start```来启动开发服务器

六、Babel 

 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。 

1. 安装依赖包：

     

npm i -D @babel/core @babel/preset-env babel-loader core-js

     - 共安装了4个包，分别是：

       - @babel/core

         - babel的核心工具

       - @babel/preset-env

         - babel的预定义环境

       - @babel-loader

         - babel在webpack中的加载器

       - core-js

         - core-js用来使老版本的浏览器支持新版ES语法

  2. 修改webpack.config.js配置文件

 

...略...
       module: {
           rules: [
               {
                   test: /\.ts$/,
                   use: [
                       {
                           loader: "babel-loader",
                           options:{
                               presets: [
                                   [
                                       "@babel/preset-env",
                                       {
                                           "targets":{
                                               "chrome": "58",
                                               "ie": "11"
                                           },
                                           "corejs":"3",
                                           "useBuiltIns": "usage"
                                       }
                                   ]
                               ]
                           }
                       },
                       {
                           loader: "ts-loader",
       
                       }
                   ],
                   exclude: /node_modules/
               }
           ]
       }

如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。