typescript是以JavaScript为基础构建的语言,是一个Javascript的超集,可以在任何支持JavaScript的平台中执行,typescript扩展了JavaScript,并添加了类型。
注意:ts不能被js直接解析执行,需要经过编译为js执行类似于less这种预处理语言。
保持js原有类型的同时新增加了一些类型。
支持es的新特性。
添加了es不具备的新特性。
丰富的配置选项。
1.下载安装node.js
2.使用npm全局安装typescript
进入命令行。
输入命令:npm i -g typescript
3.创建一个ts文件
4.使用tsc对ts文件进行编译。
进入命令行。
进入ts文件所在目录。
执行命令:tsc xxx.ts。
执行完上述操作之后会产生一个同名的js文件。

类型声明式ts非常重要的一个特点。通过类型声明可以指定ts中变量(参数、形参)的类型。
指定类型后,当为变量赋值时。ts编译器会自动检查是否符合类型声明,符合则赋值,否则报错。简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值。
语法:
```typescript
let 变量:类型
let 变量:类型 = 值;
function fn(参数:类型,参数:类型):类型{...
}```
console.log('Hello Typescript');
//先声明后赋值
let a: number; //a的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10;
a = 33
// a = 'abc' // 此行代码会报错,因为变量a的类型是number,不能赋值字符串。let b: string;
b = 'abc';
b = 'def';
// b = 1 //此行代码会报错,因为变量b的类型是string,不能赋值数字。//声明完直接赋值
// let c: boolean = true;//如果变量的声明和赋值时同时进行的,ts可以自动对变量进行类型检测,一旦赋值完成变量的类型就已经确定了。
let c = true;
c = false;//js函数中的参数是不考虑类型和个数的
// function sum(a, b){
// return a + b;
// }
// console.log(sum(123,456)) //579
// console.log(sum('123','456')) //'123456'//ts中函数传参时可以规定参数的类型,函数返回值的类型,只是在编写代码的阶段会进行报错的提示,编译还是可以进行的。
function sum(a:number, b:number):number{return a + b;
}
console.log(sum(123,456))
ts拥有自动的类型判断机制。
当对变量的声明和赋值时同时进行的,TS编译器会自动判断变量的类型。
所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1,-33,2.5 | 任意数字 |
| string | “hi”,‘hi’,hi | 任意字符串 |
| boolean | true、false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknow | * | 类型安全的any |
| void | 空值(undefined) | 没有值(或undefined) |
| object | {name:‘齐天大圣’} | 任意js对象 |
| array | [1,2,3] | 任意js数组 |
| tuple | [4,5] | ts新增类型,固定长度数组 |
| enum | enum{A,B} | 枚举,ts中新增类型 |
这里在使用ts里的变量的时候,产生一个问题,同一个文件夹下(其实不同文件夹下也会产生这样的问题)的t不同s文件怎么会产生重名问题,是因为在一个没有任何设置的普通项目中,vscode编辑器会把当前打开的 ts 文件当作一个整体的作用域进行验证。解决办法是使用命令tsc init 去初始化ts工程,生成一个配置文件tsconfig.json。该文件内部主要有如下内容:
Created a new tsconfig.json with:
target: es2016
module: commonjs //采取文件模块,会在当前文件中创建一个本地作用域
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
类型使用实例如下:
//可以直接使用字面量来进行类型声明
let d: 10;//可以使用 | 来连接多个类型(联合类型)
let e: 'male'| 'female';
e = 'female';
e = 'male';let f: string | number;
f = 'abc';
f = 1//any表示的是任意类型,当一个变量设置为any后相当于对该变量关闭了TS的类型检测。
//不建议使用any
//g的类型是any,它可以赋值给任意类型的变量
let g: any; //显式any
// let g //隐式any 即如果声明变量不指定类型,则ts解析器会自动判断变量的类型为any
g = 1;
g = 'abc';
g = true;// unknown 表示未知类型的值 效果跟any是一样的
// unknow 实际上就是类型安全的any 该类型的变量不能直接赋值给其他变量
let h: unknown;
h = 1;
h = true;
h = 'abc';let i:string;
// i = g; //不报错
h = 'hello';
// i = h; //会报错 不能把uknow的值赋给h
//改成这样则不会报错
// if(typeof h === 'string') {
// i = h;
// }// 类型断言 用来告诉解析器变量的实际类型
//语法:1.变量 as 类型
// 2.<类型>变量
i = h as string
i = h//void用来表示空,以函数为例,就表示没有返回值的函数
function fn():void {// return undefined;// return null;这两个返回值都为空。 或者只写或不写return都不会报错。
}//never表示永远不会返回结果
function fn2():never {throw new Error("报错了");
}//对象的类型声明
//object表示一个js对象 用的较少 js中一切皆对象 一般限制 我们是想限制对象里边包含有哪些属性
let j: object;
j = {};
j = function(){};
//{}用来指定对象中可以包含哪些属性
//语法:{属性名:属性值,属性名:属性值}
//在属性名后边加上?表示属性是可选的 否则必须包含这几个属性而且未指定的属性不能出现 否则会报错
let k:{name: string,age?: 20};
k = {name: 'abc',age: 20}
//如果我们想要实现一个 一定包含name属性,其他属性随意的对象
// [propName:string]:any 表示任意类型的属性
let l:{name:string,[propName:string]:any}l = {name:'zs',age:18,id:8888}//这样写意义不大
// let m:Function;
//设置函数结构的类型声明
//语法:(形参:类型,形参:类型...)=>返回值
let m:(a:number,b:number)=>number
m = function(a1,a2){return a1 + a2
}//数组的类型声明
//n:string[]表示一个字符串数组
let n:string[];let o:number[]; //这个表示数值数组let p:Array //也表示字符型数组// 元组:元组就是固定长度的数组
//语法:[类型,类型,类型]
let q:[string,number];
q = ['abc',123];//enum枚举
enum Gender{male,female
}
let r: {name:string,sex:Gender}
r = {name:'LiHua',sex:Gender.male}console.log(r.sex === Gender.male)//&表示同时
let s:{name:string} & {age:number}; //s必须满足这两个对象//类型的别名
type myType = string //给string类型起个别名为mytype,但这样用没有意义,所以在下列情况,我们使用类型别名来简化代码
type myType1 = 1 | 2 | 3 | 4 | 5
let t: myType1;
let u: myType1;
(1)tsc xxx.ts -w
这里的w是watch的意思,输入这样的命令之后,会帮助我们监视该ts文件,当该文件内容发生变化之后,会帮助我们在一定的时间间隔之后自动编译ts文件。
(2)ts配置文件
tsconfig.json是js编译器的配置文件,ts编译器可以根据它的信息对ts文件进行编译。
{
// include用来指定哪些ts文件需要编译// exclude用来指定哪些ts文件不需要编译// **表示任意目录 *表示任意文件"include": ["./**/*"],"exclude": [//默认值// "node_modules","bowser_components","jspm_packages"],"extends": "./xxx.json", //定义被继承的配置文件"files": [] ,// 要编译哪些文件直接罗列出来即可"compilerOptions": {"strict": false, //所有严格检查的总开关 所有严格检查可以在这里统一控制 "target": "ES5", //编译后的js版本"module": "ES2015", //编译后的模块化规范"lib": [], //指定项目中使用的库"outDir": "./dist","ourFile":"", //将代码合并为一个文件"allowJs": false, //是否对js文件进行编译 默认不编译"checkJs": true, //是否检查js代码语法符合规范"removeComments": false, //是否移除注释"noEmit": false, //不生成编译后的文件"noEmitOnError": false, //当有错误时,不生成编译文件"alwaysStrict": false, //用来设置编译后的代码是否使用严格模式"noImplicitAny": true, //不允许隐式的any类型"noImplicitThis": true, //不允许不明确类型的this"strictNullChecks": true, //严格的检查空值},}
上一篇:shell可以造什么句子?
下一篇:类与对象(中篇)