TypeScript它不香吗

发表于 | 阅读次数:

TypeScript 它不香吗

ts是js的超集，意味着js本身的语法在ts里面也能跑的通。
ts一方面是对js加上了很多条条框框的限制，另一方面是拓展了js的一些能力，就像es6提供了那么多神奇的语法糖一样。
只要按照一定的规则去书写js，就能享受到ts带来的好处。
真香警告

安装

  1. 使用命令全局安装typeScript

    1
    npm i -g typescript

  2. 到指定项目下，使用命令初始化，创建tsconfig.json文件

    1
    tsc -init

  3. 可以在tsconfig.json文件中修改或删除相应配置

    常用配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "compilerOptions": {
       "target": "es5", // 编译为何种规范，一般设置为 ES5 或者 ES2016/2017
       "noImplicitAny": false, // 在表达式和声明上有隐含的 any类型时报错。
       "module": "amd", //指定生成哪个模块系统代码： "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"。只有 "AMD"和 "System"能和 --outFile一起使用。"ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。
       "removeComments": false,// 删除所有注释，除了以 /!*开头的版权信息。
       "sourceMap": false, // 生成相应的 .map文件。
       "outDir": "build",// 你要生成js的目录,可自由命名
       "alwaysStrict": true, // 打开严格模式 (‘use strict’)
      }
    }

  1. vscode当编写好一个ts文件的时候，按下 Ctrl+shift+B快捷键会进行编译，初次编译会选择编译模式（自行编写.ts文件测试），选择监视模式，这样就会自动生成一个对应的js文件。

    1
    2
    3
    tsc hello.ts -watch
    //或者
    tsc hello.ts -w

基础

在TypeScript中，boolean是JavaScript中的基本类型，而Boolean是JavaScript中的构造函数。new Boolean(1 )返回的是一个Boolean对象，直接调用Boolean(1)返回的是一个boolean类型。除了null和undefined外，同上。

空值

JavaScript中没有空值的概念（void），在typescript中，用void表示没有任何返回值的函数。

undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量，而 void 类型的变量不能赋值给 number 类型的变量。

类型推论

TypeScript会在没有明确的指定类型的时候推测一个类型，这就是类型推论。

1
2
3
4
5
let num = 12
num = 'aaa'

// hello.ts:24:1 - error TS2322: Type '"aaa"' is not assignable to type 'number'.
// 不能将类型“"aaa"”分配给类型“number”。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

联合类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

1
2
3
4
5
6
7
8
function getLength(param: string | number): number {
    return param.length
}
// hello.ts:29:18 - error 
// TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.
// 类型“string | number”上不存在属性“length”。
// 类型“number”上不存在属性“length”。ts(2339)

上例中，length 不是 string 和 number 的共有属性，所以会报错。

访问 string 和 number 的共有属性是没问题的。比如toString()方法。

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型，如果推断出的类型没有某个属性或者方法时候，就会报错

1
2
3
4
5
6
7
let num : string | number
num = 'two'
console.log(num.length)
num = 2
console.log(num.length) // 报错
//hello.ts:27:18 - error TS2339: Property 'length' does not exist on type 'number'.
// 类型“number”上不存在属性“length”。ts(2339)