TypeScript

TS

介绍

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。

TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript的语法不会将任何JavaScript代码视为错误。这意味着您可以获取任何有效的JavaScript代码并将其放入TypeScript文件中，而不必担心它的确切编写方式。

TypeScript是JavaScript的运行时，带有编译时类型检查器。

开发环境：

webpack中配置 typescript

  1. 安装： npm install --save-dev typescript ts-loader

  2. 修改目录结构和配置文件

    • webpack-demo
      • package.json
      • + tsconfig.json
      • webpack.common.js
      • webpack.dev.js
      • webpack.prod.js
      • /src
        • index.js
        • + index.ts
      • /node_modules

在webpack 添加两个文件 tsconfig.json 和 index.ts

  1. tsconfig.json

    ts基本的配置，来支持 JSX，并将 TypeScript 编译到 ES5……

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true
      }
    }

  2. webpack.common.js 中配置 loader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    module.exports = {
        // 入口
        entry: {
            // ts 入口文件
            index: './src/index/index.ts',
        },
        // TS
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
        },
        // loader 配置
        module: {
            rules: [
                // ts loader 配置
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                },
            ]
        },
    };

语法

文件类型

typescript 文件类型为 .ts

数据类型

变量语法

  1. let [变量名] : [类型] = 值;

  2. let [变量名] : [类型];

  3. let [变量名]

  4. let [变量名] : [类型1 | 类型2];

    使用 | 可以为变量设置多个类型。

    1
    2
    3
    4
    let value:string | number
    value = 123
    value = 'hello'
    // value = true //报错

函数语法：

为函数中的参数与返回值设置类型检测

1
2
3
4
5
6
7
function fun(arg1:number , arg2:string):object{
    return {
        result: arg1 + arg2
    }
}

let result:object = fun(123, '456')

推论类型

在声明变量时没有指定变量的数据类型，在给其赋值时会将值的类型作为变量的数据类型。

1
2
// value的类型为数字类型
let value = 123

基本数据类型

1
2
3
4
5
6
7
let num:number // 数字类型
num = .78

let str:string = 'hello' //字符串类型
str = "ts"

let boo:boolean = true //布尔类型

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量。

1
2
3
4
let value:any 
value = 123
value = 'hello'
value = true

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组

1
2
3
4
5
// 方式一
let arr:number[] = [1,8,3,5] //数组
// 方式二
let arr2: Array<string> = ['hello','123'] //数组泛型

数组 元组（ Tuple）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

1
2
3
4
let arr3:[string, number]  //元组
arr3 = ['hello', 123] //正确
// arr3 = ['hello', 'ts'] //错误 ，因为 'ts'不能幅值给 number
// console.log( arr3[4] ) // 下标越界，报错。

对象(Object)

1
2
3
4
5
let obj:object
obj = {
    name:'hello',
    num:123
}

Null 和 Undefined

1
2
let n1:undefined = undefined
let n2:null = null

默认情况下null和undefined是所有类型的子类型,可以把 null和undefined赋值给所有的类型：

1
2
3
4
5
6
7
8
9
10
11
let num:number = 123
num = undefined
num = null

let str:string = 'hello'
str = undefined
str = null

let boo:boolean = true
boo = undefined
boo = null

Void

表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void

1
2
3
4
function fun2():void{
    // return '' // 报错
    return  //正确
}

never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

枚举 （enum）

enum类型是对JavaScript标准数据类型的一个补充。

  1. 默认情况下，从0开始为元素编号

    1
    2
    3
    enum Color {Red, Green, Blue}
    let c: Color = Color.Red;
    console.log( c ) // 输入： 0

Web API 接口参考