说一下typescript
- 由微软开发的一款开源编程语言
- 是js的超集,遵循最新的ES5,ES6规范。(什么意思)扩展了js的语法
- 更像面向对象的语言,java,c#。适合开发大型项目
- vue ,react 也可以去集成ts
安装 编译
安装
npm命令 依赖nodejs
3种方式:
npm install -g typescript
cnpm install -g typescript
yarn global add typescripr
验证是否安装成功:
tsc -v
注意:
如果电脑上面没有安装过 cnpm,请先安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果电脑上面没有安装过 yarn 请先安装 yarn:
npm install -g yarn
或者
cnpm install -g yarn
编译
浏览器不支持.ts ,需要编译成es5语言才可以识别
手动 编译命令
tsc index.ts 即 tsc ts文件.ts
vscode自动编译
-
tsc --init生成tsconfig.json 配置文件
-
-
点击终端--> 运行任务--->typeacript--->tsc:监视
-
监视成功后可直接编写ts文件,并实时在指定目录生成js文件
ts中的数据类型
typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验
布尔类型boolean
let boo:boolean = false;
let boo2:boolean = true;
数字类型 number
let num:number=1;
let num2:number = 1.1111;
字符串类型 string
var str:string ="hello string"
void 类型
void也可以用来声明变量,但只能作用在undefined身上,null也不行。只有tsconfig.json中strictNullChecks属性设置为false时,null才能赋值给void
const u:void=undefined;//这是个鸡肋用法,基本不会这么用
const n:void=null;//这样会报错
const age:void=18;//这样也会报错
可以用 void 表示没有任何返回值的函数:
function alertName(): void {
alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:
never 类型
never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。
let a:never
// a=null 报错
a = (()=>{ //正确
throw new Error('错误')
})()
null 和undefined
undefined、和 null
当一个变量被声明成undefined或null,该变量只能被赋值undefined或者null:
let undef: undefined = undefined
let nul: null = null
在ts官网中,undefined和null是任何类型的子类型,说明undefined和null可以赋值给任何其他类型,但不能直接赋值:
/* 会报错 */
let num: number
num = undefined
num = null
要使得上面代码不报错,需要修改下ts的配置文件:
...
"strictNullChecks": false, /* Enable strict null checks. */
...
或者,如果想要用比较严格的语法,可以使用联合类型,比如:let num: number | undefined | null
数组类型array
两种方式:
方式一:
let arr:number[] =[1,3,45];
方式二:
// 泛型的定义方法
let arr:Array<number> = [1,2,3,4,5]
元组类型 tuple
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组。即 数组的一种,可以定义规范元素的数据类型和数组长度
举例:下面数组长度只能是3
let arr:[number,string ,boolean] = [1,"1",false]
let arr2 :[number]=[1] 数据长度只能是1
枚举类型 enum
事先考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表示它的每一个值,
这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
} ;
举例:
enum Water {
农夫山泉=1,
怡宝=2,
哇哈哈=3
};
console.log(Water.农夫山泉) // 1
enum Flag {success=1,error=2};
console.log(Flag.success) // 1
enum Color {
blue,green,orange
}
console.log(Color.green) //未赋值,输出索引值
enum Color2 {
blue,green =5 ,orange
}
console.log(Color2.green) //5
console.log(Color2.orange) //6 根据上面的值进行递增
console.log(Color2.blue)// 0
注意:如果把枚举值设置为字符串形式,也能写,但是编译时会报错
因为下面的值没法根据上面的字符串值继续递增或推导了,所以这里强烈不建议将枚举项的值设置为字符串类型。
enum Color3 {
blue,green ="5a" ,orange
}
console.log(Color3.green) //0
console.log(Color3.orange) //5a
console.log(Color3.blue)
枚举具体解释可参考
https://blog.csdn.net/yezitoo/article/details/102919898
任意类型 any
有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量:
let n: any = 4;
n = "hello any";
n = true;
可随意类型赋值
共11种类型
** 以下内容学习自 ts.xcatliu.com/ **
类型推论
如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型。
以下代码虽然没有指定类型,但是会在编译的时候报错:
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
因为默认把myFavoriteNumber在第一次赋值时 推论成了string类型。再赋值一个number类型,肯定会报错
注意:如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查:
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
联合类型
联合类型表示取值可以为多种类型中的一种。
简单的例子
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
let myFavoriteNumber: string | number;
myFavoriteNumber = true;
// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
// Type 'boolean' is not assignable to type 'number'.
联合类型使用 | 分隔每个类型。
这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。