ts简介和基本类型

简介: ts简介和基本类型

1.TypeScript是什么?
是以javascript语言为基础,是javascript的超集,

扩展了js,并添加了类型

可以在任何支持javascript的平台运行。

TS不能被JS解析器直接执行

所以TS需要进行转换,编译为JS代码,最后执行的还是js代码

  1. TS增加了什么
    类型
    支持ES的新特性
    添加了ES不具备的特性
    丰富的配置选项
    强大的开发工具
  2. TS开发环境的搭建
    安装nodejs

安装 typescript

npm i typescript -g
创建一个ts文件 xxx.ts

使用tsc对ts文件进行编译

进入命令行
进入ts文件所在目录
tsc xxx.ts

  1. 类型
    类型声明

类型声明是TS非常重要的一个特点

通过类型声明可以指定ts中变量(参数、形参)的类型

指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错。

简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值。

语法:

//声明一个变量
let 变量:类型=值

let 变量:类型;
变量=值
//如果变量声明和赋值是同时进行的,TS解析器会自动检测变量的类型,会确定为值的类型,如果后面赋值为其他类型,则会提示错误。
let 变量=值

function(参数:类型,参数:类型):返回值类型{

}
类型
类型 例子 描述
number 1,33,2.5 任意数字
string "hi" 任意字符串
boolean true,false 布尔值true或false
字面量 其本身 限制变量的值就是该字面量的值
any 任意类型
unknown
类型安全的any
void 空值(undefined) 没有值或undefined
never 没有值 不能是任何值
object {name:"孙悟空"} 任意的JS对象
array [1,2,3] 任意js数组
tuple [4,5] 元素,TS新增类型,固定长度数组
enum enum(A,B) 枚举,TS中新增类型
// 可以使用字面量进行类型声明
let aa:10;
aa=10;

// 可以使用 | 来连接多个类型(联合类型)
let bb: "male" | "female";

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

// any表示任意类型,一个变量设置any之后相当于对该变量关闭了TS的类型检测
//
使用TS时,不建议使用any类型
// let dd:any;
// dd=false;
// dd=123;

//* 声明变量时如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)
let dd;
dd=20;
dd="123"

//* 如果一个变量的类型是any,它可以赋值给任意变量
// let e:string;
// e=dd;

// 如果一个变量的类型是unknown,它不能赋值给有类型的变量
//
它实际上是一个类型安全的any。
let e:string;
let eu:unknown;
e="hello ts"
eu="wjy";
if(typeof eu =="string"){
e=eu;
}

// 类型断言 可以用来告诉解析器变量的实际类型,以下两个作用是一样的
/*

  • 语法:
  • 变量 as 类型
  • <类型> 变量
    */
    e=eu as string
    e= eu;
    // e=eu;

// void 如果不设置函数的返回值,默认是void【没有或为空】
//
函数的返回值会自动类型检测,如果在分支判断中返回不同的值,则会返回值的类型就是 联合类型

function sum1(num){
if(num>0){
return true;
}else{
return 123
}
}
// void 用来表示空,以函数为例,就表示没有返回值
//
void:空 | undefined | null
function fn():void{
// return undefined;
// return null;
return ;
}

// never不能是任何值
//
表示永远不会返回结果
function fn2():never{
throw new Error("报错了!")
}

// 联合值 f的只能为 10 20 30
let f: 10 | 20 | 30;
//
联合类型 ff的类型可以为 number string boolean
let ff: number | string | boolean;

  1. object【对象】
    // 方式一:
    let obj:object;
    // 或
    let obj:{};

// object 表示一个js对象
let a :object;

a={
name:"hyz",
age:22
};

// * 因为万物皆对象,所以实际用它是没有什么意义的
a=function(){}

// 方式二
let b:{};
b={
name:"wjy",
age:20
}
//可以指定一个变量的类型是对象,可以指定这个对象的属性有哪些,属性的类型是什么
let 变量名 :{
属性名:类型,
属性名:类型
}

let b: {
name:string
};

b={
name:"wjy",
age:20,// b会报错,因为指定的时候没有指定age属性
}

{}用来指定对象可以包含哪些属性和属性的类型

指定的属性的个数,多了一个属性也不行,少了一个属性也不行

1.1 如果想指定属性是可选的(可有可无)
可以在属性名后面 加 ?

let b:{
name:string,
age?:number
}

b={
name:"wjy"
}
1.2 规定对象指定属性是必须的,其他属性是可选的
let c:{[propName:string]:any}

let c:{name:string,[propName:string]:any};
c={
name:"wjy",
age:20,
isFlag:true
}

  1. 函数
    // * 指定d的类型是一个函数,它的参数个数为两个,两个参数的类型都是number,返回值类型也为number
    let d:(a:number,b:number)=>number;
    d=function(n1,n2):number{
    return n1+n2;
    }
  2. 数组
    语法

let 变量名:类型[];
let 变量名:Array<类型>
// * 在ts中,数组一般存储的是相同的类型的值
let e:string[];// e是一个字符串数组,只能存储字符串
e=['a','b','c'];
let f:number[];// f是一个数组,存储的是number类型
let g:Array;//g是一个数组,存储的是number类型
g=[1,2,3,4,5]

  1. 元组(js无)
    在js中是没有这个概念的,它表示固定长度的数组

语法:

let 变量名:[类型,类型,...]
let h:[string,string];
h=["hello","world"];//不会报错
h=["hello"];//报错
h=["hello","world","wjy"]//报错
赋值的时候不能多于指定的个数,也不能小于指定的个数

  1. 枚举(js无)
    将所有可能的数据列出来

/**

  • 枚举 enum:将所有可能的数据列出来
    */
    enum Gender{
    Male=1,
    Female=0,
    }
    let i:{name:string,gender:Gender};
    i={
    name:"孙悟空",
    gender:Gender.Male
    }

console.log(i.gender===Gender.Male);
console.log(Gender.Male);

  1. &表示同时【语法】
    &表示同时,表示都要满足,

// 表示j既是string类型,又是number类型,这个写法其实一点意义都没有
//
因为一个变量不可以同时满足两个类型的要求
let j:string & number;
// 表示j是一个对象,对象里面的属性既要有name属性,又要有age属性
let j:{name:string} & {age:number};
j={
name:"wjy",
age:20,
}

  1. | 表示或【语法】
    |表示或,表示只要满足一个就可以了。

  2. 类型的别名
    可以使用type定义一个类型,可以是基本类型,也可以是由字面量组成的类型。

// 定义了一个类型
type myType= 1|2|3|4|5;

let k: myType ;
let l :myType;
k=1;

相关文章
|
5月前
|
JavaScript
|
6月前
|
前端开发
前端 TS 快速入门之一:基本数据类型
前端 TS 快速入门之一:基本数据类型
44 0
|
JavaScript 前端开发 程序员
ts - 类 进阶1
ES6 类的使用
|
JavaScript 索引
ts - 类 进阶2
ES7类的使用
|
JavaScript
TS基本语法 TS中的泛型
TS基本语法 TS中的泛型
|
JavaScript 前端开发
ts的几种基本数据类型的使用
ts的几种基本数据类型的使用
|
JavaScript 前端开发
TS基础用法
TS基础用法
94 0
ts重点学习14-基础数据类型
ts重点学习14-基础数据类型
71 0
ts重点学习14-基础数据类型
ts重点学习16-数组类型
ts重点学习16-数组类型
86 0
ts重点学习16-数组类型