ts简介和基本类型

1.TypeScript是什么?

  • 是以javascript语言为基础,是javascript的超集,

  • 扩展了js,并添加了类型

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

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

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

2. TS增加了什么

  • 类型
  • 支持ES的新特性
  • 添加了ES不具备的特性
  • 丰富的配置选项
  • 强大的开发工具

3. TS开发环境的搭建

  1. 安装nodejs

  2. 安装 typescript

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

  4. 使用tsc对ts文件进行编译

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

4. 类型

  • 类型声明

    • 类型声明是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=<string> 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
}

2. 函数

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

3. 数组

语法

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

4. 元组(js无)

在js中是没有这个概念的,它表示固定长度的数组

语法:

let 变量名:[类型,类型,...]
let h:[string,string];
h=["hello","world"];//不会报错
h=["hello"];//报错
h=["hello","world","wjy"]//报错

赋值的时候不能多于指定的个数,也不能小于指定的个数

5. 枚举(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);

6. &表示同时【语法】

&表示同时,表示都要满足,

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

7. | 表示或【语法】

|表示或,表示只要满足一个就可以了。

8. 类型的别名

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

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

let k: myType ;
let l :myType;
k=1;
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,525评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,203评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,862评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,728评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,743评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,590评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,330评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,244评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,693评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,723评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,343评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2 355

推荐阅读更多精彩内容