TypeScript学习（1）

TypeScript的安装与第一个.ts的创建

1. 全局安装typescript：

npm install -g typescript
cnpm install -g typescript
yarm install -g typescript

2. 安装完成后输入tsc-v 检查是否安装完成，安装完成入下图
   
3. 安装成功后在vscode中创建一个文件夹part1，下面创建我们第一个helloTs.ts第一个ts文件
   
4. 在终端使用tsc 01_helloTS.ts 编译，编译成功如下图
   

TypeScript的基础知识

什么是Typescript？

typeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

TS的特点：

• Javascript that scales （JS的超集）
• 静态类型风格的类型系统
• 从es6到es10甚至是esnext的语法支持
• 兼容各种浏览器，各种系统，各种服务器，完全开源

为什么使用TS？

• 程序更容易理解：容易知道函数的输入输出类型及外部条件，出错几率小
• 编译期间能够发现大部分错误
• 完全兼容JS

 直接上代码：

//声明一个变量a 同时指定它的类型为number
let a:number;

//a的类型设置为了number，再以后使用过程中a的值只能是数字
a=10;
a=33;
//a='hello'; //此行代码会报错，因为变量a的类型是number，不能复制字符串
let b:string;
b='hello';
// b=1234567
//声明完变量可直接赋值
let c:boolean=true;
c=false;
// c=0;
//JS中的函数时不考虑参数的类型和个数的
function sum(a:number,b:number):number {
    return a+b;
}
console.log(sum(12,32));//44
// console.log(sum(12,"32"));//44

TypeScript中的数据类型有：

1. Undefined ；
2. Number:数值类型;
3. string : 字符串类型;
4. Boolean: 布尔类型；
5. enum：枚举类型；
6. any : 任意类型；
7. void：空类型；
8. Array : 数组类型;
9. Tuple : 元祖类型；
10. Null ：空类型

//也可以直接使用字面量进行类型声明


let a:10;
a=10;
// a=11;
//可以使用 | 来连接多个类型（联合类型）
let b:"male" | 'female';
b="male";
b="female";

let c:boolean | string;
c=true;
c="hello";

//any 表示任意类型，一个变量设置any后相当于对该变量关闭了TS类型检测
//使用TS时，不建议使用any类型
//声明变量如果不指定类型，则TS自动判断变量为any类型
let d:any;
d=10;
d="hello";
d=true;

//unknown 表示未知类型的值
let e:unknown;
e=10;
e="hello";
e=false;

// d的类型是any，它可以赋值给任何变量
let s:string;
// s=d;
//unknown 实际上就是一个类型安全的any
//unknown 类型的变量，不能直接赋值给其他变量
if(typeof e ==="string"){
    s=e; 
}
//类型断言，可以用来告诉解析器变量的实际类型
/**
 * 语法
 *      变量 as 类型
 *      <类型>变量
 */

s=e as string; 
s=<string>e;
//void 用来表示空，以函数为例，就表示没有返回值
function fn1(num):void{

}
//never 表示永远不会返回结果
function fn2(num):never{
    throw new Error('报错了呀')
}

function fn3(num):number|boolean{
    if(num>0){
        return true
    }else{
        return 123;
    }
}

对象、函数、数组、元组、枚举、类型别名

//Object 表示一个js对象
let a:object;
a={};
a=function(){}

//{} 用来指定对象中可以包含哪些属性
//语法：{属性名:属性值，属性名:属性值}
//在属性名加上?，表示属性是可选的
let b:{name:string,age?:number};
b={name:"猪八戒",age:12};

let c:{name:string,[propName:string]:any};
c={name:"沙师弟",age:"29",gender:"男"}

/**
 * 设置函数结构的类型声明：
 *      语法：（形参：类型，形参：类型）=>返回值
 * 
 */
let d:(a:number,b:number)=>number

d=function(n1,n2):number{
    return n1+n2;
}


/**
 * 数组的类型声明：
 *      类型[]
 *       Array<类型>
 * 
 */
//string[] 表示字符串数组
let e:string[];
e=['a','b','e','c'];
//number[] 表示数值数组
let f:number[];

let g:Array<number>;
g=[1,3,4,5,6,7];


/**
 * 元组  元组就是固定长度的数组
 * 
 */

let h:[string,string];
h=['hello','world']

/**
 *  enum 枚举
 * 
 */
enum Gender{
    Male=0,
    Female=1
}
let i:{name:string,gender:Gender};
i={
    name:"孙悟空",
    gender:Gender.Male //'male'
}
console.log(i.gender===Gender.Male)
//&表示同时
let j:{name:string} & {age:number};
j={name:"猪八戒",age:12};
//类型别名
type myType=1|2|3|4|5;
let k:myType;
// let k:1|2|3|4|5;
let l:1|2|3|4|5;

学习链接