TypeScript

说明

TypeScript是JavaScript超集，它具备静态类型分析，能够根据类型在静态代码的解析过程中对ts代码进行类型检查，从而保证类型的一致性。同时TypeScript的代码一定会经过编译为JavaScript代码，才能运行在主流浏览器上。

TypeScript无论有多么庞大的语法体系，多么强大的类型检查，最终的产物都是JavaScript（主流的ts编译方案有2种，分别是官方tsc编译、babel+ts插件编译）。

TypeScript中的模块化，不能和JavaScript中的模块化混为一谈。JavaScript中的模块化方案很多（es6、commonjs、umd等等），所以TypeScript本身在编译过程中，需要指定一种JavaScript的模块化表达，才能编译为对应的代码。也就是说，在ts中的import/export，不能认为和es6的import/export是一样的，他们是完全不同的两个体系，只是语法上类似而已。

环境搭建

下载node

已下载也可以升级npm install -g npm

 D:\workspace\vueweb>npm i -g typescript

D:\workspace\vueweb>tsc -v
Version 4.8.4

类型使用

注意：以下示例都是在*.ts文件中操作。

 

  

 

 

 

// any 表示任意类型，相当于关闭ts类型检测，使用ts时不建议使用any
// let d; 如果不指定类型，则TS解析器会自动判断变量的类型为any(隐式any)
let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

// unknown 表示未知类型 和 any 是有区别的，any会改变被赋值的变量类型

 

 

let a: object;
a = {}
a = function (){

}
// 用来指定对象中包含哪些属性
let b: {name: string};
b = {name:"张三"}

 

/**
 * 数组的类型声明
 */
let f:number[];
let g: Array<number>;
g = [1,2,3];

/**
 * 枚举
 */
enum Gender{
    Male,
    Female
}
let m:{name:string,gender: Gender}
m = {
    name:"",
    gender:Gender.Male
}

 编译

创建tsconfig.json(ts编译器的配置文件，根据它的信息来对代码进行编译），执行tsc -w

{
    // 指定需要编译的文件 ** 任意目录  * 任意文件
    "include": ["./*"],
    // 不需要被编译的文件目录 如：[node_modules,bower_components]
    "exclude": [],
    // 定义被继承的配置文件
    "extends": "",
    // 指定被编译的文件列表，只有被编译的文件少量的时候才会用到
    "files": [],
    "compilerOptions": {
        // 指定被编译为的版本 ES3默认、ES2020、ESNext最新
        "target": "ES6",
        // 指定要使用的模块化的规范 推荐用es6和es2015一样，commonjs
        "module": "ES6",
        // 用来指定项目中要使用的库
        "lib": [],
        // 用来指定编译后文件所在的目录
        "outDir": "./dist",
        // 将所有的全局作用域中的代码合并为一个文件
        "outFile": "./dist/app.js",
        // 是否对js进行编译，默认是false
        "allowJs": false,
        // 是否检查js代码是否符合语法规范，默认是false
        "checkJs": false,
        // 是否移除注释
        "removeComments": false,
        // 不生成编译后的文件
        "noEmit": false,
        // 当有错误不生成编译后的文件
        "noEmitOnError": false,
        // 是否启用严格模式
        "alwaysStrict": false,
        // 不允许隐式的any类型
        "noImplicitAny": true,
        // 不允许不明确类型的this
        "noImplicitThis": true,
        // 严格检查空值
        "strictNullChecks": true,
        // 所有严格检查的总开关，开着，前面有些就可以不用配置了
        "strict": true

    }

}

webpack

详情可以学习webpack/babel/es/vue等

D:\workspace\vuelearn\webpack>npm init -y
Wrote to D:\workspace\vuelearn\webpack\package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

D:\workspace\vuelearn\webpack>cnpm i -D webpack webpack-cli typescript ts-loader
√ Installed 4 packages
√ Linked 126 latest versions
√ Run 0 scripts
anti semver webpack@5.74.0 › @types/eslint-scope@3.7.4 › @types/estree@* delcares @types/estree@*(resolved as 1.0.0) but using ancestor(webpack)'s dependency @types/estree@^0.0.51(resolved as 0.0.51)
anti semver webpack@5.74.0 › @types/eslint-scope@3.7.4 › @types/eslint@8.4.10 › @types/estree@* delcares @types/estree@*(resolved as 1.0.0) but using ancestor(webpack)'s dependency @types/estree@^0.0.51(resolved as 0.0.51)
√ All packages installed (133 packages installed from npm registry, used 6s(network 6s), speed 2.9MB/s, json 130(2.55MB), tarball 14.89MB)

【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎

SCSS => CSS

sass(scss新的) 、less、stylus

增加了变量、嵌套等语法，对css增强

sass-loader sass

Babel

把js最新的语法，转换成老的ES5、ES3等语法，可以用Babel转换每年新增的语法到老浏览器支持

babel-loader @babel/core @babel/preset-env