TypeScript简介（更新中...）

一只阮码猿
87 阅读5分钟

背景介绍：

TypeScript，给予约束，便于维护！！！

什么是TS？
  • 以JavaScript位基础构建的语言。
  • 一个JavaScript的超集。
  • TypeScript扩展了JavaScript，并添加了类型。
  • 可以在任何支持JavaScript的平台中执行（TS不能被JS解析器直接执行，运行时需将TS转为JS）。
TS有什么优势？
  • 给变量赋予约束，降低开发中出现的问题。
  • 易维护，适合开发大型项目。
TS有什么缺点？
  • 相较于js束手束脚、前期代码量大一点。
为什么用TS？
  • 解决JS的痛点（安全隐患问题、维护困难问题）
怎么用TS？
  1. 下载并安装Node.js。
  2. 安装TypeScript。
npm i -g typescript
  1. 创建ts文件。
  2. 执行ts文件（在ts文件所在目录，执行命令：tsc xxx.ts）。

TS的基本类型

  • 类型声明
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{    // 参数类型 和 函数return返回值类型
    ···
}
  • 类型：
类型例子描述
number1，-33，2.5数字
string'hi'，"hi"字符串
booleantrue，false布尔值
字面量联合类型(let a: booleanstring)限制变量的值就是该字面量的值
any*任意类型【隐式，ts会直接跳过这块编译，而且赋值给别的变量，便会祸害别的变量】
unknown*类型安全的any【只祸害自己】
void空值（undefined）没有值（或undefined）【多用于函数return返回值】
never没有值不能是任何值【多用于函数return返回值】
object{ name: "孙悟空" }任意的js对象
array[ 1, 2, 3 ]任意的js数组
tuple[ 4, 5 ]元素，TS新增类型，固定长度数组
enumenum{ A, B }枚举，TS中新增类型
    • 字面量（可以用字面量去指定变量的类型，通过字面量可以确定变量的取值范围）
let color: 'red' | 'blue' | 'blank';
let num: 1 | 2 | 3 | 4 | 5;
    • unknown
let e: unknown;
e = 10
e = '略略略'
let s: string;
s = e;    // s会报警告，unknown是安全的any，不能赋值给其他的变量
// 解决：
if (typeof e === 'string') {
    s = e;
}
或
// ts中的 类型断言。语法：变量 as 类型   <类型>变量
s = e as string;
s = <string>e;
    • void
function fn(): void{
    console.log("我没有return返回值！！！");
}
    • never（很少用）
function fn(): never{
    throw new Error("value Error：值错误！！！");
}
    • object
let a: object;    // 这种类型限制没啥用
a = {}  或  a = function() {}
// 【对象】语法：{ 属性名: 属性值, 属性名: 属性值 };    属性名后面加?，表示属性是可选的
let b: {name: string, age?: number}    // 此处name: string为必选值，如果b = {}则会报警告
b = {name: '孙悟空', age: 18}
// 【对象】语法：[ propName: string ]: ang  表示任意类型的属性
let c: {name: string, [ propName: string ]: any};    // propName为随意起的名字，也可以是xxx
c = {name: '孙悟空'， age: 18, sex: '男'};
// 【函数】设置函数结构的类型声明 的语法：(形参: 类型, 形参: 类型...) => 返回值
let d: (a: number, b: number) => number
d = function(n1: number, n2: number): number{
    return n1 + n2;
}
    • array
// number[]表示number数组    2种声明方式：类型[] 或 Array<类型>
let a: number[]；    或    let a: Array<number>；
a = [1, 2, 3]；
    • tuple，固定长度的数组
// 语法：[类型, 类型, 类型]
let a: [string, string];
a = ['1', '2'];
    • enum
// 语法：[类型, 类型, 类型]
enum Sex {
    Male: 0,
    FeMale: 1
}
let a: {name: string, sex: Sex}
a = {name: '孙悟空', sex: Sex.Male}
    • 其他（& 和 别名）
// &
let a = {name: string} & {age: number}
a = {name: '孙悟空', age: 18}
// 别名
type n = 1 | 2 | 3 | 4 | 5
let k: n;
let l: n;
k = 1;

TS的编译选项

单文件编译命令
  • 编译为js文件：tsc 文件名.ts
  • 编译为js文件＋监听：tsc 文件名.ts -w
多文件编译命令

  • 创建tsconfig.json文件

    • 输入tsc，文件夹下所有ts文件都编译为js文件
    • 输入tsc -w，文件夹下所有ts文件都编译为js文件+监听

  • tsconfig.json是什么？

    • tsconfig.json是ts编辑器的配置文件（里面可以写注释），ts编辑器可以根据它的信息来对代码进行编译。

    • 配置选项：

      • include（包含，用来指定哪些ts文件需要被编译）

        • 定义希望被编译文件所在的目录
        • 例如：
// **表示任意目录，*表示任意文件
"include": [
    "./src/**/*"        // 表示根目录下的src文件下的任意目录的任意文件
]

      • exclude（不包含，不需要被编译的文件目录）

        • 定义不希望被编译文件所在的目录
        • 默认值：["node_modules", "bower_components", "jspm_packages"]]
        • 例如：
"exclude": [
    "./src/main/**/*"        // 表示根目录下的src文件下的 main文件不被编译
]

      • extends（基本不用，配置文件直接都写在了tsconfig.json文件中，没必要再另辟新径）

        • 定义被继承的配置文件（相当于引入一个外部的ts配置文件）
        • 例如：
"extends": "./config/base"

      • files（基本不用，ts放文件夹内用include即可）

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

      • 例如：

"files": [
    "index.ts",
    "home.ts"
]

      • compilerOptions

        • 编译选项是配置文件中重要且复杂的部分
        • 其中包含多个子选项，用来完成对编译的配置
        • 例如：
"compilerOptions": {
    "target": "ES6",
    "lib": ["ES6, dom"] ,
    "module": "ES6",
    "outDir: "./dist",
    "outFile": "./dist/app.js"
}

          • target

            • 设置ts代码编译的目标版本（用来指定ts被编译的ES版本）

          • lib

            • 指定代码运行时所包含的库（宿主环境），指定要使用的模块化标准

          • module

            • 设置编译后代码使用的模块化系统

          • outDir

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

          • outFile

            • 所有的全局作用域的代码会合并到同一个文件中

          • allowJs

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

          • checkJs

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

          • removeComments

            • 是否移除注释，默认false

          • noEmit（不常用）

            • 不生成编译后的文件，默认false

          • noEmitOnError

            • 当有错误时不生成编译后的文件，默认false

          • alwaysStrict

            • 用来设置编译后的文件是否使用严格模式，默认false

          • noImplicitAny

            • 不允许隐式的any，默认false

          • noImplicitThis

            • 不允许不明确类型的this

          • strictNullChecks

            • 严格的检查空值

          • strict

            • 所有严格检查的总开关（包含alwaysStrict，noImplicitAny等）
avatar
文章
阅读
粉丝