TypeScript - 初建 - 编译 - 类型系统

查看更多资源

1. 新建项目：

// 新建 项目 typescript-demo

npm init 
npm i -D typescript

2. 编译.ts文件：

在项目 typescript-demo下新建 src/1.ts 文件，通过以下方法编译 src/1.ts ：

// 通过命令方式 编译 src/1.js

// 命令一：将会在当前目录下生成.js文件
.\node_modules\.bin\tsc .\src\1.ts

// 命令二：在指定目录下生成.js文件
.\node_modules\.bin\tsc .\src\1.ts --outDir .\dist

// 更多 命令  参考 typescript 文档

// 通过配置文件方式 编译 src/1.ts 文件

// 1. 新建 tsconfig.json 文件，配置如下 ：（详情 见官方文档）

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "es5",
        "outDir": "./dist"
    },
    "include": [
        "./src/**/*"
    ]
}

// 2. 执行 命令
.\node_modules\.bin\tsc

// 自动编译 
.\node_modules\.bin\tsc --watch

// tsconfig.json 配置说明：

1. module: 指定项目所使用的模块系统  如 amd commonjs 等，
2. target: 指定编译后的js语言，如 es5 es6 es2015 等，
3. outDir: 指定编译后文件目录，
4. include： 指定需要进行编译的文件路径，
             "./src/*" ：指src目录下的所有.ts文件，
             "./src/**/*" ：指src目录下的所有.ts文件,以及src目录下所有子目录中的.ts文件，

// 更多 配置  见官方文档 

3. 直接运行.ts文件：

// 安装 依赖
npm i ts-node

// 命令 ： 控制台 会直接 输出 1.ts 运行结果
 .\node_modules\.bin\ts-node .\src\1.ts

4. 类型系统：

1. TypeScript 定义的类型包括：
	- 数字、字符串、布尔值
	- null、undefined
	- 数组、元组、枚举
	- void、any、Never

2. 类型
	string、number、boolean：基本类型 （小写）
	String、Number、Boolean：对象类型 （大写）

	注意：
	    （1）基本类型可以赋值给对应包装对象；
	    （2）包装对象不可以赋值给对应基本类型

字符串

let b:string = 'china'; // ok
let c:String = 'china'; // ok
let d:String = new String('china'); // ok
let e:string = new String('china'); // error

联合类型： 多个类型中的一个，或的关系

let a: string|number;  // 或
a = 'm';
a = 1;
a = true;

交叉类型：  多个类型的叠加，并且的关系

let b: string&number; // 且

数组

/**
 * 1. 具有相同类型的一组有序数据的集合
 * 2. 声明数组同时要确定数组存储的数据的类型
 * 3. 同一个数组中的数据只能有一种类型
 */
  
let arr1: number[];
arr1.push(1);  // ok
// arr1.push('1'); // error

// 泛型

let arr2: Array<number>;
arr2.push(1);  // ok
// arr2.push('1'); // error

元组

/**
 * 与数组类似，但是可以存放多种不同类型
 */

let data1: [number, string, boolean];

// 注意：顺序要对应

data1[0] = 1;
data1[1] = '1';
data1[2] = true;

// 对于超出（越界）部分，采用的是联合类型，或

data1[3] = false;   //存储number，string，boolean都可以，但是不能是其他的
// data1[4] = {};   //这样是不允许的

枚举

// 使用枚举可以为一组数据赋予友好的名字

enum Gender {Male, Female}; // 等同于 enum Gender {Male=0, Female=1};

if (Gender.Male) {}

enum Gender {Male=1, Female};   //Female会从2开始

其他类型
    null、undefined、void、any、never

let a: undefined;
a = undefined;

1. 可以把null、undefined赋值给其他类型，但是不能把其他类型的数据赋值给null；

let a: number;
a = null;

let b: any;
b = 1;

2. 类型推导：  变量初始化、上下文推断

let c = 1;  //ts会自动推导，c是number类型的
c = 'm';    //error

//事件函数的第一个参数，是根据当前绑定的事件类自动推导的
document.onkeydown = function(e) {}

let fn: (a: number, b: string) => string = function(a: number, b: string): string {return a + b};

5. 文档：

https://www.tslang.cn/docs/home.html