一 概述
TypeScript(简称 TS)是微软公司开发的一种基于 JavaScript (简称 JS)语言的编程语言。
TypeScript 可以看成是 JavaScript 的超集(superset),即它继承了后者的全部语法,所有 JavaScript 脚本都可以当作 TypeScript 脚本(但是可能会报错),此外它再增加了一些自己的语法。
// 声明变量指定number类型
let a1: number;
a1 = 10;
// 此时赋值非number类型会引起编译报错
// a1 = 'hello';
============================================================
// 声明变量时直接赋值,ts可自动检测类型
let c1 = false;
// 此时赋值非boolean类型会引起编译报错
// c1 = 1;
============================================================
// 可以使用 | 连接多个类型(此时变量的类型可以是指定类型的其中之一)
let d1: number | null | undefined;
d1 = 1;
d1 = null;
============================================================
// 函数参数指定类型
function sum(a2: number, b2: number) {
return a2 + b2;
}
// 如下调用函数时会编译报错:参数必须是number,参数必须是2个
// sum(123, '456');
// sum(123, 456, 789);
// sum(123);
// 函数返回值指定类型
function sum2(c2, d2): number {
return c2 + d2;
// 返回值必须是number,否则会编译报错
// return '123';
}
============================================================
// ts提供的类型如图
// 其中字面量就是固定的值(相当于常量)
let a3: 10 = 10;
let b3: '你好' = '你好';
let c3: {haha: 1} = {haha: 1};
// 只能改成固定的值,相当于没改,改成其他值编译报错
a3 = 10;
// a3 = 20;
// b3 = '早上好';
c3 = {haha: 1};
// 字面量定义多个值(相当于下拉选的值)
let d3: 'yes' | 'no' | null;
d3 = 'yes';
d3 = null;
// d3 = 'yes123';
============================================================
// any 表示任意类型,并且ts不会对该类型的变量做类型校验(不建议使用,应尽量避免!)
let a4: any;
a4 = 1;
a4 = true;
a4 = '';
a4 = 15;
// 如果声明一个变量时没有指定类型,也没有赋值,这个变量就默认是any(不建议使用,应尽量避免!)
let b4;
b4 = 1;
b4 = true;
b4 = '';
============================================================
// unknown 表示未知类型(变量本身赋值时和 any 效果一样)
let c4: unknown;
c4 = 1;
c4 = true;
c4 = '';
c4 = 15;
============================================================
// 但是使用变量时,unknown 和 any 是有区别的(unknown 类型更安全)
let d4: number;
// a4(any) 可直接赋值给 d4(number)
d4 = a4;
// c4(unknown) 必须做类型校验 或 类型断言
// d4 = c4;
if (typeof c4 === 'number') {
d4 = c4;
}
// 类型断言,告诉编译器 c4是number,有以下两种写法
d4 = c4 as number;
d4 = <number>c4;
二、基本语法
1.声明原始数据类型
// string类型
const a: string = 'hello'
// number类型
const b: number = 666 // 包括 NAN Infinity
// boolean类型
const c: boolean = true
// null类型
const d: null = null
// undefined类型
const e: undefined = undefined
// symbol类型
const h: symbol = Symbol()
2. 声明Object类型
首先,object类型不单单可以指定对象,还可以指定数组或函数:
const foo1: object = {};
const foo2: object = [];
const foo3: object = function(){};
如果只想指定为对象,如下,对象属性都要提前声明好类型:
const obj: {name: string,age: number} = {
name: '北极光',
age:18
}
2.1 声明数组类型
方式一、可以指定声明Array且通过<>指定元素类型,比如声明元素都为数字得数组:
const arr: Array<number> = [1, 2, 3]
方式二、使用 T[],T为元素类型,例:number[]、string[]
const arr: number[] = [1, 2, 3]
可以为数组中每个元素指定类型,严格一一对应
const arr: [number, string, boolean] = [ 666, 'hello world', true ]
3. 声明枚举类型
通过关键字 enum
声明一个枚举类型,如:
enum Status {
pedding = 1,
resolve = 2,
reject = '3'
}
//访问
console.log(Status.pedding);
如果全不写值,默认值为从0开始递增。如果第一个元素为字符类型,就必须全部定义值。如果第一个元素指定为一个数字,后面元素不写值,那值为第一个元素值按位置大小递增的结果。
4. *函数参数与返回类型
指定函数传入 参数类型
,指定 返回值类型
,调用时传入参数个数与类型都必须相同:
括号里
指定每个参数类型
,括号右边
指定返回值的类型
。
// (name:string,age:number):string
// 分号左侧(name:string,age:number)为参数类型
// 分号右侧string 为返回值类型
function fun (name:string,age:number):string{
return 'sss'
}
fun('auroras',18);
如果传入参数不确定传不传,那么可以给参数加个 ?
表明它是可选的:
function fun (name:string,age?:number):string{
return 'sss'
}
fun('auroras');
或者给参数添加默认值,那也会成为可选参数:
function fun (name:string,age:number=666):string{
return 'sss'
}
fun('auroras');
如果参数个数不确定,可以用扩展运算符加解构赋值表示,当然要传入与指定类型一致的:
function fun (name:string,age:number=666,...res:number[]):string{
return 'sss'
}
fun('auroras',1,2,3);
函数表达式:
const fun2:(name:string,age:number)=>string = function(name:string,age:number){
return 'sss'
}
5.任意类型
6.类型断言
类型断言就是明确的告诉 typescript
这个变量就是某种类型的,百分之百确定。不用 typescript
在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。
参考文章
分享Typescript的13个基础语法