TypeScript

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# 1. 简介

1. 以 JavaScript 为基础构建的语言；一个 JavaScript 的超集；可以在任何支持 JavaScript 的平台中执行，TS 不能被 JS 解析器直接执行，需要编译转换为 JavaScript；typescript 扩展了 JavaScript，并且添加了类型。
2. typescript 增加了类型、支持 ES6 新特性、强大的开发工具、添加 ES 不具备的新特性、丰富的配置选项

# 2. 搭建 TS 开发环境

1. 下载 node
2. 安装 node node -v
3. npm 全局安装 ts npm i typescript -g
4. 检查 typescript 版本 tsc --version

# 3. 类型声明

1. 基本类型 (小写)

   1.number、string、boolean三种类型
   let bb:number;
   //TS具有自动类型判断机制，当变量和赋值同时进行时可以省略类型声明
   let aa:string = 'hello';
   let cc:boolean = true;
   function(参数1:类型,参数2:类型):类型{
   	...
   }

2. 字面量类型 (联合类型)

   let a:'test' | 'demo';
   let b: boolean | number;
   b = true;
   b = 12

3. any (任意类型): 相当于关闭 TS 的类型检测

   let a;（隐式）
   let b:any;（显式）
   以上两种类型均是any类型

4. unknown (未知类型)

   1.any赋值问题
   let a:any;
   let b:string;
   b = a;//a是any类型，它可以赋值给任意变量（谁碰any谁变）
   2.unknown赋值问题
   let a:unknown;
   let b:string;
   b = a;//报错，unknown实际上是类型安全的any，unknown类型的变量，不能直接赋值给其他变量
   可以使用类型断言处理报错[1.添加条件 2.类型断言]
   3.

5. void (用来表示空，以函数为例，表示没有返回值的函数)

   function fn():void{
     return unll/underfined
   }

6. never (表示永远不会返回结果)

   function fn():never{
     ...
   }

7. object

   1.let a:object;
   	a = {}
   2.{}用来指定对象中可以包含哪些属性
   	语法:{属性名:属性值,属性名:属性值}
   	在属性名后边加上?，表示属性为可选的
   	let b:{name:string,age?:number}
   	b = {name:'测试',age:18}
   3.定义对象:[属性名:类型(一般为string)]:类型(一般为any)
   	t c:{name:string,[propName:string]:any};
   	c = {name:'测试',age:18,gender:'男'};
   3.定义函数:设置函数结构的类型声明
   	语法:(形参:类型,形参:类型...) => 返回值
     let d:(a:number,b:number) =>number

8. array

   数组的类型声明
   1.类型[]
   	1.1 string[] 表示字符串数组
     let a:string[];
   	a = ['a','b','c'];
   	1.2 number[] 表示数值数组
     let b:number[];
   	b = [1,2,3];
   2.Array<>
     let aa:Array<number>;
     aa = [1,2,3];

9. tuple (元组): 固定长度的数组

   1. 语法：[类型，类型，类型]

   let test:[string,string];
   test = ['hello','hello'];

10. enum (枚举)[常用于选择项]

    enum Gender{
      Male = 1,
      Female =0
    }
    let obj:{name:string,gender:Gender}
    obj = {
      name:'悟空',
      gender:Gender.Male
    }
    console.log(obj.gender===Gender.Male);

11. 类型断言

    1.语法1:变量 as 类型 
    2.语法2:<类型> 变量

12. 补充

    1. & 同时

    let j:{name:string} & {age:number}
    j = {name:'悟空',age:18}

    2. 类型的别名

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

# 4. 编译选项

1. tsc 文件名.ts -w ：自动监视文件变化

2. tsconfig.json 文件配置

   {
     // tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
     // 用来指定需要编译的ts目录及文件
     // 路径：** 表示任意目录，* 表示任意文件
     "include": [
       "./test.ts"
     ],
     // 用来指定不需要编译的ts文件
     // 默认值：['node_modules','bower_components','jspm_packages']
     "exclude": [
       "./demo.ts"
     ],
   
     // 用来继承其他的配置文件 
     "extends": "./tsconfig.json",
   
     // 用来指定需要编译的ts文件
     "files": [
       "./test.ts"
     ],
   
     // 编译选项，对编译器的配置
     "compilerOptions": {
       // 项目选项
       // 设置ts代码编译的目标版本
       "target": "ES6",
       // 指定要使用的模块化规范
       "module": "ES6",
       // 用来指定项目中要使用的库
       "lib": [
         "ES2015",
         "DOM"
       ],
       // 用来指定编译后文件所在的目录
       "outDir": "./dist",
       // 将代码合并为一个文件，所有全局作用域中的代码会合并到同一个文件里
       // "outFile": "./dist/test.js"
   
       // 是否对js文件进行编译，默认值为false
       "allowJs": false,
       // 是否检查js代码符合语法规范，默认值为false
       "checkJs": false,
       // 是否在文件编译后移除注释
       "removeComments": false,
       // 是否生成编译后的文件
       "noEmit": false,
       // 代码存在错误时不生成编译后的文件
       "noEmitOnError": false,
       // 所有严格检查的总开关
       "strict": false,
       // 用来设置编译后的文件是否使用严格模式，默认为false
       "alwaysStrict": true,
       // 不允许隐式的any类型
       "noImplicitAny": true,
       // 不允许类型不明确的this
       "noImplicitThis": true,
       // 严格检查空值
       "strictNullChecks": true
     }
   }