TypeScript 一

windows 安装

npm install -g typescript

macos安装

brew install typescript

项目安装TS

除了全局安装外，也可以在项目中独立安装 typescript，这可以限定项目使用的 typescript 版本

yarn init -y

安装 typescript

yarn add -D typescript

查看版本

yarn tsc -v

编译 TS

我们使用 tsc 命令可以将 ts 文件编译为js 文件，如果在编译过程中有 ts 错误将在命令行报出

tsc hd.ts //会编译生成 hd.js 文件

第次修改 ts 文件后再执行命令编译会过于繁琐，可以执行以下命令自动监听ts 文件内容并自动生成 js 文件

tsc hd.ts -w

类型校验

下面没有使用类型限制时，函数参数传入字符串也是可以执行的，显示这个结果是不对的

function sum(a,b){
    return a+b;
}

console.log(sum('a',3)); //结果为 a3

加上严格类型后，在编译环节就会提示错误

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

console.log(sum('a',3)) 
//报错 Argument of type 'string' is not assignable to parameter of type 'number'.

TS中的类型

//声明一个变量a  并指定它的类型  以后只能使用指定的类型
let a:number;

let b:string;

let c:boolean;

//null 和 undefined
//undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大：
let u:undefined=undefined;
let n:null=null;
/*
默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题。 也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。 再次说明，稍后我们会介绍联合类型。
*/
//函数
function sum(h:number,j:number):number{
    return h+j;
}
console.log(sum(1,2))

//声明变量直接赋值
let f:number=123;
let g:string="hello";






//Any
//有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：
let list2:any[]=[1,'true','string']



/*Object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
*/

//any 不光关闭了自身的类型检测 还关闭它赋值的其他元素的类型检测
let Y:any;
let s:string;
s=Y;


//unknow 不确定类型时候 使用unknow 
let X:unknown;
//unknow 类型的变量不能直接赋值给其他变量  需要进行判断
if(typeof X==='string'){
    s=X
}
//或者类型断言 （强制告诉编译器 变量实际类型）
s=X as string;

/*
类型断言 两种方式
<类型>变量  <string> e
变量 as 类型  X as string
*/



//Void：空值 
//声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：
function fn():void{

}
//Never never类型表示的是那些永不存在的值的类型(没有返回值)
function fn2():never{
    throw new Error('something is rong')
}

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

}

//{}用来指定对象中可以包含哪些属性
//语法   {属性名：属性值，属性名：属性值}
//在属性名后面加上?，表示属性是可以选的
let obj1:{name:string,age?:number}
obj1={name:'张三',age:18}
//{propName:string,[propName:string]:any} 表示任意类型属性

let obj2:{name:string,[propName:string]:any}
obj2={name:'张武',age:18,sex:'男'}


/*
设置函数结构的类型声明
语法：（形参：类型，形参：类型，。。。。）=>返回值
*/ 
let fn3:(a:number,b:number)=>number;
fn3=function(a:number,b:number):number{
    return 10;
}


//数组
//第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
let  list:number[]=[1,2,3,4]
//泛型第二种方式是使用数组泛型，Array<元素类型>：
let list1:Array<number | string>

list1=[1,2,3,'hello']


/*
元组 tuple(固定类型和长度的数组 定义之后不可以修改)
语法：[类型，类型，类型]
*/
let x:[string,number];
x=['hello',1];
// x=[10,'hello']
console.log(x[0].substring(0,1))



//枚举enum
//enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
//枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：
enum Color {Red,Green,Blue}
console.log(Color['Red']===0)//true
console.log(Color['Green']===1)//true
console.log(Color['Blue']===2)//true

console.log(Color[0])//Red
console.log(Color[1])//Green
console.log(Color[2])//Blue



//& 与 |或
let j1:{name:string} & {age:number};//j1同时具备name 和age 两个属性及其类型
let j2:Array<string|number>

//类型别名  当某个类型很长时 不方便用时 可以写个别名代替
type mytype=1|2|3|4|5|6;//别名
let k:mytype;
let l:mytype;
let m:mytype;

View Code

TypeScript 一

编译 TS

类型校验

TS中 的类型

TS中的类型