初识TypeScript

吴名小卒1538

什么是TypeScript



TypeScript是一种以JavaScript为基础构建,并且可以在任何支持JavaScript的平台中执行的语言。它可以看成是一个JavaScript的超集,它对JavaScript进行了扩展并且添加了类型。同时,Typescript不能直接被JS解析器执行,需要先进行编译后才能执行。

Typescript新增特性

我们知道,TS是对JS进行了扩展,那么TS又新增了那些特性呢?


TS相比于JS主要有以下五方面的新增:

    除了支持JS的数据类型以外,还新增了一些新的数据类型。

    支持ES新特性

    新增了强大的开发工具

    添加了ES不具备的新特性

    新增了丰富的配置选项

搭建TS开发环境

    安装Typescript

npm i -g typescript

    创建一个ts文件

    使用tsc对ts文件进行编译

tscxxx.ts// xxx为文件名

TS编译选项配置

    在ts项目根目录下创建一个tsconfig.json文件

    往tsconfig.json文件内添加配置项

{// 指定需要被编译的ts文件"include":["src/**/*" //src目录下的ts文件都会被编译],/***指定那些目录下的文件不会被编译*默认值:exclude:["node_modules","bower_components","jspm_packages"]**/"exclude":["src/hello/**/*"],//compilerOptions编译器选项"compilerOptions":{//用来指定编译成的JavaScript版本"target":"ES6",//指定使用的模块化规范"module":"ES6",//指定编译后的文件所在目录"outDir":"./dist",//将代码合并到同一文件,只有上面module的属性为AMD或system时,或者不设置module时能成功//"outFile":"./dist/app.js"//是否编译JS代码,默认是false"allowJs":true,//是否检查JS代码是否符合代码规范,默认是false"checkJs":true,//是否移除注释"removeComments":true,//不生成编译后的文件"noEmit":false,//发生错误时,不生成编译后的文件"noEmitOnError":true ,//编译后的文件是否使用严格模式,默认false"alwaysStrict":true,//不允许隐式any类型"noImplicitAny":true,//不允许未知类型的this"noImplicitThis":true,//严格检查空值"strictNullChecks":true}}

TS的基本类型

    类型声明

类型声明是TS的一个重要特点。通过类型声明可以指定TS中的变量,参数和返回值的类型。指定类型后,当我们给变量赋值时,TS编译器会判断变量的赋值是否符合类型声明。如果不符合,则报错。具体语法如下:

let变量类型;let变量类型=值;functionfn(参数: 类型,参数,类型):类型{. . .}

    自动类型判断

TS拥有自动类型判断机制。当变量声明与赋值同时进行时,TS编译器会自动判断变量的类型。因此,当变量声明和赋值同时进行时,我们可以省去类型声明。

    类型


    实例展示

let a1:number;a1=123//a1="123" //编译时会报错,不能给number类型变量赋值字符串let b1 = false // 当同时进行变量声明与赋值时,系统会进行变量类型检测,并江边炼蛊蛾定位相应的类型b1 = true//b1 = 123 //报错,不能给布尔类型赋值整型function sum(a:number,b:number):number{return a + b//return a + "b"//报错,返回值类型必须与上述定义的返回值类型相同}sum(123,456)//sum(123,"456")//报错,实参类型与形参类型不一致//sum(123)//报错,实参个数与形参个数不一致//sum(123,456,789)//报错,实参个数与形参个数不一致//通过 | 可以给变量定义为多种指定类型let a:string | number;a = 123;a = "abc"//通过any可以将变量指定为任意类型变量,相当于关闭了ts类型检测,因此在ts不建议使用let b:any;b = true;b = 123;b = "abc";//通过unknown也可以指定未知类型的变量let c:unknown;c = 123;c = "abc";let s:string;//s = c//报错,不能把unknown类型赋值给string;//object表示js对象let obj:object;obj = {};obj = function(){};//通过{}可以指定对象内含有的属性let obj1:{name:string,age:number}obj1 = {name:"吴辰",age:12}//obj1 = {name:"吴辰"}//报错,缺少age属性//obj1 = {name:"吴辰",age:12,sex:"男"} //报错,obj1对象不含sex属性//通过在属性后加?可以定义可有可无的属性let obj2:{name:string,age?:number}obj2 = {name:"吴辰",age:12}obj2 = {name:"吴辰"}//通过[key:strig]:unknown可以定义任意属性let obj3:{name:string,[key:string]:unknown}obj3 = {name:"吴辰",age:12,sex:"男",pwd:"123454"}console.log(obj3)/***函数结构类型定义*语法 : (形参:类型,形参:类型,...) => 返回值类型**/let e:(a:number,b:number) => number;e = function(a,b){return a+b}//e = function(a:string,b){// return a+b//}//报错,参数a已经定义为number类型,不可以变为string//e = function(a,b){// return "1234"//}//报错,返回值类型定义为number类型,不可以返回string//string[]表示字符串数组let arr:string[];arr = ["a","b","c"];//arr = ["a","b",3]//报错,字符串数组不能含有number类型console.log(arr)//通过Array<string>定义字符串数组let arr1:Array<string>;arr1 = ["hello","world","aaa"];//arr1 = ["a","b",3]//报错,字符串数组不能含有number类型console.log(arr1)//元组:固定长度的数组,语法如下:let tp:[string,string,number]tp = ["a","b",123]//tp = ["a","b","123"] //报错,元素实际属性与定义的属性不相符//tp = ["a","b"]//报错,元素实际个数少于定义个数//tp = ["a","b",123,456]//报错,元素实际个数多于定义个数console.log(tp)//枚举enum Sex{male = 1,female = 0}let user:{name:string,sex:Sex}user = {name:"wuchen",sex:Sex.male}console.log(user)//void:主要用于定义函数返回值为空function sum(a:number,b:number):void{console.log(a+b)//return undefined//return null//return a+b //报错,返回后应该为空 }sum(1,2)//never:没有值,不能是任何值let n:never;console.log(n)//&表示同时具备let i:{name:string} & {age:number}i = {name:"吴辰",age:12} //i = {// name:"吴辰"//} //报错,缺少age类型//类型别名,针对特别长且反复被使用的类型type mytype = 1|2|3|4|5|6let t:mytypelet m:mytypelet y:mytype

版权声明:初识TypeScript内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系 删除。本文链接:https://www.qi520.com/n/18105.html