typeScript学习笔记（上）

一，配置环境
1、在node.js基础下全局安装TS插件

2、安装 typescript：
npm install -g typescript || cnpm install -g typescript

3,查看版本 tsc -v
Version 4.3.5  // 出现版本号安装成功

二、TS的基础运用
1、在vscode中书写TS， 文件后缀名为 .ts 的文件
function sayhi(name: string):void {
    console.log('hi', name);
}

let myName: string = '老狗'

sayhi(myName)
2、不能直接应用ts文件，需要使用tsc命令编译成js文件引入html中使用
----在终端中输入： tsc x你要编译的文件x.ts 以.ts结尾 回车自动编译生成同目录下的 js 文件
----在html文件中引入即可

3、用node.js 识别ts文件 原理与2一致，
node xxxx.js(tsc编译后的js文件)

4、自动转化ts文件为js文件：
---- ts-node 自动转化ts文件并在node.js中执行
-----npm install -g ts-node  全局安装转化插件
-----ts-node xxxx.ts(想要编译的文件) 终端输入，在node.js中编译

5、tsc 命令监视当前ts文件，自动编译，生成JS文件
-----tsc xxx.ts -w  自动编译TS文件，显示时间，延迟执行

三、TS的数据类型(let：变量、const：常量）

6、自动检测所有TS文件，并生成JS文件
     a, 在根目录创建 tsconfig.json 文件，内容为{}
     b, 终端指令 tsc 检测所有TS文件并编译成JS文件

1、
变量语法：
let 变量名：变量类型;
// 声明一个age并指定数据类型
let age：number;
let name：string;
一旦声明数据类型，该变量只能存储同等类型的值
age = 18 success
age = 'ls' err
//不声明数据类型直接赋值,TS可自动检测数据类型
let c = false    === let c: boolean = false  != let c = 'aaa' 
// 函数形参声明数据类型
function sum（a:number, b:number) {
    return a + b}
log(sum(a:123,b:'123')) err
log(sun(a:123,b:123)) success
       // 函数返回值类型
      function sum（a:number, b:number)：number {
        return a + b}
       let res = sum(a:123,b:123) //number类型
ps：a,为了使TS更容易推广，校验不严格，ts文件代码即使变量类型不符也会编译为js文件
       b,编译后的js可为任意版本js文件也可指定版本，兼容性强

2、| 与 &
// 字面量进行类型声明
let a: 10;
a = 10
// a ='111'
console.log(a);

// 可以使用 | 来连接多个类型
let b:number | string;
b = 111
console.log(b);
b='222'
console.log(b);
// & 表与
let r: {name:string} &{age:any}
r = {
    name:'ls',
    age:18
}

3、any 任意类型、unknown  未知类型
any 表任意类型，对变量关闭类型检测

可以给任意变量赋值
不建议TS使用any类型
let d:any // 显式any
let d // 隐式any

unknown 表未知类型之关闭自己的数据检测，不能直接给其他变量赋值，可通过判断 || 断言赋值

let s: unknown;
s = 111;
s = '222';
let e:string;
e = 'hello';
e = s err

unknown 不能直接给其他变量赋值，需要做出判断
if(typeof s==='string') {
    e = s
    success
}

类型断言
e = s as string 
e = <string>s

4、 空值
void 空值，以函数为列，没有返回值
function fc():void {
}

never 表永远无返回结果, 设置报错，使用少之又少
function fun(): never {
}

5、object 对象类型
let a: object
a = {}
a = function() {}
指定对象类型，一般指定对象的某个值
要求结构一致
在属性名后面加？，表可选
let b:{name: string,age:number};
b = {name:'ls'}
b = {
    age:99,
    name:'ls'
}

[propName:string]:any 表任意类型的属性
let g:{name: string,[propName:string]:any};
g = {
    name:'ls',
    age: 18,
    sex: '男'
}

6、函数声明
/**
 * 设置函数结构类型声明
 */
let y: (a:number,b:number)=>number;
y = function fn2(n1,n2):number {
    return n1+n2;
}

7、
/**
 * array 数组声明
 * 类型[ ]
 * array<类型>
 */

let e: string[]; // 字符串类型的数组
let g: Array<number> // 数值类型的数组

8、元组，enum 枚举
/**
* 元组，元组就是固定长度的数组
*/
    let h:[string,number];
    h = ['aa',111]

/**
 * enum 枚举
 * 先定义后使用
 */
enum gender{
    mm = 0,
    gg = 1
}
let i : {name: string,gender:gender}
i = {
    name: 'ls',
    gender: gender.gg
}
console.log(i.gender)

9、

/**

 * 类型的别名

 * 当类型连接多个时可使用别名，简化结构

* 使用时做类型名使用

 */

type myType1 = string

type myType2 = 1 | 2 |3

let d: myType1

let v: myType2

// v = 7 err

// v = 1 |2 |3

d = '1'

// d = 1