一 、环境配置

  • 下载node.js
  • 安装typescript: npm i -g typescript
  • 创建一个 .ts文件
  • 编译ts为js： tsc 文件名

二、基本用法

1. 入门案例

/*变量声明类型
* 1. ts中，如果类型赋值错误，IDEA 就会设置编译失败
* 2. ts可以编译为任意版本的js，也可自定义*/

/*1.先声明后赋值*/
let a: number;

/*2.声明后直接赋值*/
let b: boolean = false;

/*3.类型推断: 先赋值，不声明类型，就会产生类型推断：  推荐！！！*/
let c = false;


/*4. 类型声明：对函数作用更大： 参数个数，类型*/
function sum01(a, b) {
    return a + b;
}

console.log(sum01("sd", "sf"));

function sum02(a: number, b: number) {
    return a + b;
}


/*5. 函数返回值 : 声明返回值类型*/
function sum03(a: number, b: number): number {
    return a + b;
}

2. 基本类型

/* 1. number, boolean, string*/
let a: number;
let b: boolean;
let c: string;

c = 'shu';

/*2.  字面常量，可以用 ｜ 连接多个常量, 类似枚举*/
let fruit: 'apple' | 'banana' | 'peach' | 'melon'
fruit = 'apple';

/*3.  联合类型：多种类型声明*/
let mixed: string | number;

mixed = 'test';
mixed = 10;

/* 4. any:  不建议使用
4.1 任意类型，相当于关闭了ts的类型检测
4.2 和不使用类型一样（隐式声明，显示声明）*/
let randomVar01: any;
let randomVar02;

/*5. unknown: 也是任意类型，其实就是一个类型安全的any
* 5.1 any类型的变量可以赋值给任何其他 类型
* 5.2 unknown 只能自己变化，不能赋值给任何其他 显示声明的类型
* 5.3 如果要将unknown  赋值给其他的，可以通过下面两种方式*/
let e: unknown;
e = 'haha';

/* 01.转化的时候进行类型检查*/
if (typeof e === "string") {
    mixed = e;
    console.log(mixed)
}

/* 02.类型断言*/
mixed = e as string;
mixed = <string>e;


/*6. void: 用在函数返回值中 */
function fn01(): void {
    return;
    //return null;
    //return undefined;

}

function fn02(): string {
    return "success";
}

/*6.1 never:  永远不会有结, 异常的处理*/
function fn03(): never {
    throw new Error("failure");
}

3. 类型进阶

/*1. 对象类型定义*/
/*  1.1  在赋值的时候，不能多，不能少，严格一致 */
let a: {
    name: string,
    age: number,
    address: string,
    isEnable: boolean
};

a = {
    name: 'shuzhan',
    age: 20,
    address: 'shanghai',
    isEnable: true
}

/*  1.2 可选属性  ? */
let b: {
    name: string,
    age?: number
}

b = {
    name: 'sz',
}

b = {
    name: 'sz',
    age: 12,
}

/* 1.3 任意类型的，字段*/
let c: {
    name: string,
    [propName: string]: any
}

c = {
    name: 'sz',
    age: 10,
    address: 'sx',
    isEnable: false
}


/* 2. 函数类型定义
*     两个为number的参数，返回值是boolean*/
let d: (a: number, b: number) => boolean;

d = function (n1, n2): boolean {
    return (n1 + n2) < 10;
}

/* 3. array: 可变长度的数组*/
let e: string[];
let f: number[];
let g: Array<boolean>

/* 4. 元组： 固定长度的数组*/
let h: [string, number]
let i: [string, number, string]

/* 5.枚举*/
enum GENDER {
    Male,
    Female
}

/* 6. 类型别名*/
type myType = string | number | boolean
let k: myType

三、编译模式

1. 单个文件

  • tsc demo01.ts -w 热更新编译
  • tsc 单次编译
/* 1. tsc demo01.ts -w    :  监视文件，发生变化后重新编译
*       1.1 命令行进行监视：只能监视一个文件，多个文件要开多个窗口
*       1.2 关闭窗口后，监视就会中止*/
console.log("haha");
console.log("nihao");

2. 配置文件

{
  /* tsconfig.json: ts工程的配置文件选项 */
  "compilerOptions": {
    /* module: 模块化的规范*/
    "module": "commonjs",
    /*target: 默认es5，改为es6*/
    "target": "esnext",
    "sourceMap": true,
    /*"lib": []   一般不写，会有默认值*/

    /*编译后的 js 文件的存放位置*/
    "outDir": "./dist",
    /*是否编译js文件，默认false*/
    "allowJs": false,
    /*是否用ts类型检查来查看  js代码*/
    "checkJs": false,
    /*注释是否需要在编译后的代码中出现*/
    "removeComments": true,
    /*当编译出现错误时候，不生成编译后的js文件*/
    "noEmitOnError": true,
    /*是否开启js的严格模式： 严格模式性能更好， 会在生成的js文件中，带上 "use strict" 的头*/
    "alwaysStrict": true,
    /*不允许隐式的 any类型，也就是隐式的不定义类型*/
    "noImplicitAny": true,
    /*严格检查空值*/
    "strictNullChecks": true,
    /*所有严格检查的总开关*/
    "strict": true
  },
  /*哪些文件不需要动态编译*/
  "exclude": [
    "node_modules"
  ],
  /*哪些文件需要时时编译*/
  "include": [
    "../ts-demo/part01/demo01.ts"
  ]
}