初识typescript（typescript入门）

一：什么是typescript？

typescript是一个 基于静态类型检查的强类型语言。我们也可以说是高级版的JavaScript。
增加代码的可读性和可维护性。便捷代码时候直接修改bug，

• 弱类型：JavaScript 是动态运行的弱类型语言。

var a =1;
a="今天有一点点糟糕";
// 就是说弱类型的我们可以重复赋值他的类型
//var声明的存在的变量提升

• 强类型：就是我们俗称的ts

let num: number = 2;
console.log(num);
//在我们ts中呢，我们在声明一个变量的时候，必须给他一个类型不然的话我们浏览器也是会报错，而且我们设置了一个类型之后就无法修改，修改也会报错。

二：安装

typescript是微软公司2014开发的。
我们的浏览器呢，是不能直接支持ts的，所以我们需要编译成js,才可以跑在浏览器。

2.1 安装typescript

   npm install -g typescript

2.2 把ts类型的编译成js

tsc  demo.ts

一旦编译成功，就会在相同目录下生成一个同名 js 文件，你也可以通过命令参数来修改默认的输出名称。比如：

 tsc --outfFile a.js demo.js

三：webpack集成ts

3.1安装typescript

npm install typescript ts-loader -D

3.2 配置ts-loader

{test:/\.ts$/,exclude: /node_modules/,use:['ts-loader']}

3.3创建tsconfig.json文件

tsc --init

3.4配置模块化引入文件的缺省类型

const config = {
    //指定模式：production-生产环境，development:开发环境
    mode: "development",
    //项目的入口文件
    entry: "./src/main.ts",
    output: {
        //设置项目的输出目录
        path: path.resolve(__dirname, "dist"),
        //输出的文件名
        filename: "bundle.js" //chunk
    },

    //webpack通过loader识别文件的匹配规则
    module: {
        rules: [
            {test:/\.ts$/,exclude: /node_modules/,use:['ts-loader']}
        ]

    },
    //配置模块化引入文件的缺省类型
    resolve: {
        extensions:['.js','.ts']
    },
    plugins: []

四：typescript语法格式：

4.1基本数据类型

支持所有的JS数据类型，还包括TS中添加的数据类型
JS基本数据类型有哪些：number,string,boolean,undefined,null

JS引用类型：Array,Object,function

TS不但有上面支持的类型外，还支持：元组，枚举，any（任意类型）,void（空）,never
代码举例：

let num: number = 1111;//数字
let str: string = 'forever';//字符串
let flag: boolean = true;//布尔
let un: undefined = undefined;//未定义
let nu: null = null;//空

//用let将arr定义成每一项都是number的[]即数组类型

//第一种定义数组方式
let arr: number[] = [55, 66, 77, 88];

//第二种定义数组方式
let arr2:Array<number>=[3,45,2,2]

注：通过给数组范型添加多类型，让数组支持多种数据格式
let arr2:Array<number | string | boolean>=[3,45,2,2,'hello',true]

/**
 * 元组：是规定元素个数和元素类型和元素顺序的数组
 * 元组不要越界访问
 */

let add: [string, number,number];

add= ['50', 20, 90];

console.log(add[0]);
console.log(add[1]);
console.log(add[2]);



 //定义了一个userRole类型的枚举

enum user {
    useradmin=666,
    press=888,
    develpment=999,
    num=123
}


enum price {
    incrementPrice=0,
    decrementPrice=1,
}

//使用userRole来定义枚举变量
let user1: user = user.press;

//any定义变量为任意类型
let t: any = 10;
t = 'hello'
t = true;

4.2 接口

接下来，我们通过一个接口来扩展以上实例，创建一个 interface.ts 文件，修改 index.html 的 js 文件为 interface.js。

interface.js 文件代码如下:

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;//问号表示的添加属性都可
 

function area(shape : Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared";
}
 
console.log( area( {name: "rectangle", width: 30, height: 15} ) );
console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );

接口可以作为一个类型批注。

编译以上代码 tsc interface.ts 不会出现错误，但是如果你在以上代码后面添加缺失 name 参数的语句则在编译时会报错：

console.log( area( {width: 30, height: 15} ) ); 
//这样的话就会报错。

今天先就分享这么多。。。。