TypeScript基础（开发环境、基本数据类型、编译选项、TS使用webpack）

TypeScript

以JavaScript为基础构建的语言——一个JavaScript的超集

可以在任何支持JavaScript的平台中执行，TypeScript扩展了JavaScript并添加了类型

1、开发环境的搭建

1、下载安装nodejs

2、npm全局安装

npm i -g typescript

3、创建ts文件

4、使用tsc对ts文件进行编译

进入ts文件所在目录

执行命令： tsc xxx.ts

2、基本类型

1、类型声明

声明一个变量a,同时制定它的类型为number
let a: number;
a=10;
let b:string;
b="hello";

//声明完变量直接赋值
let c:boolean = false

// function sum(a,b){
//     return a + b;
// }

console.log(sum(123,456));
// console.log(sum(123,'456'));

function sum(a:number,b:number):number{
    return a+b
}
let result = sum(a:123 b:456);

//可以直接使用字面量进行类型声明
let a:10;
a=10;

//可以使用 | 来连接多个类型（联合类型）
let b :"male" | "female";
b = "male";
b = "female"


let c:boolean | string;
c = true;
c = 'hello';

//表示任意类型
// let d:any;
//隐式的any
let d;
//unknown表示未知类型的值
let e: unknown;

//d的类型是any，它可以赋值给任意变量
// s=d;
let s;
e = 'hello';
//unknown实际上就是一个类型安全的any，不能赋值给其他变量
if(typeof e === "string"){
    s = e;
}

2、函数类型

//void用来表示空，以函数为例，没有返回值的函数
function fn(): void{
    return null;
}
//never表示永远不会返回结果
function fn2(): never{
    throw new Error('报错了！');
}

3、类型断言

可以用来告诉解析器变量的实际类型

语法： 变量 as 类型、<类型>变量

s = e as string;
s = e;

4、对象

let a :object;
a = {};
a = function(){};
// {}用来指定对象中可以包含哪些属性
//语法：{属性名:属性值,属性名：属性值}
//属性名后加?，表示属性是可选的
let b : {name: string,age?:number};
b= {name: '天海', age:18};

//[propname:string]:any 表示任意类型的属性
let c: {name:string,[propname:string]:any};
c = {name:'地海',age:18,gender:'男'};

5、函数结构

//设置函数结构的类型声明：
// 语法：(形参:类型,形参:类型...) => 返回值
let d: (a:number,b:number) => number;

6、字符串数组

let e: string[]
e=['a','b','c']

7、数值数组

number[]表示数值数组

let f:number[];
let g:Array;
g = [1,2,3];

8、元组

固定长度的数组

let h:[string,string];
h=["hello",'abc'];

9、枚举类型

enum Gender{
    Male = 0,
    Famale = 1
}
let i:{name:string,gender:Gender};
i={
    name:'天海',
    gender:Gender.Male
}
console.log(i.gender===Gender.Male);

10、类型的别名

type myType = 1|2|3|4|5;
let k: myType;

3、编译选项

1、include

{
    //tsconfig.json是编译器的配置文件
    //include用来指定哪些TS文件需要被编译
    //路径：*表示任意目录
    //*表示任意文件
    "include": [
        "./src/**/*"
    ]
}

2、exclude

  //exclude不需要被编译的文件目录
    //默认值：["node_modules","bower_components","jspm_packages"]
        "exclude": [
        "./src/hello/**/*"
    ]

3、extends

定义被继承的配置文件

"extends":"./configs/base"

上述示例中，当前配置文件中会包含config目录下base.json中的所有配置信息

4、files

指定被编译文件的列表，只有需要编译的文件少时才会用到

示例

"files":[
    "cores.ts",
    "sys.ts",
    ...
]

5、compilerOptions

1、target

用来指定ts被编译为的ES的版本。

"target": "ES6"

2、moudle

moudle指定要使用的模块化的规范。

 "module": "es2015"

3、outDir

用来指定编译后文件所在目录

 "outDir": "./dist"

4、outFile

将代码合并为一个文件

设置outFile后，所有的全局作用域中的代码会合并到同一个中

 "outFile": "./dist/app.js"

5、allowJs

是否对js文件进行编译，默认是false

"allowJs": true

6、checkJs

是否检查js代码是否符合语法规范，默认false

"checkJs": false

7、removeComments

是否移除注释

"removeComments": false

8、noEmit

不生成编译后的文件

"noEmit": true

9、noEmitOnError

当有错误时不生成编译文件

"noEmitOnError": true

10、严格检查

 		//所有严格检查的总开关
        "strict": false,
        //用来设置编译后的文件是否使用严格模式，默认false
        "alwaysStrict": true,
        //不允许隐式的any类型
        "noImplicitAny": true,
        //不允许不明确类型的this
        "noImplicitThis": false,
        //严格检查空值
        "strictNullChecks": false

4、TS使用webpack

cnpm i -D webpack-cli typescript ts-loader

自动生成Html的插件

cnpm i -D html-webpack-plugin

webpack服务器

cnpm i -D webpack-dev-server

清除旧的dist留新的

cnpm i -D clean-webpack-plugin

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',
    //指定webpack打包时使用的模块
    module:{
        //指定加载的规则
        rules:[
            {
                //test指定的是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:[
                    
                    'ts-loader'
                ],
                //要排除的文件
                exclude:/node-modules/

            }
        ]
    },
    //配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title:"这是一个title",
            template:"./src/index.html"

        })
    ],
    //用来设置引用模块
    resolve:{
        extensions:['.ts','.js']
    }

}